@extends('admin.layout.main')

@section('admin')
    <div class="min-h-screen bg-gray-50  print:bg-white">
        <!-- Header Section -->
        <div class="bg-white shadow-sm border-b border-gray-200  no-print mb-6">
            <div class="px-4 sm:px-6 lg:px-8 py-6">
                <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 bg-gradient-to-r from-purple-500 to-indigo-600 rounded p-3 shadow-md">
                                <i class="fas fa-file-invoice text-white text-xl"></i>
                            </div>
                            <div class="ml-4">
                                <h1 class="text-2xl font-bold text-gray-900 ">Invoice Details</h1>
                                <div class="flex flex-wrap items-center mt-1">
                                    <p class="text-sm text-gray-500 ">
                                        Invoice #: <span
                                            class="font-medium text-gray-700 dark:text-gray-300">INV-{{ str_pad($payment->id, 6, '0', STR_PAD_LEFT) }}</span>
                                    </p>
                                    <span class="mx-2 text-gray-300 dark:text-gray-600">•</span>
                                    <p class="text-sm text-gray-500 ">
                                        Project: <span
                                            class="font-medium text-gray-700 dark:text-gray-300">{{ $payment->project->name ?? 'N/A' }}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4 flex md:mt-0 md:ml-4 space-x-3">
                        <a href="{{ route('admin.payments.invoice') }}"
                            class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
                            <i class="fas fa-arrow-left mr-2 text-gray-500"></i>
                            Back to Invoices
                        </a>
                        <button onclick="window.print()"
                            class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
                            <i class="fas fa-print mr-2 text-gray-500"></i>
                            Print
                        </button>
                        <button
                            class="inline-flex items-center px-4 py-2 border border-transparent rounded shadow-sm text-sm font-medium text-white bg-gradient-to-r from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all">
                            <i class="fas fa-download mr-2"></i>
                            Download PDF
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Invoice Content -->
        <div class="max-w-5xl mx-auto p-6 space-y-6 bg-white ">
            <!-- Invoice Card -->
            <div class="bg-white  rounded print:shadow-none  print:border-0   overflow-hidden">
                <!-- Invoice Header -->
                <div class="bg-gradient-to-r ">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                        <div class="mb-4 md:mb-0">
                            <img class="h-20" src="{{ asset('images/inve-logo.png') }}" alt="">
                        </div>
                        <div>
                            <p class="text-xl font-bold uppercase mt-2">
                                INVESECURITY BUSNIESS INCUBETOR
                            </p>
                            <p>
                                CR: 7051792260 VAT No (TRN): 314252983300003
                        </div>
                        <div class="text-right">
                            <div class="text-2xl font-bold">INV-{{ str_pad($payment->id, 6, '0', STR_PAD_LEFT) }}</div>
                            <p class="text-gray-500 mt-1">Issued: {{ $payment->created_at->format('M d, Y') }}</p>
                        </div>
                    </div>
                </div>
                <div class="flex">
                    <div class="p-1 bg-blue-500 w-[20%] rounded-l-md">
                    </div>
                    <div class="p-1 bg-gray-300 w-[80%] rounded-r-md">
                    </div>
                </div>

                <!-- Company & Client Info -->
                <div class="px-8 py-6  border-gray-200 ">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <!-- Company Info -->
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900  mb-4">Seller Details</h3>
                            <div class="space-y-2">
                                <p class="text-sm font-medium text-gray-900 ">{{ $branch->name }}</p>
                                <p class="text-sm font-medium text-gray-900 ">{{ $branch->branch_type_name }}</p>
                                <p class="text-sm text-gray-600 ">{{ $branch->addressline1 }}</p>
                                <p class="text-sm text-gray-600 ">{{ $branch->addressline2 }}</p>
                                {{-- <p class="text-sm text-gray-600 ">Email: {{ $branch->email }}</p>
                                <p class="text-sm text-gray-600 ">Phone: {{ $branch->phone }} </p> --}}
                            </div>
                        </div>

                        <!-- Client Info -->
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900  mb-4">Bill To</h3>
                            <div class="space-y-2">
                                @php
                                    $contactInfo = is_array($payment->project->serviceRequest->contact_info ?? [])
                                        ? $payment->project->serviceRequest->contact_info
                                        : json_decode($payment->project->serviceRequest->contact_info ?? '[]', true);
                                @endphp
                                <p class="text-sm font-medium text-gray-900 ">
                                    {{ $contactInfo['name'] ?? ($payment->user->name ?? 'N/A') }} /
                                    {{ $contactInfo['company'] ?? 'No Company' }}
                                </p>

                                <p class="text-sm text-gray-600 ">
                                    {{ $contactInfo['email'] ?? ($payment->user->email ?? 'N/A') }}
                                </p>
                                <p class="text-sm text-gray-600 ">
                                    {{ $contactInfo['phone'] ?? 'N/A' }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- <!-- Invoice Details -->
                <div class="px-8 py-6 border-b border-gray-200 ">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                        <div>
                            <p class="text-sm font-medium text-gray-500 ">Invoice Date</p>
                            <p class="text-lg font-semibold text-gray-900 ">
                                {{ $payment->created_at->format('M d, Y') }}
                            </p>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-500 ">Payment Date</p>
                            <p class="text-lg font-semibold text-gray-900 ">
                                {{ \Carbon\Carbon::parse($payment->payment_date)->format('M d, Y') }}
                            </p>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-500 ">Payment Method</p>
                            <p class="text-lg font-semibold text-gray-900 capitalize">
                                {{ str_replace('_', ' ', $payment->payment_method) }}
                            </p>
                        </div>
                        <div class="text-center">
                            <p class="text-sm font-medium text-gray-500 ">Status</p>
                            <span
                                class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium
                            @if ($payment->status === 'paid') text-green-800  dark:text-green-300
                            @elseif($payment->status === 'pending')
                                 text-yellow-800  
                            @else
                                 text-red-800 @endif">

                                {{ ucfirst($payment->status) }}
                            </span>
                        </div>
                    </div>
                </div> --}}
                @php
                    $services = is_string($payment->project->services)
                        ? json_decode($payment->project->services, true)
                        : $payment->project->services;
                @endphp


                <div class=" px-8">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Project Services
                        ({{ $payment->project->name ?? 'N/A' }})</h3>
                    <div class="overflow-hidden   border border-gray-200">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-blue-500 text-white">
                                <tr>
                                    <th class="px-4 py-2 text-left text-xs font-medium  uppercase">No</th>
                                    <th class="px-4 py-2 text-left text-xs font-medium  uppercase">Service Name
                                    </th>
                                    <th class="px-4 py-2 text-left text-xs font-medium  uppercase">Description
                                    </th>
                                    <th class="px-4 py-2 text-center text-xs font-medium  uppercase">Qty</th>
                                    <th class="px-4 py-2 text-right text-xs font-medium  uppercase">Price</th>
                                    <th class="px-4 py-2 text-right text-xs font-medium  uppercase">Total</th>
                                </tr>
                            </thead>

                            <tbody class="bg-white divide-y divide-gray-200">
                                @forelse ($services as $index => $service)
                                    @php
                                        $qty = $service['qty'] ?? 1;
                                        $price = $service['price'] ?? 0;
                                        $total = $qty * $price;
                                    @endphp

                                    <tr>
                                        <td class="px-4 py-2 text-sm text-gray-700">
                                            {{ $loop->iteration }}.
                                        </td>

                                        <td class="px-4 py-2 text-sm font-medium text-gray-900">
                                            {{ $service['name'] ?? 'N/A' }}
                                        </td>

                                        <td class="px-4 py-2 text-sm text-gray-600">
                                            {{ $service['description'] ?? '-' }}
                                        </td>

                                        <td class="px-4 py-2 text-sm text-center text-gray-700">
                                            {{ $qty }}
                                        </td>

                                        <td class="px-4 py-2 text-sm text-right text-gray-700">
                                            {{ isset($service['price']) ? number_format($service['price'], 2) . ' SR' : '-' }}
                                        </td>

                                        <td class="px-4 py-2 text-sm font-semibold text-right text-green-600">

                                            {{ isset($service['price']) ? number_format($total, 2) . ' SR' : '-' }}
                                        </td>

                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="px-4 py-4 text-center text-sm text-gray-500">
                                            No services found for this project.
                                        </td>
                                    </tr>
                                @endforelse
                                <tr>
                                    <td colspan="5" class="px-6 py-4 text-right text-sm font-bold text-gray-900 "
                                        colspan="1">
                                        Total Amount:
                                    </td>
                                    <td class="px-6 py-4 text-right">
                                        <p class=" font-bold text-green-600 ">
                                            {{ number_format($payment->amount, 2) }} SR
                                        </p>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>


                <!-- Project & Payment Details -->
                <div class="px-8 py-6">


                    {{-- @dd($payment) --}}

                    <div class="mb-8">
                        <h3 class="text-lg font-semibold text-gray-900 ">Payment Details</h3>

                        <div class="flex gap-3 justify-between">
                            <!-- Payment Card -->
                            <div class="border w-1/2 border-gray-200 rounded-lg p-6 shadow-sm">
                                <div class="flex justify-between items-start mb-2">
                                    <div>
                                        <p class="text-sm opacity-80">Payment Method</p>
                                        <p class="text-xl font-bold">
                                            {{ str_replace('_', ' ', ucfirst($payment->payment_method)) }}</p>
                                    </div>
                                    <div class="text-right">
                                        <div class="flex items-center space-x-1">
                                            <span
                                                class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                                                {{ ucfirst($payment->status) }}
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-2">
                                    <p class="text-sm opacity-80 mb-1">Transection ID</p>
                                    <p class="text-2xl font-mono tracking-widest">
                                        {{ $payment->transaction_id ?? 'XXXX' }}
                                    </p>
                                </div>

                                <div class="flex justify-between">
                                    <div>
                                        <p class="text-sm opacity-80">Date</p>
                                        <p class="text-lg font-medium">
                                            {{ \Carbon\Carbon::parse($payment->payment_date)->format('d M, Y') }}</p>
                                    </div>
                                    <div>
                                        <p class="text-sm opacity-80">Amount</p>
                                        <p class="text-lg font-bold">{{ number_format($payment->amount, 2) }} SR</p>
                                    </div>
                                </div>
                            </div>
                            <div class="mt-8 w-1/2 pt-6 border-t border-gray-200 ">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                    <div>
                                        <h4 class="text-sm font-semibold text-gray-900  mb-2">Notes</h4>
                                        @if ($payment->notes)
                                            <p class="text-sm text-gray-600 ">{{ $payment->notes }}</p>
                                        @else
                                            <p class="text-sm text-gray-400  italic">No additional notes</p>
                                        @endif
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>



                    <!-- Notes & Footer -->

                </div>
            </div>


        </div>
    </div>

    <style>
        @media print {
            .no-print {
                display: none !important;
            }

            body {
                background: white !important;
            }



            .dark\:bg-dark-secondary {
                background: white !important;
            }

            .dark\:text-white {
                color: black !important;
            }

            .dark\:text-gray-400 {
                color: #6B7280 !important;
            }

            @media print {
                body {
                    overflow: hidden !important;
                }

                /* Chrome, Edge, Safari */
                ::-webkit-scrollbar {
                    display: none;
                }

                /* Firefox */
                * {
                    scrollbar-width: none;
                }

                /* IE / পুরনো Edge */
                * {
                    -ms-overflow-style: none;
                }
            }

        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Invoice view page loaded');
        });
    </script>
@endsection