@extends('layouts.app')

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

@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">Receive Purchase Order</h2>
        </div>

        <div class="p-4">
            <form id="receive-form" method="POST" class="space-y-4">
                @csrf
                <input type="hidden" id="purchase_id" name="purchase_id">

                <!-- Purchase Info -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">Purchase Order #</label>
                        <input type="text" name="purchase_number" id="purchase_number"
                               class="form-input w-full text-[11px] border border-gray-300 rounded px-2 py-1" readonly>
                    </div>

                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb-1">Supplier</label>
                        <input type="text" name="supplier_name" id="supplier_name"
                               class="form-input w-full text-[11px] border border-gray-300 rounded px-2 py-1" readonly>
                    </div>

                    <div>
                        <label class="text-[11px] font-medium text-gray-700 block mb=1">Receive 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">
                    </div>
                </div>

                <!-- Items to receive -->
                <div>
                    <label class="text-[11px] font-semibold text-gray-700 block mb-2">Items</label>
                    <div id="receive-items" class="space-y-3">
                        <!-- Example row template -->
                        <div class="grid grid-cols-1 md:grid-cols-5 gap-2 receive-row">
                            <!-- Product (readonly) -->
                            <input type="text" name="items[0][product_name]" class="form-input readonly w-full text-[11px]" readonly>

                            <!-- Ordered qty (readonly) -->
                            <input type="number" name="items[0][ordered_qty]" class="form-input w-full text-[11px]" readonly>

                            <!-- Quantity to receive (input) -->
                            <input type="number" name="items[0][receive_qty]" class="form-input w-full text-[11px]">

                            <!-- Unit cost (readonly or editable as needed) -->
                            <input type="number" step="0.01" name="items[0][unit_cost]" class="form-input w-full text-[11px]" readonly>

                            <!-- Remove (or mark) -->
                            <button type="button" class="remove-receive-row text-[10px] text-red-600 hover:text-red-800 focus:outline-none">Remove</button>
                        </div>
                    </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">
                        Receive Items
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const purchaseId = {{ $id }}; // pass this from controller

        $(document).ready(function() {
            loadPurchase();

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

            $('#receive-form').on('submit', function(e) {
                e.preventDefault();
                clearErrors();

                let formData = new FormData(this);

                $.ajax({
                    url: `/purchase-receive/${purchaseId}`,  // your route
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Received!',
                            text: response.message,
                        }).then(() => {
                            window.location.href = '{{ route("purchase.index") }}';
                        });
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            $.each(errors, function(field, messages) {
                                let 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 loadPurchase() {
            $.ajax({
                url: `/purchase/${purchaseId}`,  // route returns purchase + items
                method: 'GET',
                success: function(resp) {
                    $('#purchase_id').val(resp.id);
                    $('#purchase_number').val(resp.purchase_number);
                    $('#supplier_name').val(resp.supplier.name);
                    // set received_date default to today
                    $('#received_date').val(new Date().toISOString().substr(0, 10));

                    // populate items
                    const container = $('#receive-items');
                    container.empty();

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

                        row.append(`<input type="text" name="items[${idx}][product_name]" class="form-input readonly w-full text-[11px]" value="${item.product.name}" readonly>`);
                        row.append(`<input type="number" name="items[${idx}][ordered_qty]" class="form-input w-full text-[11px]" value="${item.ordered_qty}" readonly>`);
                        row.append(`<input type="number" name="items[${idx}][receive_qty]" class="form-input w-full text-[11px]" value="${item.pending_qty}">`);
                        row.append(`<input type="number" step="0.01" name="items[${idx}][unit_cost]" class="form-input w-full text-[11px]" value="${item.unit_cost}" readonly>`);
                        row.append(`<button type="button" class="remove-receive-row text-[10px] text-red-600 hover:text-red-800">Remove</button>`);

                        container.append(row);
                    });
                },
                error: function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error loading purchase',
                        text: 'Could not fetch purchase data.',
                    });
                }
            });
        }

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