@extends('layouts.admin')

@section('title', isset($invoice) ? 'Edit Invoice' : 'Create Invoice')

@php
    $title = isset($invoice) ? 'Edit Invoice' : 'Create Invoice';
@endphp

@section('content')
<div class="max-w-6xl mx-auto">
    <div id="message-container"></div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100">
        <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
            <div>
                <h2 class="text-lg font-semibold text-gray-900">
                    {{ isset($invoice) ? 'Edit Invoice' : 'Create Invoice' }}
                </h2>
                <p class="text-sm text-gray-500 mt-1">
                    {{ isset($invoice) ? 'Update invoice details and line items' : 'Fill in the details to create a new invoice' }}
                </p>
            </div>
            @if(isset($invoice))
            <div class="flex space-x-2">
                <!-- Print Button with Dropdown -->
                <div class="relative inline-block" x-data="{ open: false }">
                    <button @click="open = !open" type="button" class="px-3 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition flex items-center">
                        <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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path>
                        </svg>
                        Print
                        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div x-show="open" @click.away="open = false" class="absolute right-0 z-50 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5" style="display: none;">
                        <div class="py-1">
                            <a href="{{ route('billing.print', $invoice->id) }}" target="_blank" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Modern Format</a>
                            <a href="{{ route('billing.thermal-print', $invoice->id) }}" target="_blank" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Thermal Format</a>
                        </div>
                    </div>
                </div>

                <!-- PDF Button with Dropdown -->
                <div class="relative inline-block" x-data="{ open: false }">
                    <button @click="open = !open" type="button" class="px-3 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition flex items-center">
                        <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"></path>
                        </svg>
                        PDF
                        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div x-show="open" @click.away="open = false" class="absolute right-0 z-50 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5" style="display: none;">
                        <div class="py-1">
                            <a href="{{ route('billing.pdf', $invoice->id) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Modern Format</a>
                            <a href="{{ route('billing.thermal-pdf', $invoice->id) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Thermal Format</a>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>

        <div class="p-6">
            <form id="invoice-form">
                @csrf
                <input type="hidden" name="invoice_id" value="{{ $invoice->id ?? '' }}">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <!-- Invoice Number -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Invoice Number
                        </label>
                        <input
                            type="text"
                            name="invoice_number"
                            value="{{ $invoice->invoice_number ?? $invoiceNumber }}"
                            readonly
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg bg-gray-50"
                        >
                    </div>

                    <!-- Customer -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Customer <span class="text-red-500">*</span>
                        </label>
                        <select
                            name="customer_id"
                            id="customer-select"
                            required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                        >
                            <option value="">Select Customer</option>
                            @foreach($customers as $customer)
                                <option value="{{ $customer->id }}"
                                    {{ (isset($invoice) && $invoice->customer_id == $customer->id) || (!isset($invoice) && isset($defaultCustomer) && $defaultCustomer->id == $customer->id) ? 'selected' : '' }}>
                                    {{ $customer->name }} - {{ $customer->phone }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Invoice Date -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Invoice Date <span class="text-red-500">*</span>
                        </label>
                        <input
                            type="date"
                            name="invoice_date"
                            value="{{ isset($invoice) ? $invoice->invoice_date->format('Y-m-d') : date('Y-m-d') }}"
                            required
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                        >
                    </div>

                    <!-- Status -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            Status
                        </label>
                        <select
                            name="status"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                        >
                            <option value="draft" {{ (isset($invoice) && $invoice->status == 'draft') ? 'selected' : '' }}>Draft</option>
                            <option value="sent" {{ (isset($invoice) && $invoice->status == 'sent') ? 'selected' : '' }}>Sent</option>
                            <option value="paid" {{ (isset($invoice) && $invoice->status == 'paid') ? 'selected' : '' }}>Paid</option>
                            <option value="cancelled" {{ (isset($invoice) && $invoice->status == 'cancelled') ? 'selected' : '' }}>Cancelled</option>
                        </select>
                    </div>
                </div>

                <!-- Invoice Items -->
                <div class="mb-6">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-md font-semibold text-gray-900">Invoice Items</h3>
                        <button type="button" id="add-item-btn" class="px-3 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition">
                            + Add Item
                        </button>
                    </div>

                    <div id="items-container" class="space-y-4">
                        @if(isset($invoice))
                            @foreach($invoice->items as $index => $item)
                                <div class="item-row border border-gray-200 rounded-lg p-4" data-index="{{ $index }}">
                                    <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
                                        <div class="md:col-span-2">
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Product</label>
                                            <select name="items[{{ $index }}][product_id]" class="product-select w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" required>
                                                <option value="">Select Product</option>
                                                @foreach($products as $product)
                                                    <option value="{{ $product->id }}" {{ $item->product_id == $product->id ? 'selected' : '' }}>
                                                        {{ $product->name }} {{ $product->style ? '('.$product->style.')' : '' }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Size</label>
                                            <select name="items[{{ $index }}][size_id]" class="size-select w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" required>
                                                <option value="{{ $item->size_id }}">{{ $item->size->name }}</option>
                                            </select>
                                        </div>

                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Qty</label>
                                            <input type="number" name="items[{{ $index }}][quantity]" value="{{ $item->quantity }}" min="1" class="quantity-input w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" required>
                                        </div>

                                        <div>
                                            <label class="block text-sm font-medium text-gray-700 mb-2">Price</label>
                                            <input type="number" name="items[{{ $index }}][unit_price]" value="{{ $item->unit_price }}" step="0.01" min="0" class="price-input w-full px-3 py-2 border border-gray-300 rounded-lg text-sm" required>
                                        </div>
                                    </div>

                                    <div class="flex justify-between items-center mt-3">
                                        <span class="text-sm font-medium text-gray-700">
                                            Total: ₹<span class="item-total">{{ number_format($item->total, 2) }}</span>
                                        </span>
                                        <button type="button" class="remove-item-btn text-red-600 hover:text-red-800 text-sm font-medium">Remove</button>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>

                <!-- Totals Section -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Notes</label>
                        <textarea
                            name="notes"
                            rows="4"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                            placeholder="Add any notes or special instructions..."
                        >{{ $invoice->notes ?? '' }}</textarea>
                    </div>

                    <div class="space-y-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-gray-700">Subtotal:</span>
                            <span class="text-sm font-semibold text-gray-900">₹<span id="subtotal-display">0.00</span></span>
                        </div>

                        <div class="flex justify-between items-center">
                            <label class="text-sm font-medium text-gray-700">Tax Rate (%):</label>
                            <input
                                type="number"
                                name="tax_rate"
                                id="tax-rate"
                                value="{{ $invoice->tax_rate ?? 0 }}"
                                step="0.01"
                                min="0"
                                max="100"
                                class="w-24 px-3 py-1 border border-gray-300 rounded text-sm text-right"
                            >
                        </div>

                        <div class="flex justify-between items-center">
                            <span class="text-sm font-medium text-gray-700">Tax Amount:</span>
                            <span class="text-sm font-semibold text-gray-900">₹<span id="tax-display">0.00</span></span>
                        </div>

                        <div class="flex justify-between items-center">
                            <label class="text-sm font-medium text-gray-700">Discount:</label>
                            <input
                                type="number"
                                name="discount"
                                id="discount"
                                value="{{ $invoice->discount ?? 0 }}"
                                step="0.01"
                                min="0"
                                class="w-24 px-3 py-1 border border-gray-300 rounded text-sm text-right"
                            >
                        </div>

                        <div class="border-t pt-3 flex justify-between items-center">
                            <span class="text-lg font-semibold text-gray-900">Total:</span>
                            <span class="text-lg font-bold text-indigo-600">₹<span id="total-display">0.00</span></span>
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="flex space-x-3 pt-6 border-t border-gray-200">
                    <button
                        type="submit"
                        id="save-btn"
                        class="flex-1 px-4 py-2.5 bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium rounded-lg hover:from-indigo-600 hover:to-purple-700 transition disabled:opacity-50"
                    >
                        {{ isset($invoice) ? 'Update Invoice' : 'Create Invoice' }}
                    </button>
                    <a href="{{ route('billing.index') }}" class="px-4 py-2.5 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition">
                        Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // Pass products data to JavaScript
    window.productsData = @json($products);
    window.isEdit = {{ isset($invoice) ? 'true' : 'false' }};
</script>
<script src="{{ asset('js/billing.js') }}"></script>
@endsection