@extends('admin.templates.layout')
@section('content')
<div class="row">
    <div class="col-xl-9">
        <div class="card">
            <div class="card-header">
                <div class="d-flex align-items-center">
                    <h5 class="card-title flex-grow-1 mb-0">Redemption #{{ $redemption->order_number ?? $redemption->qr_code_string }}</h5>
                    <div class="flex-shrink-0">
                        <span class="badge bg-success-subtle text-success fs-12">
                            <i class="ri-check-double-line align-middle me-1"></i> Completed
                        </span>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-lg-3 col-6">
                        <p class="text-muted mb-2 text-uppercase fw-semibold fs-12">Redemption Date</p>
                        <h5 class="fs-14 mb-0">{{ $redemption->redeemed_at->format('d M Y, h:i A') }}</h5>
                    </div>
                    <div class="col-lg-3 col-6">
                        <p class="text-muted mb-2 text-uppercase fw-semibold fs-12">Total bill amount</p>
                        <h5 class="fs-14 mb-0 text-primary">{{ config('global.default_currency_code') }}{{ number_format($redemption->bill_amount, 2) }}</h5>
                    </div>
                    <div class="col-lg-3 col-6">
                        <p class="text-muted mb-2 text-uppercase fw-semibold fs-12">Amount Saved</p>
                        <h5 class="fs-14 mb-0 text-success">{{ config('global.default_currency_code') }}{{ number_format($redemption->amount_saved, 2) }}</h5>
                    </div>
                    <div class="col-lg-3 col-6">
                        <p class="text-muted mb-2 text-uppercase fw-semibold fs-12">QR Code used</p>
                        <h5 class="fs-14 mb-0"><code>{{ $redemption->qr_code_string }}</code></h5>
                    </div>
                </div>
            </div>
            <div class="card-body border-top border-top-dashed">
                <h6 class="text-muted text-uppercase fw-semibold mb-3">Voucher detail</h6>
                <div class="d-flex align-items-center mb-2">
                    <div class="flex-shrink-0">
                        @if($redemption->voucher && $redemption->voucher->image_url)
                            <img src="{{ $redemption->voucher->image_url }}" alt="" class="avatar-md rounded shadow">
                        @else
                             <div class="avatar-md bg-light rounded shadow d-flex align-items-center justify-content-center">
                                <i class="ri-image-2-line fs-24 text-muted"></i>
                             </div>
                        @endif
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <h5 class="fs-15 mb-1">{{ $redemption->voucher_title }}</h5>
                        <p class="text-muted mb-0">Type: <span class="badge bg-info-subtle text-info text-capitalize">{{ str_replace('_', ' ', $redemption->offer_type) }}</span></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0"><i class="ri-map-pin-line align-middle me-1 text-muted"></i> Activity Details</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive table-card">
                    <table class="table table-borderless align-middle mb-0">
                        <thead class="table-light text-muted">
                            <tr>
                                <th scope="col">Summary</th>
                                <th scope="col">Details</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Voucher ID</td>
                                <td>#{{ $redemption->voucher_id }}</td>
                            </tr>
                            <tr>
                                <td>Offer details</td>
                                <td>
                                    @if($redemption->offer_type == 'percentage')
                                        {{ $redemption->discount_value }}% Discount
                                    @elseif($redemption->offer_type == 'fixed')
                                        {{ config('global.default_currency_code') }}{{ $redemption->discount_value }} OFF
                                    @elseif($redemption->offer_type == 'buy_one_get_one')
                                        Buy 1 Get 1 Free
                                    @elseif($redemption->offer_type == 'buy_two_get_one')
                                        Buy 2 Get 1 Free
                                    @endif
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3">
        <div class="card">
            <div class="card-header">
                <div class="d-flex">
                    <h5 class="card-title flex-grow-1 mb-0"><i class="ri-user-3-line align-middle me-1 text-muted"></i> Customer Info</h5>
                </div>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li>
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                                <img src="{{ $redemption->user->user_image_url ?? asset('admin_assets/assets/images/users/avatar-1.jpg') }}" alt="" class="avatar-sm rounded shadow">
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="fs-14 mb-1">{{ $redemption->user->name ?? 'N/A' }}</h6>
                                <p class="text-muted mb-0">Customer</p>
                            </div>
                        </div>
                    </li>
                    <li class="mt-3">
                        <i class="ri-mail-line me-2 align-middle text-muted fs-16"></i>{{ $redemption->user->email ?? 'N/A' }}
                    </li>
                    
                </ul>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0"><i class="ri-store-2-line align-middle me-1 text-muted"></i> Vendor info</h5>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li>
                        <h6 class="fs-14 mb-1">{{ $redemption->vendorUser->vendorDetail->business_name ?? $redemption->vendorUser->name ?? 'N/A' }}</h6>
                        <p class="text-muted mb-0">Business Name</p>
                    </li>
                    <li class="mt-3">
                        <h6 class="fs-14 mb-1">{{ $redemption->vendorUser->name ?? 'N/A' }}</h6>
                        <p class="text-muted mb-0">Redeemed By (Vendor User)</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection