@extends('layouts.master')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/goods-receipts-create.css') }}">
@endpush

@section('content')
    <div class="gr-create-page">
        <!-- Breadcrumb & Page Header -->
        <div class="az-content-breadcrumb mb-2">
            <span><i class="fa-solid fa-house-chimney text-muted me-1"></i> Dashboard</span>
            <span>Goods Receipts</span>
            <span>Add Goods Receipt</span>
        </div>

        <div class="gr-page-header">
            <div class="gr-header-title">
                <div class="gr-header-icon">
                    <i class="fa-solid fa-truck-ramp-box"></i>
                </div>
                <div class="gr-header-text">
                    <h2>Add New Goods Receipt</h2>
                    <div class="gr-subtitle">
                        <span>مال آمد کا نیا اندراج</span>
                        <span class="text-muted">•</span>
                        <span class="text-muted">Enter incoming vehicle & goods details below</span>
                    </div>
                </div>
            </div>

            <div>
                <a href="{{ route('good_receipts.list') }}" class="btn border shadow-sm px-3 py-2 bg-white text-dark rounded-8">
                    <i class="fa-solid fa-list-ul text-primary me-1"></i> Back to List (لسٹ پر واپس جائیں)
                </a>
            </div>
        </div>

        <!-- Main Card Form -->
        <div class="gr-main-card">
            <form method="post" action="{{ route('good_receipts.store') }}" id="goodReceiptsForm" autocomplete="off">
                @csrf

                <!-- Error Display -->
                @if (count($errors) > 0)
                    <div class="p-3">
                        @foreach ($errors->all() as $error)
                            <div class="alert alert-danger alert-dismissible fade show mb-2 shadow-sm" role="alert">
                                <i class="fa-solid fa-circle-exclamation me-2"></i> {{ $error }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endforeach
                    </div>
                @endif

                <!-- SECTION 1: Vehicle & Supplier Details -->
                <div class="gr-section-header">
                    <div class="gr-section-title">
                        <i class="fa-solid fa-truck-moving"></i>
                        <span>Vehicle & Supplier Information</span>
                        <span class="section-urdu">گاڑی اور سپلائر کی تفصیلات</span>
                    </div>
                    <span class="badge badge-light border text-muted">Step 1 of 2</span>
                </div>

                <div class="p-4 bg-white">
                    <div class="row">
                        <!-- Date -->
                        <div class="col-lg-3 col-md-6">
                            <div class="gr-field-group">
                                <label class="gr-label" for="goods_date">
                                    <span class="label-left">
                                        <i class="fa-regular fa-calendar-days text-primary"></i> Date
                                    </span>
                                    <span class="label-urdu">تاریخ</span>
                                </label>
                                <div class="gr-input-icon-wrap">
                                    <i class="fa-regular fa-calendar gr-input-icon"></i>
                                    <input type="text" id="goods_date" name="goods_date" class="gr-input gr-input-with-icon"
                                        value="{{ old('goods_date') }}" placeholder="YYYY-MM-DD" readonly />
                                </div>
                                @error('goods_date')
                                    <span class="form-text text-danger mt-1"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>

                        <!-- Truck Number -->
                        <div class="col-lg-3 col-md-6">
                            <div class="gr-field-group">
                                <label class="gr-label" for="truck-toggle">
                                    <span class="label-left">
                                        <i class="fa-solid fa-truck text-primary"></i> Truck Number <span class="text-danger">*</span>
                                    </span>
                                    <span class="label-urdu">ٹرک نمبر</span>
                                </label>
                                <div class="gr-input-icon-wrap">
                                    <i class="fa-solid fa-hashtag gr-input-icon"></i>
                                    <input type="text" id="truck-toggle" name="truck_number" class="gr-input gr-input-with-icon" required
                                        placeholder="e.g. LES-1234 / ٹرک نمبر" value="{{ old('truck_number') }}" />
                                </div>
                                @error('truck_number')
                                    <span class="form-text text-danger mt-1"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>

                        <!-- Supplier Selection with quick add -->
                        <div class="col-lg-6 col-md-12">
                            <div class="gr-field-group">
                                <label class="gr-label" for="suppliers">
                                    <span class="label-left">
                                        <i class="fa-solid fa-user-tie text-primary"></i> Supplier <span class="text-danger">*</span>
                                    </span>
                                    <span class="label-urdu">سپلائر نام</span>
                                </label>
                                <div class="gr-supplier-combo">
                                    <select class="form-control select2" name="suppliers" id="suppliers" required style="width: 100%;">
                                        <option value="">- Select Supplier / سپلائر منتخب کریں -</option>
                                        @foreach ($suppliers as $key => $supplier)
                                            <option value="{{ $supplier->id_supplier }}" {{ old('suppliers') == $supplier->id_supplier ? 'selected' : '' }}>
                                                {{ $supplier->supplier_name }} | {{ $supplier->supplier_name_urdu }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <button type="button" class="gr-btn-add-supplier" data-toggle="modal" data-target="#addSupplierModal" data-bs-toggle="modal" data-bs-target="#addSupplierModal" title="Add New Supplier">
                                        <i class="fa-solid fa-plus-circle"></i>
                                        <span>+ Add New</span>
                                    </button>
                                </div>
                                @error('suppliers')
                                    <span class="form-text text-danger mt-1"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>

                        <!-- Builty Number -->
                        <div class="col-lg-3 col-md-6">
                            <div class="gr-field-group">
                                <label class="gr-label" for="builty_number">
                                    <span class="label-left">
                                        <i class="fa-solid fa-receipt text-primary"></i> Builty Number
                                    </span>
                                    <span class="label-urdu">بلٹی نمبر</span>
                                </label>
                                <div class="gr-input-icon-wrap">
                                    <i class="fa-solid fa-file-invoice gr-input-icon"></i>
                                    <input type="text" id="builty_number" name="builty_number" class="gr-input gr-input-with-icon"
                                        placeholder="Builty No." value="{{ old('builty_number') }}" />
                                </div>
                                @error('builty_number')
                                    <span class="form-text text-danger mt-1"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>

                        <!-- Rent Received -->
                        <div class="col-lg-3 col-md-6">
                            <div class="gr-field-group">
                                <label class="gr-label" for="rent_received">
                                    <span class="label-left">
                                        <i class="fa-solid fa-money-bill-wave text-primary"></i> Rent Received
                                    </span>
                                    <span class="label-urdu">کرایہ وصول (روپے)</span>
                                </label>
                                <div class="gr-input-icon-wrap">
                                    <span class="gr-input-icon font-weight-bold" style="font-size: 13px;">Rs</span>
                                    <input type="text" name="rent_received" id="rent_received" class="gr-input gr-input-with-icon n-amount text-end"
                                        placeholder="0" value="{{ old('rent_received') }}" />
                                </div>
                                @error('rent_received')
                                    <span class="form-text text-danger mt-1"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>

                        <!-- Status -->
                        <div class="col-lg-3 col-md-6">
                            <div class="gr-field-group">
                                <label class="gr-label" for="goods_status">
                                    <span class="label-left">
                                        <i class="fa-solid fa-toggle-on text-primary"></i> Status
                                    </span>
                                    <span class="label-urdu">حیثیت</span>
                                </label>
                                <select id="goods_status" name="goods_status" class="gr-select">
                                    <option value="1" {{ old('goods_status', '1') == '1' ? 'selected' : '' }}>🟢 Active (فعال)</option>
                                    <option value="0" {{ old('goods_status') == '0' ? 'selected' : '' }}>🔴 In-Active (غیر فعال)</option>
                                </select>
                                @error('goods_status')
                                    <span class="form-text text-danger mt-1"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>

                        <!-- Details / Remarks for receipt -->
                        <div class="col-lg-3 col-md-6">
                            <div class="gr-field-group">
                                <label class="gr-label" for="details">
                                    <span class="label-left">
                                        <i class="fa-regular fa-comment-dots text-primary"></i> General Notes / Details
                                    </span>
                                    <span class="label-urdu">تفصیلات</span>
                                </label>
                                <textarea class="gr-input" style="height: 42px; resize: none;" name="details" id="details" placeholder="اضافی نوٹس یا ہدایات درج کریں...">{{ old('details') }}</textarea>
                                @error('details')
                                    <span class="form-text text-danger mt-1"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SECTION 2: Goods & Bag Details -->
                <div class="gr-section-header">
                    <div class="gr-section-title">
                        <i class="fa-solid fa-boxes-stacked"></i>
                        <span>Received Goods & Items</span>
                        <span class="section-urdu">آمد مال اور بوریوں کی تفصیلات</span>
                    </div>
                    <span class="badge badge-light border text-muted">Step 2 of 2</span>
                </div>

                <div class="gr-items-container">
                    <div id="items-wrapper">
                        <!-- Item Row 0 -->
                        <div class="gr-item-card delete_row" id="item-row-0">
                            <div class="gr-item-card-header">
                                <div class="gr-item-badge">
                                    <span class="badge-num">1</span>
                                    <span>Item Details</span>
                                    <span class="urdu-badge">آئٹم کی تفصیل</span>
                                </div>
                                <div>
                                    <button type="button" class="gr-btn-remove-row remove-item" title="Delete Row (Alt + D)" style="display: none;">
                                        <i class="fa-regular fa-trash-can"></i> Remove (حذف کریں)
                                    </button>
                                </div>
                            </div>

                            <div class="row g-3">
                                <!-- Main Category -->
                                <div class="col-lg-3 col-md-6">
                                    <div class="gr-field-group mb-2">
                                        <label class="gr-label" for="productMainCate">
                                            <span>Main Category</span>
                                            <span class="label-urdu">مین کیٹیگری</span>
                                        </label>
                                        <select name="productMainCate[]" id="productMainCate" class="form-control select2"
                                            onchange="checkForParentCate(this.value)">
                                            <option value="">Select Main Category</option>
                                            @foreach ($productCateMain as $key => $main)
                                                <option value="{{ $main->id_pro_cate_main }}">
                                                    {{ $main->products_category_name }} | {{ $main->products_category_name_urdu }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @error('productMainCate')
                                        <span class="form-text text-danger mt-1"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>

                                <!-- Parent Category (Dynamic) -->
                                <div class="col-lg-3 col-md-6" id="productParentCatShow" style="display: none;">
                                    <div class="gr-field-group mb-2">
                                        <label class="gr-label" for="productParentCate">
                                            <span>Parent Category</span>
                                            <span class="label-urdu">سب کیٹیگری</span>
                                        </label>
                                        <select name="productParentCate[]" id="productParentCate" class="form-control select2"
                                            onchange="checkForChildCate(this.value)">
                                            <option value="">Select Parent Category</option>
                                        </select>
                                    </div>
                                    @error('productParentCate')
                                        <span class="form-text text-danger mt-1"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>

                                <!-- Child Category (Dynamic) -->
                                <div class="col-lg-3 col-md-6" id="productChildCatShow" style="display: none;">
                                    <div class="gr-field-group mb-2">
                                        <label class="gr-label" for="productChildCate">
                                            <span>Child Category</span>
                                            <span class="label-urdu">آئٹم برانڈ</span>
                                        </label>
                                        <select name="productChildCate[]" id="productChildCate" class="form-control select2">
                                            <option value="">Select Child Category</option>
                                        </select>
                                    </div>
                                    @error('productChildCate')
                                        <span class="form-text text-danger mt-1"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>

                                <!-- Marka -->
                                <div class="col-lg-2 col-md-4">
                                    <div class="gr-field-group mb-2">
                                        <label class="gr-label">
                                            <span>Marka</span>
                                            <span class="label-urdu">مارکہ</span>
                                        </label>
                                        <input type="text" name="marka[]" class="gr-input" placeholder="e.g. AAA / مارکہ" />
                                    </div>
                                    @error('marka')
                                        <span class="form-text text-danger mt-1"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>

                                <!-- Bori (Bags) -->
                                <div class="col-lg-2 col-md-4">
                                    <div class="gr-field-group mb-2">
                                        <label class="gr-label">
                                            <span>Bori (Bags) <span class="text-danger">*</span></span>
                                            <span class="label-urdu">بوریاں</span>
                                        </label>
                                        <input type="text" name="bori[]" required class="gr-input n-amount text-end font-weight-bold"
                                            placeholder="0" />
                                    </div>
                                    @error('bori')
                                        <span class="form-text text-danger mt-1"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>

                                <!-- Weight -->
                                <div class="col-lg-2 col-md-4">
                                    <div class="gr-field-group mb-2">
                                        <label class="gr-label">
                                            <span>Weight</span>
                                            <span class="label-urdu">وزن</span>
                                        </label>
                                        <input type="text" name="weight[]" oninput="calculateAmount(this)"
                                            class="gr-input weight-input n-amount text-end" placeholder="0" />
                                    </div>
                                    @error('weight')
                                        <span class="form-text text-danger mt-1"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>

                                <!-- Remarks -->
                                <div class="col-lg-3 col-md-12">
                                    <div class="gr-field-group mb-2">
                                        <label class="gr-label">
                                            <span>Remarks</span>
                                            <span class="label-urdu">ریمارکس</span>
                                        </label>
                                        <textarea class="gr-input remarks-input" style="height: 42px; resize: none;" name="remarks[]"
                                            placeholder="ریمارکس..."></textarea>
                                    </div>
                                    @error('remarks')
                                        <span class="form-text text-danger mt-1"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Add More Row Button -->
                    <div class="gr-add-more-wrap">
                        <button type="button" class="gr-btn-add-more" id="add-more">
                            <i class="fa-solid fa-circle-plus"></i>
                            <span>Add Another Item Row (مزید مال شامل کریں)</span>
                        </button>
                    </div>
                </div>

                <!-- Live Summary KPI Banner -->
                <div class="gr-totals-card">
                    <div class="gr-totals-title">
                        <div class="gr-totals-title-icon">
                            <i class="fa-solid fa-calculator"></i>
                        </div>
                        <div>
                            <h4>Receipt Summary & Totals</h4>
                            <p>آمد مال کا کل خلاصہ (بوریاں اور وزن)</p>
                        </div>
                    </div>

                    <div class="gr-totals-stats">
                        <!-- Total Bori -->
                        <div class="gr-stat-pill">
                            <div class="gr-stat-icon bori">
                                <i class="fa-solid fa-sack-dollar"></i>
                            </div>
                            <div class="gr-stat-content">
                                <div class="stat-label">
                                    <span>Total Bori</span>
                                    <span class="text-white-50">کل بوریاں</span>
                                </div>
                                <div class="stat-value" id="total-bori">0</div>
                            </div>
                        </div>

                        <!-- Total Weight -->
                        <div class="gr-stat-pill">
                            <div class="gr-stat-icon weight">
                                <i class="fa-solid fa-weight-scale"></i>
                            </div>
                            <div class="gr-stat-content">
                                <div class="stat-label">
                                    <span>Total Weight</span>
                                    <span class="text-white-50">کل وزن</span>
                                </div>
                                <div class="stat-value" id="total-weight">0</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Footer Action Buttons -->
                <div class="gr-form-footer">
                    <div></div>

                    <div class="gr-footer-actions">
                        <a href="{{ route('good_receipts.list') }}" class="gr-btn-cancel">
                            <i class="fa-solid fa-xmark"></i> Cancel (منسوخ کریں)
                        </a>
                        <button type="submit" class="gr-btn-save" id="btnSaveReceipt">
                            <i class="fa-solid fa-floppy-disk"></i>
                            <span>Save Goods Receipt (آمد مال محفوظ کریں)</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Error Toast Notification -->
    <div id="errorNotification" class="alert alert-danger position-fixed shadow-lg"
        style="display: none; top: 20px; right: 20px; z-index: 99999; max-width: 360px;">
        <div class="d-flex align-items-start">
            <i class="fa-solid fa-triangle-exclamation fs-4 me-2 mt-1"></i>
            <div>
                <strong class="d-block mb-1">Attention Required!</strong>
                <span id="errorMessage">Please select the row you want to delete.</span>
            </div>
        </div>
    </div>

    <!-- Quick Add Supplier Modal -->
    <div class="modal fade" id="addSupplierModal" tabindex="-1" role="dialog" aria-labelledby="addSupplierModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content gr-modal">
                <form id="addSupplierForm" method="POST">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addSupplierModalLabel">
                            <i class="fa-solid fa-user-plus text-primary me-2"></i>
                            <span>Add New Supplier (نیا سپلائر درج کریں)</span>
                        </h5>
                        <button type="button" class="close text-white" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="gr-field-group mb-3">
                            <label class="gr-label" for="customer_name">
                                <span>Supplier Name (English) <span class="text-danger">*</span></span>
                            </label>
                            <div class="gr-input-icon-wrap">
                                <i class="fa-solid fa-user gr-input-icon"></i>
                                <input type="text" name="supplier_name" id="customer_name" class="gr-input gr-input-with-icon"
                                    placeholder="Enter supplier full name" required>
                            </div>
                        </div>
                        <div class="gr-field-group mb-2">
                            <label class="gr-label" for="customer_name_urdu">
                                <span>سپلائر کا نام (اردو) <span class="text-danger">*</span></span>
                            </label>
                            <div class="gr-input-icon-wrap">
                                <i class="fa-solid fa-pen-nib gr-input-icon"></i>
                                <input type="text" name="supplier_name_urdu" id="customer_name_urdu"
                                    class="gr-input gr-input-with-icon urdu-font text-end" placeholder="سپلائر کا نام اردو میں" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="mdcancelBtn" class="gr-btn-cancel py-1 px-3" data-dismiss="modal" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="gr-btn-save py-1 px-4" id="btnSaveSupplierModal">
                            <i class="fa-solid fa-check me-1"></i> Save Supplier
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {{-- Instant Add Supplier Modal Script  --}}
    <script>
        $(document).ready(function() {
            // Initialize AutoNumeric on existing inputs
            initAutoNumeric();

            // Setup AJAX CSRF
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Handle Supplier Quick-Add Form Submission
            $(document).on('submit', '#addSupplierForm', function(e) {
                e.preventDefault();

                let form = $(this);
                let submitBtn = $('#btnSaveSupplierModal');
                let originalBtnHtml = submitBtn.html();

                submitBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin me-1"></i> Saving...');

                $.ajax({
                    url: "{{ route('supplier.store') }}",
                    method: "POST",
                    data: form.serialize(),
                    success: function(response) {
                        submitBtn.prop('disabled', false).html(originalBtnHtml);

                        if (response.success) {
                            $('#mdcancelBtn').click();
                            $('#suppliers').empty().append('<option value="">- Select Supplier / سپلائر منتخب کریں -</option>');

                            // Repopulate suppliers and select the newly added one
                            let lastAddedId = null;
                            if (response.suppliers && Array.isArray(response.suppliers)) {
                                response.suppliers.forEach(function(supplier) {
                                    const option = `<option value="${supplier.id_supplier}">
                                        ${supplier.supplier_name} | ${supplier.supplier_name_urdu}
                                    </option>`;
                                    $('#suppliers').append(option);
                                    lastAddedId = supplier.id_supplier;
                                });
                            }

                            if (lastAddedId) {
                                $('#suppliers').val(lastAddedId).trigger('change');
                            }

                            $('#customer_name').val('');
                            $('#customer_name_urdu').val('');

                            if (typeof toastr !== 'undefined') {
                                toastr.success('Supplier added successfully! سپلائر کامیابی سے شامل کر لیا گیا');
                            }
                        }
                    },
                    error: function(response) {
                        submitBtn.prop('disabled', false).html(originalBtnHtml);

                        if (response.responseJSON && response.responseJSON.errors) {
                            let errors = response.responseJSON.errors;
                            Object.keys(errors).forEach(function(key) {
                                errors[key].forEach(function(msg) {
                                    if (typeof toastr !== 'undefined') {
                                        toastr.error(msg);
                                    } else {
                                        alert(msg);
                                    }
                                });
                            });
                        } else {
                            let msg = (response.responseJSON && response.responseJSON.message) ? response.responseJSON.message : 'Error adding supplier';
                            if (typeof toastr !== 'undefined') {
                                toastr.error(msg);
                            } else {
                                alert(msg);
                            }
                        }
                    }
                });
            });
        });
    </script>

    <script>
        function calculateAmount(element) {
            let row = element.closest('.row, .gr-item-card');
            if (!row) return;

            let weightInput = row.querySelector('.weight-input');
            let rateInput = row.querySelector('.rate-input');
            let amountInput = row.querySelector('.amount-input');

            if (weightInput && rateInput && amountInput) {
                let weight = parseFloat(weightInput.value.replace(/,/g, "")) || 0;
                let rate = parseFloat(rateInput.value.replace(/,/g, "")) || 0;
                let amount = (rate * weight) / 40;
                amountInput.value = amount.toFixed(2);
            }
        }

        function checkForParentCate(productMainCateId) {
            $.ajax({
                url: '{{ route("check-cate-parent") }}',
                type: 'GET',
                data: {
                    productMainCateId: productMainCateId
                },
                success: function(response) {
                    if (response.productParentCate && response.productParentCate.length > 0) {
                        let options = '<option value="">Select Item / آئٹم منتخب کریں</option>';
                        response.productParentCate.forEach(function(subParentCategory) {
                            options += `<option value="${subParentCategory.id_pro_sub_cat_parent}">${subParentCategory.name} | ${subParentCategory.name_urdu}</option>`;
                        });
                        $('#productParentCate').html(options).trigger('change');
                        $('#productParentCatShow').slideDown(200);
                    } else {
                        $('#productParentCatShow').slideUp(200);
                        $('#productChildCatShow').slideUp(200);
                        $('#productParentCate').html('<option value="">Select Parent Category</option>').trigger('change');
                        $('#productChildCate').html('<option value="">Select Child Category</option>').trigger('change');
                    }
                },
                error: function() {
                    console.error('Error checking Product Parent Category');
                }
            });
        }

        function checkForChildCate(productParentCateId) {
            $.ajax({
                url: '{{ route("check-cate-child") }}',
                type: 'GET',
                data: {
                    productParentCateId: productParentCateId
                },
                success: function(response) {
                    if (response.productChildCate && response.productChildCate.length > 0) {
                        let options = '<option value="">Select Item / آئٹم منتخب کریں</option>';
                        response.productChildCate.forEach(function(subChildCategory) {
                            options += `<option value="${subChildCategory.id_pro_sub_cat_child}">${subChildCategory.name} | ${subChildCategory.name_urdu}</option>`;
                        });
                        $('#productChildCate').html(options).trigger('change');
                        $('#productChildCatShow').slideDown(200);
                    } else {
                        $('#productChildCatShow').slideUp(200);
                        $('#productChildCate').html('<option value="">Select Child Category</option>').trigger('change');
                    }
                },
                error: function() {
                    console.error('Error checking Product Child Category');
                }
            });
        }

        $(document).ready(function() {
            // Set Today's Date
            var today = new Date();
            var formattedDate = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);
            if (!$('#goods_date').val()) {
                $("#goods_date").val(formattedDate);
            }

            // Datepicker init
            if ($.fn.datepicker) {
                $("#goods_date").datepicker({
                    dateFormat: "yy-mm-dd"
                });
            }

            // Select2 init
            $('#suppliers').select2({
                placeholder: "- Select Supplier / سپلائر منتخب کریں -",
                allowClear: true,
                width: '100%'
            });

            $('#productMainCate').select2({
                placeholder: "Select Main Category",
                allowClear: true,
                width: '100%'
            });

            $('#productParentCate').select2({
                placeholder: "Select Parent Category",
                allowClear: true,
                width: '100%'
            });

            $('#productChildCate').select2({
                placeholder: "Select Child Category",
                allowClear: true,
                width: '100%'
            });
        });

        function initAutoNumeric() {
            if (typeof AutoNumeric === 'undefined') return;

            document.querySelectorAll('.n-amount').forEach(function(el) {
                if (!AutoNumeric.getAutoNumericElement(el)) {
                    new AutoNumeric(el, {
                        digitGroupSeparator: ',',
                        decimalPlaces: 0,
                        unformatOnSubmit: true
                    });
                }
            });
        }

        // Totals calculation
        function calculateTotals() {
            let totalBori = 0;
            let totalWeight = 0;

            document.querySelectorAll('input[name="bori[]"]').forEach(function(boriInput) {
                let val = boriInput.value.replace(/,/g, "");
                totalBori += parseFloat(val) || 0;
            });

            document.querySelectorAll('input[name="weight[]"]').forEach(function(weightInput) {
                let val = weightInput.value.replace(/,/g, "");
                totalWeight += parseFloat(val) || 0;
            });

            if (typeof AutoNumeric !== 'undefined') {
                let formattedBori = AutoNumeric.format(Number(totalBori), {
                    digitGroupSeparator: ',',
                    decimalPlaces: 0
                });
                let formattedWeight = AutoNumeric.format(Number(totalWeight), {
                    digitGroupSeparator: ',',
                    decimalPlaces: 2
                });
                document.getElementById('total-bori').innerText = formattedBori;
                document.getElementById('total-weight').innerText = formattedWeight;
            } else {
                document.getElementById('total-bori').innerText = totalBori.toLocaleString();
                document.getElementById('total-weight').innerText = totalWeight.toLocaleString();
            }
        }

        // Recalculate totals on input changes
        document.addEventListener("DOMContentLoaded", function() {
            let itemsWrapper = document.getElementById('items-wrapper');
            if (itemsWrapper) {
                itemsWrapper.addEventListener('input', function(event) {
                    if (event.target.name === 'bori[]' || event.target.name === 'weight[]') {
                        calculateTotals();
                    }
                });
            }
        });

        // Dynamic Add More Rows
        let itemIndex = 1;
        document.getElementById('add-more').addEventListener('click', function() {
            let rowNumber = itemIndex + 1;
            let newRow = `
                <div class="gr-item-card delete_row" id="item-row-${itemIndex}">
                    <div class="gr-item-card-header">
                        <div class="gr-item-badge">
                            <span class="badge-num">${rowNumber}</span>
                            <span>Item Details</span>
                            <span class="urdu-badge">آئٹم کی تفصیل</span>
                        </div>
                        <div>
                            <button type="button" class="gr-btn-remove-row remove-item" title="Delete Row (Alt + D)">
                                <i class="fa-regular fa-trash-can"></i> Remove (حذف کریں)
                            </button>
                        </div>
                    </div>

                    <div class="row g-3">
                        <div class="col-lg-3 col-md-6">
                            <div class="gr-field-group mb-2">
                                <label class="gr-label">
                                    <span>Main Category</span>
                                    <span class="label-urdu">مین کیٹیگری</span>
                                </label>
                                <select name="productMainCate[]" class="form-control item-select productMainCateSelect"
                                    onchange="checkForParentCateRow(this.value, ${itemIndex})"
                                    data-row-id="${itemIndex}">
                                    <option value="">Select Main Category</option>
                                    @foreach ($productCateMain as $key => $main)
                                        <option value="{{ $main->id_pro_cate_main }}">
                                            {{ $main->products_category_name }} | {{ $main->products_category_name_urdu }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-6" id="productParentCatShow-${itemIndex}" style="display: none;">
                            <div class="gr-field-group mb-2">
                                <label class="gr-label">
                                    <span>Parent Category</span>
                                    <span class="label-urdu">سب کیٹیگری</span>
                                </label>
                                <select name="productParentCate[]" class="form-control item-select productParentCateSelect"
                                    onchange="checkForChildCateRow(this.value, ${itemIndex})"
                                    data-row-id="${itemIndex}">
                                    <option value="">Select Parent Category</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-6" id="productChildCatShow-${itemIndex}" style="display: none;">
                            <div class="gr-field-group mb-2">
                                <label class="gr-label">
                                    <span>Child Category</span>
                                    <span class="label-urdu">آئٹم برانڈ</span>
                                </label>
                                <select name="productChildCate[]" class="form-control item-select">
                                    <option value="">Select Child Category</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-2 col-md-4">
                            <div class="gr-field-group mb-2">
                                <label class="gr-label">
                                    <span>Marka</span>
                                    <span class="label-urdu">مارکہ</span>
                                </label>
                                <input type="text" name="marka[]" class="gr-input" placeholder="e.g. AAA / مارکہ" />
                            </div>
                        </div>

                        <div class="col-lg-2 col-md-4">
                            <div class="gr-field-group mb-2">
                                <label class="gr-label">
                                    <span>Bori (Bags) <span class="text-danger">*</span></span>
                                    <span class="label-urdu">بوریاں</span>
                                </label>
                                <input type="text" name="bori[]" required class="gr-input n-amount text-end font-weight-bold"
                                    placeholder="0" />
                            </div>
                        </div>

                        <div class="col-lg-2 col-md-4">
                            <div class="gr-field-group mb-2">
                                <label class="gr-label">
                                    <span>Weight</span>
                                    <span class="label-urdu">وزن</span>
                                </label>
                                <input type="text" name="weight[]" class="gr-input weight-input n-amount text-end"
                                    placeholder="0" oninput="calculateAmount(this)" />
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-12">
                            <div class="gr-field-group mb-2">
                                <label class="gr-label">
                                    <span>Remarks</span>
                                    <span class="label-urdu">ریمارکس</span>
                                </label>
                                <textarea class="gr-input remarks-input" style="height: 42px; resize: none;" name="remarks[]"
                                    placeholder="ریمارکس..."></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            document.getElementById('items-wrapper').insertAdjacentHTML('beforeend', newRow);

            // Init select2 on new row
            $(`#item-row-${itemIndex} .item-select`).select2({
                placeholder: "Select Category",
                allowClear: true,
                width: '100%'
            });

            initAutoNumeric();

            // Row remove click handler
            document.querySelector(`#item-row-${itemIndex} .remove-item`).addEventListener('click', function() {
                if (document.querySelectorAll('#items-wrapper .gr-item-card').length > 1) {
                    this.closest('.gr-item-card').remove();
                    renumberRows();
                    calculateTotals();
                } else {
                    showErrorNotification("You cannot delete the last remaining item. کم از کم ایک آئٹم ضروری ہے");
                }
            });

            itemIndex++;
            renumberRows();
        });

        // Helper to update displayed badge row numbers
        function renumberRows() {
            let cards = document.querySelectorAll('#items-wrapper .gr-item-card');
            cards.forEach(function(card, index) {
                let badge = card.querySelector('.badge-num');
                if (badge) {
                    badge.innerText = index + 1;
                }
                let removeBtn = card.querySelector('.remove-item');
                if (removeBtn) {
                    if (cards.length > 1) {
                        removeBtn.style.display = 'inline-flex';
                    } else {
                        removeBtn.style.display = 'none';
                    }
                }
            });
        }

        function checkForParentCateRow(productMainCateId, rowId) {
            $.ajax({
                url: '{{ route("check-cate-parent") }}',
                type: 'GET',
                data: {
                    productMainCateId: productMainCateId
                },
                success: function(response) {
                    if (response.productParentCate && response.productParentCate.length > 0) {
                        let options = '<option value="">Select Item / آئٹم منتخب کریں</option>';
                        response.productParentCate.forEach(function(subParentCategory) {
                            options += `<option value="${subParentCategory.id_pro_sub_cat_parent}">${subParentCategory.name} | ${subParentCategory.name_urdu}</option>`;
                        });
                        $(`#productParentCatShow-${rowId} select`).html(options).trigger('change');
                        $(`#productParentCatShow-${rowId}`).slideDown(200);
                    } else {
                        $(`#productParentCatShow-${rowId}`).slideUp(200);
                        $(`#productChildCatShow-${rowId}`).slideUp(200);
                        $(`#productParentCatShow-${rowId} select`).html('<option value="">Select Parent Category</option>').trigger('change');
                        $(`#productChildCatShow-${rowId} select`).html('<option value="">Select Child Category</option>').trigger('change');
                    }
                },
                error: function() {
                    console.error('Error checking Product Parent Category');
                }
            });
        }

        function checkForChildCateRow(productParentCateId, rowId) {
            $.ajax({
                url: '{{ route("check-cate-child") }}',
                type: 'GET',
                data: {
                    productParentCateId: productParentCateId
                },
                success: function(response) {
                    if (response.productChildCate && response.productChildCate.length > 0) {
                        let options = '<option value="">Select Item / آئٹم منتخب کریں</option>';
                        response.productChildCate.forEach(function(subChildCategory) {
                            options += `<option value="${subChildCategory.id_pro_sub_cat_child}">${subChildCategory.name} | ${subChildCategory.name_urdu}</option>`;
                        });
                        $(`#productChildCatShow-${rowId} select`).html(options).trigger('change');
                        $(`#productChildCatShow-${rowId}`).slideDown(200);
                    } else {
                        $(`#productChildCatShow-${rowId}`).slideUp(200);
                        $(`#productChildCatShow-${rowId} select`).html('<option value="">Select Child Category</option>').trigger('change');
                    }
                },
                error: function() {
                    console.error('Error checking Product Child Category');
                }
            });
        }

        document.addEventListener('keydown', function(event) {
            // Save on Ctrl + S / Cmd + S
            if ((event.ctrlKey || event.metaKey) && (event.key === 's' || event.key === 'S')) {
                event.preventDefault();
                let form = document.getElementById('goodReceiptsForm');
                if (form) {
                    let submitBtn = document.getElementById('btnSaveReceipt');
                    if (submitBtn) {
                        submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin me-2"></i> Saving Goods Receipt...';
                        submitBtn.disabled = true;
                    }
                    form.submit();
                }
                return;
            }

            // Prevent accidental submit on Enter outside textarea
            if (event.key === 'Enter') {
                if (event.target.tagName !== 'TEXTAREA') {
                    event.preventDefault();
                }
            }

            // Tab key navigation from last remarks input to auto-add row
            if (event.key === "Tab" && !event.shiftKey) {
                const activeElement = document.activeElement;
                const allRemarksInputs = document.querySelectorAll('textarea[name="remarks[]"]');
                if (allRemarksInputs.length > 0) {
                    const lastRemarksInput = allRemarksInputs[allRemarksInputs.length - 1];
                    if (activeElement === lastRemarksInput) {
                        event.preventDefault();
                        document.getElementById('add-more').click();
                        setTimeout(function() {
                            const newCards = document.querySelectorAll('#items-wrapper .gr-item-card');
                            if (newCards.length > 0) {
                                const lastCard = newCards[newCards.length - 1];
                                const firstSelect = $(lastCard).find('select[name="productMainCate[]"]');
                                if (firstSelect.length) {
                                    firstSelect.select2('open');
                                }
                            }
                        }, 100);
                    }
                }
            }

            // Alt + D to delete focused row
            if (event.altKey && (event.key === 'd' || event.key === 'D')) {
                event.preventDefault();
                const focusedElement = document.activeElement;
                const focusedRow = focusedElement ? focusedElement.closest('.gr-item-card, .delete_row') : null;

                if (focusedRow) {
                    if (document.querySelectorAll('#items-wrapper .gr-item-card').length > 1) {
                        focusedRow.remove();
                        renumberRows();
                        calculateTotals();
                    } else {
                        showErrorNotification('You cannot delete the last remaining item. کم از کم ایک آئٹم ضروری ہے');
                    }
                } else {
                    showErrorNotification('Please click inside the item row you want to delete. براہ کرم اس صف کو منتخب کریں جسے آپ حذف کرنا چاہتے ہیں۔');
                }
            }
        });

        // Error notification popup
        function showErrorNotification(message) {
            const notification = document.getElementById('errorNotification');
            const errorMessage = document.getElementById('errorMessage');

            if (notification && errorMessage) {
                errorMessage.innerText = message;
                notification.style.display = 'block';

                setTimeout(() => {
                    notification.style.display = 'none';
                }, 4000);
            }
        }

        // Focus truck number on page load
        $(function() {
            setTimeout(function() {
                $('#truck-toggle').trigger('focus');
            }, 400);

            // Tab & Select2 focus helper
            $(document).on('select2:open', function() {
                setTimeout(() => {
                    const search = document.querySelector('.select2-search__field');
                    if (search) search.focus();
                }, 0);
            });
        });
    </script>
@endpush