@extends('layouts.app')

@section('title', 'Purchase Order Create')

@section('content')
    <!-- Page Header -->
    <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 bg-white">
        <h1 class="text-sm font-semibold text-gray-800">Create Purchase Order</h1>
        <a href="{{ route('brand.index') }}"
           class="inline-flex items-center text-[11px] font-medium text-gray-700 hover:text-gray-900 border border-gray-300 px-2 py-1 rounded-md bg-gray-50 hover:bg-gray-100 transition">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
            Back
        </a>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-lg shadow-sm mt-3">
        <div class="px-4 py-2 border-b border-gray-200">
            <h2 class="text-xs font-semibold text-gray-800">Purchase Order Create</h2>
        </div>

        <div class="p-4">
            <form id="purchase-order-form" method="POST" class="space-y-4">
                @csrf

                <!-- Purchase Order Info -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <!-- Supplier -->
                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">Supplier</label>
                        <select name="supplier_id" id="supplier_id"
                                class="form-select w-full text-[11px] border border-gray-300 rounded px-2 py-1 bg-white focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select Supplier</option>
                        </select>
                    </div>

                    <!-- Warehouse -->
                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">Warehouse</label>
                        <select name="warehouse_id" id="warehouse_id"
                                class="form-select w-full text-[11px] border border-gray-300 rounded px-2 py-1 bg-white focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select Warehouse</option>
                        </select>
                    </div>

                    <!-- Order Date -->
                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">Order Date</label>
                        <input type="date" name="order_date" id="order_date"
                               class="form-input w-full text-[11px] border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                    </div>

                    <!-- Received Date -->
                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">Received Date</label>
                        <input type="date" name="received_date" id="received_date"
                               class="form-input w-full text-[11px] border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                    </div>

                    <!-- Status -->
                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">Status</label>
                        <select name="status" id="status"
                                class="form-select w-full text-[11px] border border-gray-300 rounded px-2 py-1 bg-white focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                            <option value="draft">Draft</option>
                            <option value="ordered">Ordered</option>
                            <option value="partially_received">Partially Received</option>
                            <option value="received">Received</option>
                            <option value="cancelled">Cancelled</option>
                        </select>
                    </div>

                    <!-- Payment Status -->
                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">Payment Status</label>
                        <select name="payment_status" id="payment_status"
                                class="form-select w-full text-[11px] border border-gray-300 rounded px-2 py-1 bg-white focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                            <option value="unpaid">Unpaid</option>
                            <option value="partial">Partial</option>
                            <option value="paid">Paid</option>
                        </select>
                    </div>
                </div>

                <!-- Remarks -->
                <div>
                    <label class="text-[11px] font-medium text-gray-700 block mb-1">Remarks</label>
                    <textarea name="remarks" rows="2"
                              class="form-textarea w-full text-[11px] border border-gray-300 rounded px-2 py-1 focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
                              placeholder="Enter any remarks..."></textarea>
                </div>
                <input type="hidden" name="total_amount" id="total_amount" value="0">
                <div class="pt-2 text-right">
                    <span class="text-[12px] font-semibold">Total: $<span id="display_total">0.00</span></span>
                </div>
                <!-- Order Items -->
                <div>
                    <label class="text-[11px] font-semibold text-gray-700 block mb-2">Order Items</label>
                    <div id="items-container" class="space-y-3">
                        <div class="grid grid-cols-1 md:grid-cols-5 gap-2 item-row">
                            <!-- Product -->
                            <select name="items[0][product_id]"
                                    class="product-select form-select w-full text-[11px] border border-gray-300 rounded px-2 py-1">
                                <option value="">Select Product</option>
                            </select>

                            <!-- Ordered Qty -->
                            <input type="number" name="items[0][ordered_qty]" placeholder="Qty"
                                   class="form-input w-full text-[11px] border border-gray-300 rounded px-2 py-1">

                            <!-- Received Qty -->
                            <input type="number" name="items[0][received_qty]" placeholder="Received"
                                   class="form-input w-full text-[11px] border border-gray-300 rounded px-2 py-1">

                            <!-- Unit Price -->
                            <input type="number" step="0.01" name="items[0][unit_price]" placeholder="Unit Price"
                                   class="form-input w-full text-[11px] border border-gray-300 rounded px-2 py-1">
                            <input type="hidden" name="items[0][total_price]" class="item-total-price">

                            <!-- Remove -->
                            <button type="button"
                                    class="remove-item text-[10px] text-red-600 hover:text-red-800 focus:outline-none">
                                Remove
                            </button>
                        </div>
                    </div>

                    <!-- Add Row Button -->
                    <div class="pt-2">
                        <button type="button" id="add-item"
                                class="text-[11px] bg-green-600 text-white px-3 py-1.5 rounded hover:bg-green-700 transition">
                            + Add Item
                        </button>
                    </div>
                </div>

                <!-- Submit -->
                <div class="flex justify-end pt-4">
                    <button type="submit"
                            class="text-[11px] font-medium bg-blue-600 text-white px-4 py-1.5 rounded hover:bg-blue-700 transition">
                        Save Purchase Order
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let products = [];
        fetch('/select/products')
            .then(res => res.json())
            .then(data => {
                products = data;
                const firstSelect = document.querySelector('.product-select');
                populateProductSelect(firstSelect);
            });

        fetch('/select/suppliers')
            .then(res => res.json())
            .then(data => populateSelect(document.getElementById('supplier_id'), data));

        fetch('/select/warehouses')
            .then(res => res.json())
            .then(data => populateSelect(document.getElementById('warehouse_id'), data));

        function populateSelect(selectElement, data) {
            data.forEach(item => {
                const option = document.createElement('option');
                option.value = item.id;
                option.textContent = item.name;
                selectElement.appendChild(option);
            });
        }

        function populateProductSelect(select) {
            select.innerHTML = '<option value="">Select Product</option>';
            products.forEach(product => {
                const option = document.createElement('option');
                option.value = product.id;
                option.textContent = product.name;
                select.appendChild(option);
            });
        }

        // Add new item row
        let itemIndex = 1;
        document.getElementById('add-item').addEventListener('click', () => {
            const container = document.getElementById('items-container');
            const template = document.querySelector('.item-row');
            const newRow = template.cloneNode(true);

            // Reset inputs and update names
            newRow.querySelectorAll('select, input').forEach(input => {
                if (input.name) {
                    input.name = input.name.replace(/\[\d+]/, `[${itemIndex}]`);
                }
                input.value = '';
            });

            // Re-populate product select
            populateProductSelect(newRow.querySelector('.product-select'));

            container.appendChild(newRow);
            itemIndex++;
        });

        // Remove item row
        document.addEventListener('click', function (e) {
            if (e.target.classList.contains('remove-item')) {
                const row = e.target.closest('.item-row');
                const allRows = document.querySelectorAll('.item-row');
                if (allRows.length > 1) row.remove();
            }
        });

    </script>
    <script>
        $(document).ready(function() {

            // Clear validation errors
            function clearErrors() {
                $('.error-text').remove();
                $('input, select, textarea').removeClass('border-red-500');
            }

            // Calculate total_price per item and total_amount
            function calculateTotals() {
                let totalAmount = 0;
                $('#items-container .item-row').each(function(index, row) {
                    let qty = parseFloat($(row).find('input[name="items['+index+'][ordered_qty]"]').val()) || 0;
                    let received = parseFloat($(row).find('input[name="items['+index+'][received_qty]"]').val()) || 0;
                    let unitPrice = parseFloat($(row).find('input[name="items['+index+'][unit_price]"]').val()) || 0;

                    let totalPrice = qty * unitPrice;
                    $(row).find('input[name="items['+index+'][total_price]"]').val(totalPrice.toFixed(2));

                    totalAmount += totalPrice;
                });

                $('#total_amount').val(totalAmount.toFixed(2));
                $('#display_total').text(totalAmount.toFixed(2));
            }

            // Trigger calculation on input change
            $(document).on('input', '.item-row input[name$="[ordered_qty]"], .item-row input[name$="[unit_price]"]', function() {
                calculateTotals();
            });

            // Add new item row
            let itemIndex = $('#items-container .item-row').length;
            $('#add-item').click(function() {
                let newRow = $('#items-container .item-row:first').clone();
                newRow.find('input, select').val('');
                newRow.find('input.item-total-price').val('0');
                newRow.find('input, select').each(function() {
                    let name = $(this).attr('name');
                    name = name.replace(/\d+/, itemIndex);
                    $(this).attr('name', name);
                });
                $('#items-container').append(newRow);
                itemIndex++;
                calculateTotals();
            });

            // Remove item row
            $(document).on('click', '.remove-item', function() {
                if($('#items-container .item-row').length > 1) {
                    $(this).closest('.item-row').remove();
                    calculateTotals();
                }
            });

            // AJAX submit
            $('#purchase-order-form').on('submit', function(e) {
                e.preventDefault();
                clearErrors();

                let formData = new FormData(this);

                $.ajax({
                    url: "{{ route('purchase.store') }}",
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        alert(response.message);
                        $('#purchase-order-form')[0].reset();
                        $('#display_total').text('0.00');
                        $('#items-container').find('.item-row').not(':first').remove();
                    },
                    error: function(xhr) {
                        if(xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            $.each(errors, function(field, messages) {
                                let fieldName = field.replace(/\./g,'_');
                                let input = $('[name="'+field+'"]');
                                if(input.length === 0) {
                                    input = $('[name="'+fieldName+'"]');
                                }
                                if(input.length > 0) {
                                    input.addClass('border-red-500');
                                    input.after('<p class="error-text text-[10px] text-red-600 mt-1">'+messages[0]+'</p>');
                                }
                            });
                        } else {
                            alert('An unexpected error occurred.');
                        }
                    }
                });
            });

            // Initial calculation
            calculateTotals();
        });
    </script>
@endpush