@extends('layouts.app')

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

@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">Receive Purchase Order</h1>
        <a href="{{ route('purchase.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 Receive / Update</h2>
        </div>

        <div class="p-4">
            <form id="purchase-update-form" method="POST" class="space-y-4">
                @csrf
                @method('PUT')
                <input type="hidden" name="purchase_id" id="purchase_id">

                <!-- Purchase Order Info -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <!-- Supplier (read-only or select?) -->
                    <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" id="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> TK</span>
                </div>

                <!-- Order Items / Receive 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 (readonly or select) -->
                            <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 (readonly) -->
                            <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" readonly>

                            <!-- received qty (editable) -->
                            <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" readonly>

                            <!-- hidden total price -->
                            <input type="hidden" name="items[0][total_price]" class="item-total-price">

                            <!-- remove button -->
                            <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 (optional) -->
                    <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">
                        Update / Receive
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let products = [];

        // Load all products to populate selects
        fetch('/select/products')
            .then(res => res.json())
            .then(data => {
                products = data;
            });

        // Load suppliers & warehouses
        fetch('/select/suppliers')
            .then(res => res.json())
            .then(data => populateSelect($('#supplier_id')[0], data));

        fetch('/select/warehouses')
            .then(res => res.json())
            .then(data => populateSelect($('#warehouse_id')[0], data));

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

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

        // On document ready
        $(document).ready(function() {
            const purchaseId = {{ $id }};  // Pass this id from your controller

            // Load purchase data
            $.ajax({
                url: `/purchase/${purchaseId}`,
                method: 'GET',
                success: function(resp) {
                    $('#purchase_id').val(resp.id);
                    $('#supplier_id').val(resp.supplier.id);
                    $('#warehouse_id').val(resp.warehouse.id);

                    const orderDate = new Date(resp.order_date).toISOString().slice(0, 10);
                    const receivedDate = resp.received_date
                        ? new Date(resp.received_date).toISOString().slice(0, 10)
                        : '';

                    $('#order_date').val(orderDate);
                    $('#received_date').val(receivedDate);
                    $('#status').val(resp.status);
                    $('#payment_status').val(resp.payment_status);
                    $('#remarks').val(resp.remarks);
                    $('#total_amount').val(resp.total_amount);
                    $('#display_total').text(parseFloat(resp.total_amount).toFixed(2));

                    // Populate items
                    let container = $('#items-container');
                    container.empty();

                    resp.items.forEach((item, idx) => {
                        const row = $('<div class="grid grid-cols-1 md:grid-cols-5 gap-2 item-row"></div>');

                        // product select
                        const prodSelect = $('<select class="product-select form-select w-full text-[11px] border border-gray-300 rounded px-2 py-1"></select>');
                        populateProductSelect(prodSelect[0]);
                        prodSelect.val(item.product.id);
                        row.append(prodSelect.prop('name', `items[${idx}][product_id]`));

                        // ordered qty (readonly)
                        row.append($('<input type="number" readonly class="form-input w-full text-[11px] border border-gray-300 rounded px-2 py-1">')
                            .prop('name', `items[${idx}][ordered_qty]`)
                            .val(item.ordered_qty));

                        // received qty (editable)
                        row.append($('<input type="number" class="form-input w-full text-[11px] border border-gray-300 rounded px-2 py-1">')
                            .prop('name', `items[${idx}][received_qty]`)
                            .val(item.received_qty));

                        // unit price (readonly)
                        row.append($('<input type="number" step="0.01" readonly class="form-input w-full text-[11px] border border-gray-300 rounded px-2 py-1">')
                            .prop('name', `items[${idx}][unit_price]`)
                            .val(item.unit_price));

                        // hidden total price
                        row.append($('<input type="hidden" class="item-total-price">')
                            .prop('name', `items[${idx}][total_price]`)
                            .val(item.total_price));

                        // remove button
                        row.append($('<button type="button" class="remove-item text-[10px] text-red-600 hover:text-red-800">Remove</button>'));

                        container.append(row);
                    });

                    calculateTotals();
                },
                error: function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Failed to load purchase data.',
                    });
                }
            });

            // Add new row (if needed)
            let itemIndex = 0;
            $('#add-item').click(function () {
                const container = $('#items-container');
                const template = container.find('.item-row').first().clone();

                template.find('select, input').each(function () {
                    let name = $(this).prop('name');
                    name = name.replace(/\[\d+\]/, '[' + itemIndex + ']');
                    $(this).prop('name', name);
                    if (!$(this).is('[readonly]')) {
                        $(this).val('');
                    }
                });

                populateProductSelect(template.find('.product-select')[0]);
                container.append(template);
                itemIndex++;
            });

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

            // On change of received qty or unit price, recalc totals
            $(document).on('input', '.item-row input[name$="[received_qty]"], .item-row input[name$="[unit_price]"]', function() {
                calculateTotals();
            });

            function calculateTotals() {
                let total = 0;
                $('#items-container .item-row').each(function(idx, row) {
                    const qty = parseFloat($(row).find(`[name="items[${idx}][ordered_qty]"]`).val()) || 0;
                    const received = parseFloat($(row).find(`[name="items[${idx}][received_qty]"]`).val()) || 0;
                    const unit = parseFloat($(row).find(`[name="items[${idx}][unit_price]"]`).val()) || 0;

                    const tp = unit * received;
                    $(row).find(`input[name="items[${idx}][total_price]"]`).val(tp.toFixed(2));

                    total += tp;
                });
                $('#total_amount').val(total.toFixed(2));
                $('#display_total').text(total.toFixed(2));
            }

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

                let formData = new FormData(this);

                $.ajax({
                    url: `/purchase/${purchaseId}`,  // should match your update route
                    method: 'POST',  // since we used @method('PUT'), POST is acceptable
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Updated!',
                            text: res.message,
                        }).then(() => {
                            window.location.href = '{{ route('purchase.index') }}';
                        });
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            const errors = xhr.responseJSON.errors;
                            $.each(errors, function(field, messages) {
                                const input = $(`[name="${field}"]`);
                                if (input.length) {
                                    input.addClass('border-red-500');
                                    input.after(`<p class="text-[10px] text-red-600 mt-1">${messages[0]}</p>`);
                                }
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'An unexpected error occurred.',
                            });
                        }
                    }
                });
            });

        });

        function clearErrors() {
            $('.border-red-500').removeClass('border-red-500');
            $('.text-red-600').remove();
        }
    </script>
@endpush