@extends('layouts.app')
@section('title', 'Bangladesh Unbound - Payment Receipt')
@section('page-title', 'Payment Receipt')

@push('styles')
    <style>
        .back-icon-green {
            filter: hue-rotate(90deg) saturate(1.5) brightness(0.8);
        }

        .btn-back {
            text-align: center;
            line-height: 1.2;
        }

        .btn-back br {
            margin: 4px 0;
        }
    </style>
@endpush

@section('breadcrumb')
    <nav class="breadcrumb-container" aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{{ route('admin.dashboard') }}">
                    <img src="{{ asset('backend/img/ico/ico-dashboard.svg') }}" alt="Dashboard" class="breadcrumb-icon">
                    Dashboard
                </a>
            </li>
            <li class="breadcrumb-item">
                <a href="{{ route('admin.booking.payments.index') }}">
                    <img src="{{ asset('backend/img/ico/ico-payment.svg') }}" alt="Payment" class="breadcrumb-icon">
                    Payment
                </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                <img src="{{ asset('backend/img/ico/ico-status.svg') }}" alt="Receipt" class="breadcrumb-icon">
                Receipt {{ $transaction?->transaction_number ?? 'N/A' }}
            </li>
        </ol>
    </nav>
@endsection

@section('content')
    <div class="receipt-container">
        <div class="receipt-header">
            <div class="receipt-logo">
                <img src="{{ asset('backend/img/logo.png') }}" alt="Bangladesh Unbound" class="receipt-logo-img">
            </div>
            <div class="receipt-title">
                <h2>Payment Receipt</h2>
                <p>Transaction ID:
                    <strong>{{ $transaction?->transaction_number ?? 'N/A' }}</strong>
                </p>
            </div>
            <div class="receipt-status">
                <span
                    class="badge {{ $transaction?->payment_status === 'success' ? 'bg-success' : 'bg-danger' }} receipt-badge">
                    {{ $transaction?->payment_status }}
                </span>
            </div>
        </div>

        <div class="receipt-content">
            <div class="row">
                <!-- Customer Information -->
                <div class="col-md-6">
                    <div class="receipt-section">
                        <h4 class="receipt-section-title">
                            <img src="{{ asset('backend/img/ico/ico-profile.svg') }}" alt="Customer"
                                class="receipt-section-icon">
                            Customer Information
                        </h4>
                        <div class="receipt-info">
                            <p><strong>Name:</strong> {{ $transaction?->customer?->full_name ?? '-' }}</p>
                            <p><strong>Email:</strong> {{ $transaction?->customer?->email }}</p>
                            <p><strong>Phone:</strong> {{ $transaction?->customer?->phone }}</p>
                        </div>
                    </div>
                </div>

                <!-- Payment Information -->
                <div class="col-md-6">
                    <div class="receipt-section">
                        <h4 class="receipt-section-title">
                            <img src="{{ asset('backend/img/ico/ico-payment.svg') }}" alt="Payment"
                                class="receipt-section-icon">
                            Payment Information
                        </h4>
                        <div class="receipt-info">
                            <p><strong>Date:</strong>
                                {{ \Carbon\Carbon::parse($transaction?->created_at)->format('d M Y') }}</p>
                            <p><strong>Method:</strong> {{ $transaction?->method?->name ?? 'N/A' }}</p>
                            <p><strong>Details:</strong> {{ $transaction?->metadata->notes ?? 'N/A' }}</p>
                            @if ($transaction->method->id == 5)
                                <p><strong>Bank Name:</strong> {{ $transaction?->metadata->bank_name ?? 'N/A' }}</p>
                                <p><strong>Branch:</strong> {{ $transaction?->metadata->branch_name ?? 'N/A' }}</p>
                                <p><strong>A/C Name:</strong> {{ $transaction?->metadata->bank_account_name ?? 'N/A' }}</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tour Information -->
            @foreach ($transaction->items as $item)
                <div class="receipt-section">
                    <h4 class="receipt-section-title">
                        <img src="{{ asset('backend/img/ico/ico-package.svg') }}" alt="Tour"
                            class="receipt-section-icon">
                        Tour Information
                    </h4>
                    <div class="row">
                        <div class="col-md-8">
                            <div class="receipt-info">
                                <p><strong>Order ID:</strong> {{ $item?->booking?->booking_no }}</p>
                                <p><strong>Tour Name:</strong> {{ $item?->booking?->tourPackage?->name }}</p>
                                <p><strong>Package:</strong> {{ $item?->booking?->tourPackage?->duration }}</p>
                                <p><strong>Tour Dates:</strong> {{ $item?->booking?->travel_date }}</p>
                                @if ($item?->booking?->tourGuide?->user?->full_name ?? '' && $item?->booking?->tourGuide?->user?->phone !== 'N/A')
                                    <p><strong>Tour Guide:</strong>
                                        {{ $item?->booking?->tourGuide?->user?->full_name ?? '' }}
                                        ({{ $item?->booking?->tourGuide?->user?->phone }})
                                    </p>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="receipt-amount">
                                <h3>Total Amount</h3>
                                <div class="amount-display fs-4">৳ {{ number_format($item?->amount, 2) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

            <!-- Receipt Footer -->
            <div class="receipt-footer">
                <div class="receipt-actions">
                    @can('payment-receipt-pdf')
                    <button class="btn btn-print" onclick="window.print()">
                        <img src="{{ asset('backend/img/ico/ico-print.svg') }}" alt="Print"> Print
                    </button>
                    @endcan
                    @can('payment-receipt-pdf')
                    <button class="btn btn-save-profile"
                        onclick="window.open('{{ route('admin.payments.receipt.pdf', $transaction->id) }}', '_blank')">
                        <i class="bi bi-download"></i> Download PDF
                    </button>
                    @endcan
                </div>
                <div class="receipt-actions">
                    <a href="{{ route('admin.booking.payments.index') }}" class="btn btn-back">
                        <img src="{{ asset('backend/img/ico/ico-payment.svg') }}" alt="Back" class="back-icon-green">
                        Back to Payments
                    </a>
                </div>
                <div class="receipt-note">
                    <p><strong>Note:</strong> This is an electronic receipt. Please keep this for your records.</p>
                    <p><small>Generated on {{ now()->format('d M Y, H:i') }} | Bangladesh Unbound Tours</small></p>
                </div>
            </div>
        </div>
    </div>
@endsection