@section("title", "BizMan | Quotation Detail")

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Quotation Detail') }}
        </h2>
        <p class="text-gray-500 text-sm">{{ date('l, d M Y') }}</p>
    </x-slot>

    <div>
        <div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
            <!-- Back Button -->
            <div class="mb-6">
                <a href="{{ route('quotations.index') }}" 
                   class="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors">
                    <svg class="w-4 h-4" 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"></path>
                    </svg>
                    Kembali
                </a>
            </div>

            <!-- Quotation Card -->
            <div class="bg-white rounded-lg shadow-lg p-8" id="quotation-content">
                <!-- Header -->
                <div class="flex justify-between items-start mb-8">
                    <div>
                        <h1 class="text-3xl font-bold text-gray-800 mb-2">QUOTATION</h1>
                        <p class="text-gray-600">{{ $quotation->quotation_number }}</p>
                    </div>
                    <div class="text-right">
                        <p class="font-semibold text-gray-800">Your Company Name</p>
                        <p class="text-gray-600">company@example.com</p>
                        <p class="text-gray-600">+62 123 4567 890</p>
                    </div>
                </div>

                <!-- Bill To & Date Info -->
                <div class="flex justify-between mb-8">
                    <div>
                        <p class="font-semibold text-gray-800 mb-2">Bill To:</p>
                        <p class="text-gray-700 font-medium">{{ $quotation->customer->name }}</p>
                        <p class="text-gray-600">{{ $quotation->customer->email }}</p>
                        @if($quotation->customer->company_name)
                        <p class="text-gray-600">{{ $quotation->customer->company_name }}</p>
                        @endif
                    </div>
                    <div class="text-right">
                        <div class="mb-2">
                            <span class="text-gray-600">Date:</span>
                            <span class="ml-8 text-gray-800">{{ \Carbon\Carbon::parse($quotation->quotation_date)->format('d/m/Y') }}</span>
                        </div>
                        <div>
                            <span class="text-gray-600">Valid Until:</span>
                            <span class="ml-4 text-gray-800">{{ \Carbon\Carbon::parse($quotation->valid_until)->format('d/m/Y') }}</span>
                        </div>
                    </div>
                </div>

                <!-- Items Table -->
                <div class="bg-gray-50 rounded-lg overflow-hidden mb-6">
                    <table class="w-full">
                        <thead class="bg-gray-100">
                            <tr>
                                <th class="text-left py-3 px-4 font-semibold text-gray-700">Description</th>
                                <th class="text-center py-3 px-4 font-semibold text-gray-700">Qty</th>
                                <th class="text-right py-3 px-4 font-semibold text-gray-700">Unit Price</th>
                                <th class="text-right py-3 px-4 font-semibold text-gray-700">Total</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white">
                            @foreach($quotation->items as $item)
                            <tr class="border-b border-gray-200">
                                <td class="py-4 px-4 text-gray-800">{{ $item->item_name }}</td>
                                <td class="py-4 px-4 text-center text-gray-800">{{ $item->quantity }}</td>
                                <td class="py-4 px-4 text-right text-gray-800">Rp {{ number_format($item->item_price, 0, ',', '.') }}</td>
                                <td class="py-4 px-4 text-right text-gray-800">Rp {{ number_format($item->total, 0, ',', '.') }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Summary -->
                <div class="flex justify-end mb-8">
                    <div class="w-80">
                        <div class="flex justify-between py-2 border-b border-gray-200">
                            <span class="text-gray-600">Subtotal:</span>
                            <span class="text-gray-800">Rp {{ number_format($quotation->subtotal, 0, ',', '.') }}</span>
                        </div>
                        <div class="flex justify-between py-2 border-b border-gray-200">
                            <span class="text-gray-600">Tax ({{ $quotation->tax_percentage }}%):</span>
                            <span class="text-gray-800">Rp {{ number_format($quotation->subtotal * $quotation->tax_percentage / 100, 2, ',', '.') }}</span>
                        </div>
                        <div class="flex justify-between py-3 font-semibold text-lg">
                            <span class="text-gray-800">Total:</span>
                            <span class="text-gray-800">Rp {{ number_format($quotation->total, 2, ',', '.') }}</span>
                        </div>
                    </div>
                </div>

                <!-- Notes & Terms -->
                @if($quotation->notes)
                <div class="mb-4">
                    <h3 class="font-semibold text-gray-800 mb-2">Notes:</h3>
                    <p class="text-gray-600 whitespace-pre-line">{{ $quotation->notes }}</p>
                </div>
                @endif

                @if($quotation->terms_conditions)
                <div class="mb-6">
                    <h3 class="font-semibold text-gray-800 mb-2">Terms & Conditions:</h3>
                    <p class="text-gray-600 whitespace-pre-line">{{ $quotation->terms_conditions }}</p>
                </div>
                @endif

                <!-- Action Buttons -->
                <div class="flex gap-3 print:hidden">
                    <a href="{{ route('quotations.index') }}" 
                       class="px-6 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition">
                        Tutup
                    </a>
                    <button onclick="window.print()" 
                            class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <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
                    </button>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <style>
        @media print {
            body * {
                visibility: hidden;
            }
            #quotation-content, #quotation-content * {
                visibility: visible;
            }
            #quotation-content {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
            }
            .print\:hidden {
                display: none !important;
            }
        }
    </style>
    @endpush
</x-app-layout>