@extends('layouts.app')



@section('content')
    @push('css')
        <style>
            @media print {
                * {
                    -webkit-print-color-adjust: exact !important;
                    print-color-adjust: exact !important;
                }
            }

            @page {
                size: A4;
                margin: 0;
            }

            body {
                background-color: #f4f6f9;
                margin: 0;
                padding: 0;
            }

            .invoice-container {
                width: 100%;
                width: 210mm;
                min-height: 297mm;

                box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            }

            .invoice-header {
                border-bottom: 2px dashed #e7e2ff;
                padding-bottom: 10px;
                margin-bottom: 20px;
                margin-top: 180px;
            }

            .invoice-title {
                font-size: 28px;
                font-weight: 700;
                color: #343a40;
            }

            .invoice-logo {
                max-height: 70px;
            }

            .invoice-section {
                margin-bottom: 20px;
            }

            .table th {
                background-color: #f8f9fa;
                font-weight: 600;
                text-align: center;
            }

            .table td {
                vertical-align: middle;
            }

            .text-end-bold {
                text-align: right;
                font-weight: 600;
            }

            .status-badge {
                padding: 0.3rem 0.7rem;
                border-radius: 5px;
                font-size: 0.9rem;
                font-weight: 600;
            }

            .status-paid {
                background-color: #bde1d1;
                color: #0f5132;
            }

            .status-pending {
                background-color: #fff3cd;
                color: #664d03;
            }

            .status-cancelled {
                background-color: #f8d7da;
                color: #842029;
            }

            .invoice-footer {
                border-top: 2px dashed #eae6ff;
                margin-top: 30px;
                padding-top: 20px;
                text-align: center;
                font-size: 0.9rem;
                color: #6c757d;
            }

            .table {
                width: 100%;
                border-collapse: collapse;
                background-color: #fcfaff;
                /* page background */
                font-family: Arial, sans-serif;
            }

            .table th,
            .table td {
                border: 1px solid #6743a9;
                padding: 10px 8px;
                font-size: 15px
            }

            .table thead th {
                background-color: #6743a9;
                color: #fff;
                font-weight: 600;
                text-align: center;
            }

            .table tbody tr:nth-child(even) {
                background-color: #ede4ff;
                /* subtle striped effect */
            }

            .table tbody td {
                vertical-align: middle;
            }

            .table tbody td.text-center {
                text-align: center;
            }

            .table tbody td.text-end {
                text-align: right;
            }

            .table tfoot td {
                font-weight: 600;
                background-color: #f0ebff;
            }

            .table tfoot td.text-end-bold {
                text-align: right;
            }

            .status-paid {
                display: inline-block;
                padding: 3px 8px;
                color: #fff;
                background-color: #28a745;
                border-radius: 4px;
                font-size: 0.85rem;
            }

            /* Hide print button on print */
            .no-print {
                margin-top: 15px;
                position: fixed;
                bottom: 15px;
                right: 15px;
            }

            @media print {
                body {
                    background-color: #fff;
                }

                .invoice-container {
                    box-shadow: none;
                    padding: 10mm;
                    margin: 0;
                }

                .no-print {
                    display: none;
                }
            }
        </style>
    @endpush


    <!-- Invoice Container -->
    <div class="overflow-auto">
        <div id="invoice" class="invoice-container rounded-lg my-12 mx-auto">
            <div style="width:100%; min-height:297mm; background:url({{ asset('assets/images/invoice.png') }}) no-repeat center center; background-size:cover; padding:50px;"
                class="rounded-lg">

                <!-- Header -->
                <div class="invoice-header flex justify-between mb-5">
                    <div>
                        <p class="mb-1 font-semibold text-red-700">
                            {{ __('menu.invoice') }}: {{ $transaction->invoice_no }}
                        </p>
                        <p class="mb-0">{{ __('menu.date') }}: {{ $transaction->created_at->format('d F Y') }}</p>
                    </div>

                    @php
                        $statusColors = [
                            'pending' => 'bg-yellow-200 text-yellow-800',
                            'paid' => 'bg-green-200 text-green-800',
                            'failed' => 'bg-red-200 text-red-800',
                            'refunded' => 'bg-blue-200 text-blue-800',
                            'cancelled' => 'bg-gray-200 text-gray-800',
                        ];
                    @endphp

                    <div class="text-right">
                        <h5 class="mb-1">
                            <span class="font-semibold">{{ __('menu.payment_status') }}:</span>
                            <span
                                class="px-2.5 rounded font-semibold {{ $statusColors[strtolower($transaction->payment_status)] ?? 'bg-gray-200 text-gray-800' }}">
                                {{ ucfirst($transaction->payment_status) }}
                            </span>
                        </h5>
                        <p class="mb-1">
                            <span class="font-semibold">{{ __('menu.enrollment_status') }}:</span>
                            {{ ucfirst($transaction->enrollments[0]->status) }}
                        </p>
                    </div>
                </div>


                <div class="invoice-section flex flex-wrap justify-between mb-5">
                    <!-- Student Details -->
                    <div class="flex-1 min-w-[300px]">
                        <h5 class="text-[#d8063b] font-semibold mb-3">{{ __('menu.student_details') }}</h5>
                        <p class="mb-1"><strong>{{ __('menu.name') }}:</strong>
                            {{ $transaction->enrollments[0]->user->name }}</p>
                        <p class="mb-1"><strong>{{ __('menu.email') }}:</strong>
                            {{ $transaction->enrollments[0]->user->email }}</p>
                        <p class="mb-1"><strong>{{ __('menu.phone') }}:</strong>
                            {{ $transaction->enrollments[0]->user->phone }}</p>
                    </div>

                    <!-- Payment / Course Details -->
                    <div class="flex-1 min-w-[300px] text-right mt-5">
                        <p class="mb-1"> <span class="font-semibold">{{ __('menu.transaction_id') }}:</span>
                            {{ $transaction->transaction_id }}</p>
                        <p class="mb-1"><span class="font-semibold">{{ __('menu.payment_method') }}:</span>
                            {{ $transaction->payment_method }}</p>
                    </div>
                </div>




                <!-- Courses Table -->
                <div class="invoice-section">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>{{ __('menu.course_name') }}</th>
                                <th>{{ __('dashboard.registration_code') }} </th>
                                <th>{{ __('menu.course_fee') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="text-slate-800 ">
                                <td>{{ $transaction->enrollments[0]->course->title }}</td>
                                <td class="text-center">{{ $transaction->invoice_no }}</td>
                                <td class="text-end font-semibold">{{ (int) $transaction->total_amount }}৳</td>
                            </tr>

                        </tbody>
                        <tfoot>
                            @if ($transaction->discount > 0)
                                <tr>
                                    <td colspan="2" class="text-end-bold">{{ __('menu.course_discount') }} </td>
                                    <td class="text-end">-{{ (int) $transaction->discount }}৳</td>
                                </tr>
                            @endif
                            <tr>
                                <td colspan="2" class="text-end-bold" style="font-weight: 600;color:#d8063b">
                                    {{ __('menu.total') }}
                                </td>
                                <td class="text-end">{{ (int) $transaction->final_amount }}৳</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>


                <!-- Footer -->
                <div class="invoice-footer">
                    <p>{{ __('messages.enroll_thanks', ['app_name' => $websiteSetting->app_name]) }}</p>
                    <p>{{ __('messages.support_contact', ['email' => $websiteSetting->support_email, 'phone' => $websiteSetting->mobile_number]) }}
                    </p>
                </div>
            </div>
        </div>

        <!-- Print Button -->
        <div class=" no-print">
            <button class="btn btn-primary btn-lg flex items-center" style="background-color: #612dc3; border: none;"
                onclick="printDiv('invoice')">
                <!-- SVG Print Icon -->
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    width="20" height="20" class="me-2">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M6 9V2h12v7M6 18H4a2 2 0 01-2-2V9h20v7a2 2 0 01-2 2h-2m-6 0v4m-4-4h8" />
                </svg>
                Print Invoice
            </button>
        </div>

    </div>
    <script>
        function printDiv() {
            const printContents = document.getElementById('invoice').innerHTML;
            const originalContents = document.body.innerHTML;
            document.body.innerHTML = printContents;
            window.print();
            document.body.innerHTML = originalContents;
            // location.reload(); // reload to restore JS functionality
        }

    </script>
@endsection