@extends('layout.layout')
@section('content')

<style>
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>

@if ($errors->any())
<div class="mb-6 p-4 bg-red-100 text-red-700 rounded-lg border border-red-200">
    <h3 class="font-bold text-lg mb-2">Please correct the following errors:</h3>
    <ul class="list-disc list-inside">
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<form method="POST" action="{{route('purchase.store')}}" enctype="multipart/form-data" class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
    @csrf
    <div class="p-8 bg-white shadow-2xl rounded-2xl space-y-10 border border-gray-100">
        <div class="flex flex-col md:flex-row items-start justify-between gap-6 pb-4 border-b border-gray-200">
            <div>
                <nav class="text-sm text-gray-500 mb-2" aria-label="Breadcrumb">
                    <ol class="list-none flex p-0">
                        <li><a href="#" class="text-gray-500 hover:text-indigo-600 transition">Dashboard</a></li>
                        <li><span class="mx-2 text-gray-400">/</span></li>
                        <li><a href="{{route('purchase.index')}}" class="text-gray-500 hover:text-indigo-600 transition">Purchases</a></li>
                    </ol>
                </nav>
                <h5 class="text-3xl font-extrabold text-gray-900">Create New Purchase Order</h5>
            </div>
        </div>



        <div id="tailwind-loader" style="position:fixed;inset:0;display:flex;justify-content:center;align-items:center;background:white;z-index:9999;">
            <div class="loader-spinner" style="width:60px;height:60px;border:8px solid #f3f3f3;border-top:8px solid #6366f1;border-radius:50%;animation:spin 1s linear infinite;"></div>
        </div>

        <div class="space-y-10">
            <!-- Purchase Information Section -->
            <div>
                <h2 class="text-2xl font-bold text-gray-800 mb-5">Order Information 📝</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div>
                        <label for="po-number" class="block text-sm font-medium text-gray-700">PO #</label>
                        <div class="mt-1 flex rounded-lg shadow-sm">
                            <input type="text" id="purchase_number"
                                name="purchase_number"
                                class="flex-1 block w-full p-2.5 text-sm border-gray-300 rounded-l-lg bg-white"
                                placeholder="Enter or generate PO number"
                                value="{{ old('purchase_number') }}">


                            <span id="generate_po"
                                title="Generate PO"
                                class="flex items-center justify-center px-4 bg-gray-50 border border-gray-300 border-l-0 text-gray-500 rounded-r-lg cursor-pointer hover:bg-gray-100 transition">

                                <svg class="h-5 w-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M7 13h10M7 17h10M5 21h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2z" />
                                </svg>
                            </span>

                        </div>
                        @error('purchase_number')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror

                    </div>
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700">Purchase Name</label>
                        <input type="text" name="name" id="name" placeholder="Purchase title or reference" class="mt-1 block w-full p-2.5 text-sm rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
                            value="{{ old('name') }}">
                        @error('name')
                        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror

                    </div>
                    <div>
                        <label for="required_by" class="block text-sm font-medium text-gray-700">
                            Required By Date <span class="text-red-500">*</span>
                        </label>
                        <input type="date" name="required_by" id="required_by" required class="mt-1 block w-full p-2.5 text-sm rounded-lg border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
                            value="{{ old('required_by') }}">
                    </div>



                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-700">Status <span class="text-red-500">*</span></label>
                        <div class="mt-1 flex rounded-lg shadow-sm">
                            <select id="status" name="status" required class="flex-1 block w-full p-2.5 text-sm border-gray-300 rounded-l-lg bg-white focus:ring-indigo-500 focus:border-indigo-500">
                                <option disabled @selected(!old('status'))>Select Status</option>
                                <option value="pending" @selected(old('status')=='pending' )>Pending</option>
                                <option value="approved" @selected(old('status')=='approved' )>Approved</option>
                                <option value="rejected" @selected(old('status')=='rejected' )>Rejected</option>
                                <option value="completed" @selected(old('status')=='completed' )>Completed</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label for="requested-by" class="block text-sm font-medium text-gray-700">Requested by</label>
                        <select id="requested-by"
                            name="staff_id[]"
                            multiple
                            class="flex-1 block w-full p-2.5 text-sm border-gray-300 rounded-lg bg-white focus:ring-indigo-500 focus:border-indigo-500 general-select">
                            @foreach($staffs as $staff)
                            <option value="{{ $staff->id }}"
                                @if(collect(old('staff_id', $selectedStaffIds ?? []))->contains($staff->id)) selected @endif>
                                {{ $staff->first_name }} {{ $staff->last_name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="h-px bg-gray-200"></div>
            <!-- Vendor Details Section -->
            <div id="vendor-management-section">
                <h2 class="text-2xl font-bold text-gray-800 mb-5">Vendor Details 🚚</h2>
                <!-- Input Area for ONE Vendor Entry (No 'old()' needed here, managed by JS/re-render) -->
                <div id="current-vendor-entry" class="p-5 bg-indigo-50 rounded-xl border border-indigo-200 mb-6 shadow-inner">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 items-end">
                        <div class="md:col-span-2">
                            <label for="vendor-name-input" class="block text-sm font-medium text-indigo-700 mb-1">Vendor Name</label>
                            <div class="mt-1 flex rounded-lg shadow-sm">
                                <input type="text" id="vendor-name-input" placeholder="Vendor name (e.g., Office Supplies Inc.)" class="flex-1 block w-full p-2.5 text-sm border-indigo-300 rounded-l-lg bg-white focus:ring-indigo-500 focus:border-indigo-500">
                                <button type="button" title="Search/Select existing vendor (placeholder)" class="flex items-center justify-center px-4 bg-indigo-100 border border-indigo-300 border-l-0 text-indigo-700 rounded-r-lg cursor-pointer hover:bg-indigo-200 transition">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                        <div>
                            <label for="vendor-phone-input" class="block text-sm font-medium text-indigo-700 mb-1">Phone</label>
                            <input type="text" id="vendor-phone-input" placeholder="e.g. +20 1X XXX XXXX" class="mt-1 block w-full p-2.5 text-sm rounded-lg border-indigo-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        <div>
                            <button type="button" id="add-vendor-btn" class="w-full py-2.5 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition shadow-md">
                                Add Vendor
                            </button>
                        </div>
                    </div>
                </div>
                <!-- Vendors Table -->
                <div class="overflow-x-auto shadow-2xl rounded-xl border border-gray-200">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-100 sticky top-0 z-10">
                            <tr class="text-gray-700 uppercase text-xs font-bold tracking-wider">
                                <th class="px-6 py-3 text-left">#</th>
                                <th class="px-6 py-3 text-left">Vendor Name</th>
                                <th class="px-6 py-3 text-left">Phone</th>
                                <th class="px-6 py-3 text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="vendors-tbody" class="bg-white text-sm divide-y divide-gray-100">
                            <tr id="no-vendors-row">
                                <td colspan="4" class="text-center py-6 text-gray-500 italic">No vendors have been added for this purchase order.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="h-px bg-gray-200"></div>
            <!-- Items Details Section -->
            <div>
                <h2 class="text-2xl font-bold text-gray-800 mb-5">Item(s) Details 🛒</h2>
                <!-- Item Input Area -->
                <div class="flex flex-wrap items-end gap-4 p-5 bg-indigo-50 rounded-xl border border-indigo-200 mb-8 shadow-inner">
                    <div class="flex-1 min-w-[150px] max-w-sm">
                        <label class="block text-xs font-semibold text-indigo-700 mb-1">Serial Number</label>
                        <input type="text" id="serial-number" placeholder="Serial Number" class="block w-full p-2.5 text-sm rounded-lg border-indigo-300 bg-white">
                    </div>

                    <div class="flex-1 min-w-[150px] max-w-sm">
                        <label class="block text-xs font-semibold text-indigo-700 mb-1">Category</label>
                        <input type="text" id="item-category" placeholder="Enter category" class="block w-full p-2.5 text-sm rounded-lg border-indigo-300 bg-white">
                    </div>
                    <div class="flex-1 min-w-[150px] max-w-sm">
                        <label class="block text-xs font-semibold text-indigo-700 mb-1">Product</label>
                        <input type="text" id="item-product" placeholder="Enter product name" class="block w-full p-2.5 text-sm rounded-lg border-indigo-300 bg-white">
                    </div>
                    <div class="w-24">
                        <label class="block text-xs font-semibold text-indigo-700 mb-1">Qty</label>
                        <input type="number" id="item-qty" min="1" value="1" class="block w-full p-2.5 text-sm rounded-lg border-indigo-300">
                    </div>
                    <div class="w-32">
                        <label class="block text-xs font-semibold text-indigo-700 mb-1">Unit Price</label>
                        <input type="number" id="item-price" min="0" step="0.01" placeholder="0.00" class="block w-full p-2.5 text-sm rounded-lg border-indigo-300">
                    </div>
                    <div class="w-24">
                        <label class="block text-xs font-semibold text-indigo-700 mb-1">Tax (%)</label>
                        <input type="number" id="item-tax" min="0" step="0.01" value="14" class="block w-full p-2.5 text-sm rounded-lg border-indigo-300">
                    </div>
                    <button id="add-item-btn" type="button" class="px-6 py-2.5 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
                        Add Item
                    </button>
                </div>
                <!-- Items Table -->
                <div class="overflow-x-auto shadow-2xl rounded-xl border border-gray-200">
                    <table class="min-w-full divide-y divide-gray-200">
                        <!-- Table Head -->
                        <thead class="bg-gray-100 sticky top-0 z-10">
                            <tr class="text-gray-700 uppercase text-xs font-bold tracking-wider">
                                <th class="px-6 py-3 text-left">#</th>
                                <th class="px-6 py-3 text-left">Serial Number</th>
                                <th class="px-6 py-3 text-left">Category</th>
                                <th class="px-6 py-3 text-left">Product</th>
                                <th class="px-6 py-3 text-right">Unit Price</th>
                                <th class="px-6 py-3 text-right">Tax %</th>
                                <th class="px-6 py-3 text-right">Qty</th>
                                <th class="px-6 py-3 text-right">Total Amount</th>
                                <th class="px-6 py-3 text-center">Actions</th>
                            </tr>
                        </thead>

                        <!-- Table Body -->
                        <tbody id="items-tbody" class="bg-white text-sm divide-y divide-gray-100">
                            <!-- Items will be rendered here by JS -->
                        </tbody>
                    </table>
                </div>
                <!-- Totals Summary -->
                <div class="flex justify-end pt-8">
                    <div class="w-full md:w-1/3 p-6 bg-indigo-50 rounded-xl border border-indigo-200 shadow-inner space-y-2 text-gray-700">
                        <div class="flex justify-between font-medium"><span>Subtotal</span> <span id="subtotal">0.00</span> EGP</div>
                        <div class="flex justify-between font-medium"><span>Tax</span> <span id="taxAmount">0.00</span> EGP</div>
                        <div class="flex justify-between items-center pb-2 border-b border-indigo-200">
                            <label for="shipping_cost" class="font-medium">Shipping Cost</label>
                            <input type="number" id="shipping_cost" name="shipping_cost" min="0" step="0.01" class="w-28 text-right p-1 rounded border border-indigo-300 focus:ring-indigo-500 focus:border-indigo-500"
                                value="{{ old('shipping_cost', 0) }}">
                        </div>

                        <div class="flex justify-between text-lg font-extrabold text-indigo-700 pt-2"><span>TOTAL COST</span> <span id="totalCost">0.00</span> EGP</div>
                    </div>
                </div>
            </div>
            <!-- Attachments -->
            <div>
                <h4 class="text-2xl font-bold text-gray-800 mb-5">Attachments 📎</h4>
                <div class="flex items-center justify-between mb-3">
                    <p class="text-md text-gray-600">Attach supporting documents for the purchase order.</p>
                </div>
                <label for="attachments" class="mt-3 flex items-center justify-center px-6 py-12 border-4 border-dashed border-gray-300 rounded-xl cursor-pointer hover:border-indigo-500 hover:bg-indigo-50 transition duration-200 ease-in-out">
                    <div class="text-center">
                        <svg class="mx-auto h-10 w-10 text-indigo-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                        </svg>
                        <p class="mt-3 text-lg font-medium text-gray-700">Drag & drop files here or <span class="text-indigo-600 font-semibold hover:text-indigo-800">click to browse</span></p>
                        <p id="attachments-desc" class="mt-1 text-sm text-gray-500">No files selected</p>
                    </div>
                    <input id="attachments" name="attachments[]" type="file" multiple class="hidden" />
                </label>
            </div>
        </div>
    </div>
    <div class="max-w-7xl mx-auto mt-8 p-4 bg-white shadow-xl rounded-xl flex justify-end space-x-4 border border-gray-100">
        <a href="{{route('purchase.index')}}" class="px-5 py-2.5 border border-gray-300 rounded-lg text-md font-medium text-gray-700 hover:bg-gray-50 transition shadow-sm">Cancel</a>
        <button type="submit" class="px-6 py-2.5 bg-indigo-600 text-white font-semibold rounded-lg text-md hover:bg-indigo-700 transition shadow-lg shadow-indigo-200/50">
            <svg class="w-5 h-5 inline mr-1 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            Create Purchase
        </button>
    </div>
    <script>
        // Check for Tailwind availability and reload if needed (for environment setup)
        (function() {
            const loader = document.getElementById('tailwind-loader');
            if (loader) {
                loader.style.display = 'none';
            }
        })();

        let vendors = @json(old('vendors', []));
        let items = @json(old('items', []));

        document.addEventListener('DOMContentLoaded', function() {
            const tbody = document.getElementById('items-tbody');
            const addBtn = document.getElementById('add-item-btn');
            const subtotalSpan = document.getElementById('subtotal');
            const taxSpan = document.getElementById('taxAmount');
            const totalSpan = document.getElementById('totalCost');

            // Vendor DOM elements
            const vendorNameInput = document.getElementById('vendor-name-input');
            const vendorPhoneInput = document.getElementById('vendor-phone-input');
            const addVendorBtn = document.getElementById('add-vendor-btn');
            const vendorsTbody = document.getElementById('vendors-tbody');
            const noVendorsRow = document.getElementById('no-vendors-row');
            const shippingCostInput = document.getElementById('shipping_cost');

            shippingCostInput.addEventListener('input', updateTotals);

            // Utility functions
            function parseNumber(val) {
                return Number(String(val).replace(/,/g, '').trim()) || 0;
            }

            function fmt(n) {
                return Number(n).toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }

            // --- Vendor Management ---
            function renderVendors() {
                vendorsTbody.innerHTML = '';

                if (vendors.length === 0) {
                    vendorsTbody.appendChild(noVendorsRow);
                    return;
                }

                vendors.forEach((vendor, index) => {
                    const tr = document.createElement('tr');
                    tr.className = 'hover:bg-indigo-50/20 transition';
                    tr.innerHTML = `
                        <td class="px-6 py-4 whitespace-nowrap text-gray-900">${index + 1}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-gray-900 font-medium">${vendor.name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-gray-600">${vendor.phone || 'N/A'}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-center">
                            <button type="button" data-index="${index}" class="text-red-500 hover:text-red-700 font-medium remove-vendor-btn transition">Remove</button>
                        </td>

                        <!-- Hidden inputs for submission: vendors[0][name], vendors[0][phone], etc. -->
                        <input type="hidden" name="vendors[${index}][name]" value="${vendor.name}">
                        <input type="hidden" name="vendors[${index}][phone]" value="${vendor.phone}">
                    `;
                    vendorsTbody.appendChild(tr);
                });
            }

            addVendorBtn.addEventListener('click', function() {
                const name = vendorNameInput.value.trim();
                const phone = vendorPhoneInput.value.trim();

                if (!name) {
                    // Use a visual indicator instead of console.error in production
                    alert("Vendor Name is required.");
                    return;
                }

                vendors.push({
                    name,
                    phone
                });

                // Reset inputs
                vendorNameInput.value = '';
                vendorPhoneInput.value = '';

                renderVendors();
            });

            vendorsTbody.addEventListener('click', function(e) {
                if (e.target.classList.contains('remove-vendor-btn')) {
                    const index = parseInt(e.target.dataset.index);
                    vendors.splice(index, 1);
                    renderVendors();
                }
            });

            // Initial render for persisted vendors
            renderVendors();

            // --- Items Management ---

            function updateTotals() {
                let subtotal = 0,
                    taxAmount = 0,
                    total = 0;

                items.forEach(item => {
                    const itemSubtotal = parseNumber(item.unit_price) * parseNumber(item.qty);
                    const itemTaxAmount = itemSubtotal * (parseNumber(item.tax) / 100);
                    subtotal += itemSubtotal;
                    taxAmount += itemTaxAmount;
                    total += (itemSubtotal + itemTaxAmount);
                });

                const shippingCost = parseNumber(shippingCostInput.value || 0);

                subtotalSpan.innerText = fmt(subtotal);
                taxSpan.innerText = fmt(taxAmount);
                totalSpan.innerText = fmt(total + shippingCost);
            }

            function renderItems() {
                tbody.innerHTML = '';

                if (items.length === 0) {
                    // No need for a placeholder row, let it be empty visually
                    return;
                }

                items.forEach((item, index) => {
                    const serial_number = item.serial_number || 'N/A';
                    const category = item.category || 'N/A';
                    const product = item.product || 'New Item';
                    const qty = parseNumber(item.qty || 1);
                    const unitPrice = parseNumber(item.unit_price || 0);
                    const taxRate = parseNumber(item.tax || 0);

                    const subtotal = unitPrice * qty;
                    const taxAmount = subtotal * (taxRate / 100);
                    const total = subtotal + taxAmount;

                    const tr = document.createElement('tr');
                    tr.className = 'hover:bg-indigo-50/20 transition rounded-lg my-2';
                    // These datasets are not strictly needed anymore since calculations use the 'items' array
                    tr.dataset.subtotal = subtotal;
                    tr.dataset.taxAmount = taxAmount;
                    tr.dataset.total = total;
                    tr.innerHTML = `
                        <td class="px-6 py-4 whitespace-nowrap text-gray-900">${index + 1}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-gray-600">${serial_number}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-gray-600">${category}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-gray-900 font-medium">${product}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-right">${fmt(unitPrice)}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-right">${fmt(taxRate)}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-right">${qty}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-right font-bold text-indigo-700">${fmt(total)}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-center">
                            <button type="button" data-index="${index}" class="text-red-500 remove-btn">Delete</button>
                        </td>

                        <!-- Hidden inputs for form submission -->
                        <input type="hidden" name="items[${index}][serial_number]" value="${serial_number}">
                        <input type="hidden" name="items[${index}][category]" value="${category}">
                        <input type="hidden" name="items[${index}][product]" value="${product}">
                        <input type="hidden" name="items[${index}][qty]" value="${qty}">
                        <input type="hidden" name="items[${index}][unit_price]" value="${unitPrice}">
                        <input type="hidden" name="items[${index}][tax]" value="${taxRate}">
                    `;
                    tbody.appendChild(tr);
                });
            }

            addBtn.addEventListener('click', function() {
                const serial_number = document.getElementById('serial-number').value || '';
                const category = document.getElementById('item-category').value || '';
                const product = document.getElementById('item-product').value || '';
                const qty = parseNumber(document.getElementById('item-qty').value || 1);
                const unitPrice = parseNumber(document.getElementById('item-price').value || 0);
                const taxRate = parseNumber(document.getElementById('item-tax').value || 0);

                if (!product || qty <= 0 || unitPrice < 0) {
                    alert("Please ensure Product, Quantity (must be > 0), and Unit Price are valid.");
                    return;
                }

                // Add to items array
                items.push({
                    serial_number,
                    category,
                    product,
                    qty,
                    unit_price: unitPrice,
                    tax: taxRate
                });

                // Reset inputs
                document.getElementById('serial-number').value = '';
                document.getElementById('item-category').value = '';
                document.getElementById('item-product').value = '';
                document.getElementById('item-qty').value = 1;
                document.getElementById('item-price').value = '';
                document.getElementById('item-tax').value = 14;

                renderItems();
                updateTotals();
            });

            tbody.addEventListener('click', function(e) {
                if (e.target.classList.contains('remove-btn')) {
                    const index = parseInt(e.target.dataset.index);
                    items.splice(index, 1); // Remove from the array
                    renderItems(); // Re-render to update indexes and hidden fields
                    updateTotals();
                }
            });

            // Initial render for persisted items and totals
            renderItems();
            updateTotals();
            // --- End Items Management ---

        });

        function generatePONumber() {
            let randomString = Math.random().toString(36).substring(2, 8).toUpperCase();
            return "PO-" + randomString;
        }
        document.getElementById('generate_po').addEventListener('click', function() {
            document.getElementById('purchase_number').value = generatePONumber();
        });

        document.getElementById('attachments').addEventListener('change', function() {
            let count = this.files.length;

            let label = document.getElementById('attachments-desc');

            if (count === 0) {
                label.textContent = "No files selected";
            } else if (count === 1) {
                label.textContent = "1 file selected";
            } else {
                label.textContent = count + " files selected";
            }
        });
    </script>


</form>
@endsection