@extends('layouts.admin')

@section('content')
<div class="p-8">
    <div class="mb-8">
        <!-- Success/Error Messages -->
        @if(session('success'))
            <div class="mb-6 bg-green-50 border-l-4 border-green-400 p-4 rounded-lg">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-green-700">{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        @endif

        @if(session('error'))
            <div class="mb-6 bg-red-50 border-l-4 border-red-400 p-4 rounded-lg">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-red-700">{{ session('error') }}</p>
                    </div>
                </div>
            </div>
        @endif

        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Invoice Details</h1>
                <p class="text-gray-600 mt-2">Invoice #{{ $invoice->invoice_number }}</p>
            </div>
            <div class="flex space-x-3">
                <a href="{{ route('admin.invoices.download', $invoice) }}"
                   class="inline-flex items-center px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-md hover:bg-red-700">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    Download PDF
                </a>
                <form method="POST" action="{{ route('admin.invoices.resend-email', $invoice) }}" class="inline">
                    @csrf
                    <button type="submit"
                            class="inline-flex items-center px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-md hover:bg-green-700"
                            onclick="return confirm('Are you sure you want to resend the invoice email?')">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                        </svg>
                        Resend Email
                    </button>
                </form>
                <a href="{{ route('admin.invoices.index') }}"
                   class="inline-flex items-center px-4 py-2 bg-gray-600 text-white text-sm font-medium rounded-md hover:bg-gray-700">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                    </svg>
                    Back to Invoices
                </a>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
        <div class="flex justify-between items-start">
            <div>
                <img src="{{ asset('images/invoice_header.jpeg') }}" alt="{{ $invoice?->invoice_number ?? ('INV-' . ($booking->id ?? '')) }}">
            </div>
            <div class="text-right">

            </div>
        </div>

        <hr class="my-1 border-gray-200">

        <div class="flex justify-between mb-8">
            <div>
                <div class="text-gray-500 text-sm mb-1">Invoiced To:</div>
                <div class="font-bold text-base">{{ $invoice->billing_address['name'] ?? 'N/A' }}</div>
                <div class="font-bold text-base">{{ $booking->devotee_details['phone'] ?? '' }}</div>
                <div class="text-sm text-gray-700">{{ $invoice->billing_address['email'] ?? 'N/A' }}</div>
                <div class="text-sm text-gray-700">{{ $invoice->billing_address['street_address'] ?? '' }}</div>
                <div class="text-sm text-gray-700">
                    {{ ($invoice->billing_address['city'] ?? '') }}
                    @if(isset($invoice->billing_address['state'])), {{ $invoice->billing_address['state'] }}@endif
                    {{ $invoice->billing_address['postal_code'] ?? '' }}
                </div>
                <div class="text-sm text-gray-700 mt-5">Gothram: {{ $booking->devotee_details['gotram'] ?? '' }}</div>
            </div>
            <div class="text-right">
                <h2 class="text-xl font-bold text-[#3B3BFF] mb-2">INVOICE</h2>
                <div class="text-sm text-gray-700">
                    <div>Invoice #: <span class="font-semibold">{{ $invoice->invoice_number }}</span></div>
                    <div>Date: <span class="font-semibold">{{ $invoice->invoice_date->format('M d, Y') }}</span></div>
                    <div>Status: <span class="font-semibold">{{ ucfirst($invoice->status) }}</span></div>
                </div>
            </div>
        </div>

        @if($invoice->booking && $invoice->booking->cart_data)
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm text-left border-collapse">
                <thead>
                    <tr class="bg-yellow-600 text-[#222F43]">
                        <th class="px-4 py-3 font-semibold rounded-tl-lg">#</th>
                        <th class="px-4 py-3 font-semibold">DESCRIPTION</th>
                        <th class="px-4 py-3 font-semibold">SLOTS</th>
                        <th class="px-4 py-3 font-semibold">RATE</th>
                        <th class="px-4 py-3 font-semibold rounded-tr-lg">SUBTOTAL</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($invoice->booking->cart_data as $i => $item)
                    <tr class="even:bg-gray-50">
                        <td class="px-4 py-3">{{ $loop->iteration }}</td>
                        <td class="px-4 py-3">
                            <div class="font-semibold">{{ ucwords($item['name'] ?? 'Seva') }}</div>
                            <div class="text-xs text-gray-500">
                                {{ isset($item['date']) ? 'Date: ' . \Carbon\Carbon::parse($item['date'])->format('D, d M Y') : '' }}
                                {{ isset($item['time_slot']) ? ' | Time: ' . $item['time_slot'] : '' }}
                            </div>
                        </td>
                        <td class="px-4 py-3">{{ $item['slots'] ?? 1 }}</td>
                        <td class="px-4 py-3">₹{{ number_format(($item['price'] ?? 0), 2) }}</td>
                        <td class="px-4 py-3 font-semibold">₹{{ number_format((($item['price'] ?? 0) * ($item['slots'] ?? 1)), 2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="flex justify-end mt-8">
            <div class="w-full max-w-xs">
                <div class="flex justify-between py-1 text-sm">
                    <span class="text-gray-500">Subtotal :</span>
                    <span class="font-semibold">₹{{ number_format(collect($invoice->booking->cart_data)->sum(function($item) { return $item['price'] * $item['slots']; }), 2) }}</span>
                </div>
                <div class="flex justify-between py-1 text-sm">
                    <span class="text-gray-500">Online Fee :</span>
                    <span class="font-semibold">₹{{ number_format(collect($invoice->booking->cart_data)->sum('slots') * 10, 2) }}</span>
                </div>
                <div class="flex justify-between py-2 text-lg font-bold border-t border-gray-200 mt-2">
                    <span>Total:</span>
                    <span class="text-[#3B3BFF]">₹{{ number_format($invoice->amount, 2) }}</span>
                </div>
            </div>
        </div>
        
        
        <!-- Thank You Note -->
        <div class="mt-8 p-6 bg-gray-50 rounded-lg text-center">
            <p class="text-gray-700 italic text-xs">
                Thank you for your trust and choice of Seva at Sri Vidya Saraswathi Sri Shani Temples
            </p>
        </div>
        
        @else
        <div class="text-center py-8">
            <p class="text-gray-500">No booking details available for this invoice.</p>
        </div>
        @endif
    </div>
</div>
@endsection