@extends('layouts.master')

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

@section('content')
    <div class="po-create-page">
        <!-- Breadcrumb & Header -->
        <div class="az-content-breadcrumb">
            <span>Purchase Order</span>
            <span>Add Purchase Order</span>
        </div>

        <div class="po-page-header">
            <div class="po-header-title">
                <div class="po-header-icon">
                    <i class="fa-solid fa-file-invoice"></i>
                </div>
                <div class="po-header-text">
                    <h2>Add Purchase Order</h2>
                    <div class="po-subtitle">
                        <span>Create and record a new purchase order entry</span>
                        <span class="po-urdu">نیا پرچیز آرڈر درج کریں</span>
                    </div>
                </div>
            </div>
            <a href="{{ route('good_receipts.list') }}" class="po-btn-back">
                <i class="fa-solid fa-arrow-left"></i> Back to List
            </a>
        </div>

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

                <!-- Error Display -->
                @if (isset($errors) && count($errors) > 0)
                    <div class="p-3">
                        @foreach ($errors->all() as $error)
                            <div class="alert alert-danger fade show mb-2" role="alert">
                                <i class="fa-solid fa-circle-exclamation mr-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: Purchaser & Order Information -->
                <div class="po-section-header">
                    <h6 class="po-section-title">
                        <i class="fa-solid fa-user-tag"></i> Purchaser & Order Information
                        <span class="po-urdu" style="margin-left: auto;">خریدار اور آرڈر کی معلومات</span>
                    </h6>
                </div>
                <div class="po-section-body">
                    <div class="row">
                        <!-- Select Purchaser -->
                        <div class="col-lg-6 col-md-12">
                            <div class="po-field-group">
                                <label class="po-label">
                                    <span>Select Purchaser <span class="text-danger">*</span></span>
                                    <span class="label-urdu">خریدار منتخب کریں</span>
                                </label>
                                <div class="po-purchaser-combo">
                                    <select class="form-control select2" name="purchasers" id="purchasers" required>
                                        <option value="">- Select Purchaser -</option>
                                        @foreach ($purchasers as $purchaser)
                                            <option value="{{ $purchaser->id_purchaser }}">
                                                {{ $purchaser->purchaser_name }} | {{ $purchaser->purchaser_name_urdu }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <button type="button" class="po-btn-add-purchaser" data-toggle="modal" data-target="#addSupplierModal">
                                        <i class="fa-solid fa-plus"></i> New
                                    </button>
                                </div>
                                @error('purchasers')
                                    <span class="text-danger small mt-1 d-block"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>

                        <!-- Date -->
                        <div class="col-lg-6 col-md-12">
                            <div class="po-field-group">
                                <label class="po-label" for="order_date">
                                    <span>Order Date <span class="text-danger">*</span></span>
                                    <span class="label-urdu">تاریخ</span>
                                </label>
                                <div class="po-input-icon-wrap">
                                    <i class="fa-regular fa-calendar-days po-input-icon"></i>
                                    <input type="text" id="order_date" name="order_date" class="po-input po-input-with-icon"
                                        value="{{ old('order_date') }}" placeholder="YYYY-MM-DD" readonly required />
                                </div>
                                @error('order_date')
                                    <span class="text-danger small mt-1 d-block"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>

                        <!-- Details / Notes -->
                        <div class="col-12">
                            <div class="po-field-group mb-0">
                                <label class="po-label" for="details">
                                    <span>Order Details / Remarks</span>
                                    <span class="label-urdu">تفصیلات / ریمارکس</span>
                                </label>
                                <textarea class="po-textarea" name="details" id="details" rows="2"
                                    placeholder="Enter any order instructions or remarks...">{{ old('details') }}</textarea>
                                @error('details')
                                    <span class="text-danger small mt-1 d-block"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Dynamic Purchaser Info Box -->
                    <div id="supplierDetails" style="display:none;" class="po-purchaser-info-card">
                        <div class="po-purchaser-info-card-header">
                            <i class="fa-solid fa-address-card"></i> Purchaser Profile
                            <span class="po-urdu" style="margin-left: auto; text-transform: none;">خریدار کی تفصیلات</span>
                        </div>
                        <div class="po-info-grid">
                            <div class="po-info-item">
                                <i class="fa-regular fa-user po-info-icon"></i>
                                <div class="po-info-text">
                                    <span class="label">Name</span>
                                    <span class="val" id="supName">-</span>
                                </div>
                            </div>
                            <div class="po-info-item">
                                <i class="fa-solid fa-phone po-info-icon"></i>
                                <div class="po-info-text">
                                    <span class="label">Phone</span>
                                    <span class="val" id="supPhone">-</span>
                                </div>
                            </div>
                            <div class="po-info-item">
                                <i class="fa-solid fa-location-dot po-info-icon"></i>
                                <div class="po-info-text">
                                    <span class="label">Address</span>
                                    <span class="val" id="supAddress">-</span>
                                </div>
                            </div>
                            <div class="po-info-item">
                                <i class="fa-regular fa-envelope po-info-icon"></i>
                                <div class="po-info-text">
                                    <span class="label">Email</span>
                                    <span class="val" id="supEmail">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SECTION 2: Order Items & Quantities -->
                <div class="po-section-header">
                    <h6 class="po-section-title">
                        <i class="fa-solid fa-boxes-stacked"></i> Order Items & Quantities
                        <span class="po-urdu" style="margin-left: auto;">اشیاء اور وزن کی تفصیلات</span>
                    </h6>
                </div>
                <div class="po-section-body">
                    <div id="items-wrapper">
                        <!-- Initial Row 0 -->
                        <div class="po-item-card delete_row" id="item-row-0">
                            <div class="po-item-card-header">
                                <div class="po-item-badge">
                                    <span class="badge-num">1</span>
                                    <span>Item Row #1</span>
                                </div>
                                <button type="button" class="po-btn-remove-row remove-item" style="display: none;">
                                    <i class="fa-solid fa-trash-can"></i> Remove
                                </button>
                            </div>
                            <div class="row">
                                <!-- Main Category -->
                                <div class="col-lg-3 col-md-6 col-12">
                                    <div class="po-field-group">
                                        <label class="po-label">
                                            <span>Main Category</span>
                                            <span class="label-urdu">مین کیٹیگری</span>
                                        </label>
                                        <select name="productMainCate[]" id="productMainCate" class="po-select 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>
                                        @error('productMainCate')
                                            <span class="text-danger small mt-1 d-block"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Parent Category -->
                                <div class="col-lg-3 col-md-6 col-12" id="productParentCatShow" style="display: none;">
                                    <div class="po-field-group">
                                        <label class="po-label">
                                            <span>Parent Category</span>
                                            <span class="label-urdu">پیرنٹ کیٹیگری</span>
                                        </label>
                                        <select name="productParentCate[]" id="productParentCate" class="po-select select2"
                                            onchange="checkForChildCate(this.value)">
                                            <option value="">Select Parent Category</option>
                                        </select>
                                        @error('productParentCate')
                                            <span class="text-danger small mt-1 d-block"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Child Category -->
                                <div class="col-lg-3 col-md-6 col-12" id="productChildCatShow" style="display: none;">
                                    <div class="po-field-group">
                                        <label class="po-label">
                                            <span>Child Category</span>
                                            <span class="label-urdu">چائلڈ کیٹیگری</span>
                                        </label>
                                        <select name="productChildCate[]" id="productChildCate" class="po-select select2">
                                            <option value="">Select Child Category</option>
                                        </select>
                                        @error('productChildCate')
                                            <span class="text-danger small mt-1 d-block"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                </div>

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

                                <!-- Bori -->
                                <div class="col-lg-2 col-md-4 col-6">
                                    <div class="po-field-group">
                                        <label class="po-label">
                                            <span>Bori <span class="text-danger">*</span></span>
                                            <span class="label-urdu">بوری</span>
                                        </label>
                                        <input type="number" step="any" name="bori[]" required class="po-input" placeholder="0" />
                                        @error('bori')
                                            <span class="text-danger small mt-1 d-block"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Weight -->
                                <div class="col-lg-2 col-md-4 col-6">
                                    <div class="po-field-group">
                                        <label class="po-label">
                                            <span>Weight (KG)</span>
                                            <span class="label-urdu">وزن</span>
                                        </label>
                                        <input type="number" step="any" name="weight[]" oninput="calculateAmount(this)"
                                            class="po-input weight-input" placeholder="0.00" />
                                        @error('weight')
                                            <span class="text-danger small mt-1 d-block"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Rate -->
                                <div class="col-lg-2 col-md-6 col-6">
                                    <div class="po-field-group">
                                        <label class="po-label">
                                            <span>Rate (40 KG)</span>
                                            <span class="label-urdu">ریٹ فی من</span>
                                        </label>
                                        <input type="number" step="any" name="rate[]" class="po-input rate-input"
                                            oninput="calculateAmount(this)" placeholder="0.00" />
                                        @error('rate')
                                            <span class="text-danger small mt-1 d-block"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                </div>

                                <!-- Amount -->
                                <div class="col-lg-2 col-md-6 col-12">
                                    <div class="po-field-group">
                                        <label class="po-label">
                                            <span>Amount (PKR)</span>
                                            <span class="label-urdu">رقم</span>
                                        </label>
                                        <input type="number" step="any" name="amount[]" class="po-input amount-input"
                                            readonly placeholder="0.00" style="background: #f8fafc; font-weight: 700; color: #0284c7;" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Add More Button -->
                    <button type="button" class="po-btn-add-more" id="add-more">
                        <i class="fa-solid fa-plus-circle"></i> Add Another Item
                    </button>
                </div>

                <!-- SECTION 3: Additional Charges & Financial Summary -->
                <div class="po-finance-wrapper">
                    <div class="row">
                        <!-- Charges Inputs -->
                        <div class="col-lg-6 col-12 mb-4 mb-lg-0">
                            <div class="po-charges-card">
                                <div class="po-charges-card-title">
                                    <i class="fa-solid fa-calculator"></i>
                                    <span>Additional Charges & Taxes</span>
                                    <span class="po-urdu" style="margin-left: auto;">اضافی اخراجات اور ٹیکس</span>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6 col-12">
                                        <div class="po-field-group">
                                            <label class="po-label">
                                                <span>Labour Charges</span>
                                                <span class="label-urdu">مزدوری</span>
                                            </label>
                                            <input type="number" step="any" name="labour_charges" id="labour_charges"
                                                class="po-input" placeholder="0.00" />
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-12">
                                        <div class="po-field-group">
                                            <label class="po-label">
                                                <span>Local Charges</span>
                                                <span class="label-urdu">لوکل خرچہ</span>
                                            </label>
                                            <input type="number" step="any" name="local_charges" id="local_charges"
                                                class="po-input" placeholder="0.00" />
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-12">
                                        <div class="po-field-group">
                                            <label class="po-label">
                                                <span>Weight Charges</span>
                                                <span class="label-urdu">وزن خرچہ</span>
                                            </label>
                                            <input type="number" step="any" name="weight_charges" id="weight_charges"
                                                class="po-input" placeholder="0.00" />
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-12">
                                        <div class="po-field-group">
                                            <label class="po-label">
                                                <span>Custom Charges</span>
                                                <span class="label-urdu">کسٹم خرچہ</span>
                                            </label>
                                            <input type="number" step="any" name="custom_charges" id="custom_charges"
                                                class="po-input custom-chrg-input" placeholder="0.00" />
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="po-field-group mb-0">
                                            <label class="po-label">
                                                <span>Tax Amount</span>
                                                <span class="label-urdu">ٹیکس</span>
                                            </label>
                                            <input type="number" step="any" name="tax" id="tax"
                                                class="po-input tax-input" placeholder="0.00" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Financial Totals Summary -->
                        <div class="col-lg-6 col-12">
                            <div class="po-summary-card">
                                <div>
                                    <div class="po-summary-header">
                                        <div class="po-summary-icon">
                                            <i class="fa-solid fa-receipt"></i>
                                        </div>
                                        <div>
                                            <h4>Order Calculation Summary</h4>
                                            <p>Live calculated totals based on items & charges</p>
                                        </div>
                                    </div>

                                    <div class="po-summary-stats">
                                        <div class="po-stat-tile">
                                            <div class="label">
                                                <i class="fa-solid fa-cubes text-info"></i> Total Bori
                                            </div>
                                            <div class="value" id="total-bori">0</div>
                                        </div>

                                        <div class="po-stat-tile">
                                            <div class="label">
                                                <i class="fa-solid fa-scale-balanced text-primary"></i> Total Weight (KG)
                                            </div>
                                            <div class="value" id="total-weight">0</div>
                                        </div>

                                        <div class="po-stat-tile amount">
                                            <div class="label">
                                                <i class="fa-solid fa-coins text-warning"></i> Items Total Amount (PKR)
                                            </div>
                                            <div class="value">
                                                <small style="font-size: 13px; font-weight: 600; opacity: 0.8;">Rs.</small> <span id="total-amount">0.00</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="po-grand-total-tile">
                                    <div>
                                        <div class="label">Grand Payable Amount</div>
                                        <small style="color: #94a3b8;">Total Items + All Charges & Taxes</small>
                                    </div>
                                    <div class="value">
                                        <small style="font-size: 16px; font-weight: 700; opacity: 0.85;">Rs.</small> <span id="grand-total">0.00</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SECTION 4: Action Footer -->
                <div class="po-form-footer">
                    <div class="text-muted small">
                        <i class="fa-solid fa-circle-info mr-1"></i> Please verify items and charges before saving.
                    </div>
                    <div class="po-footer-actions">
                        <a href="{{ route('good_receipts.list') }}" class="po-btn-cancel">
                            <i class="fa-solid fa-xmark"></i> Cancel
                        </a>
                        <button type="submit" class="po-btn-save">
                            <i class="fa-solid fa-floppy-disk"></i> Save Purchase Order
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Error Notification Popup -->
    <div id="errorNotification" class="alert alert-danger position-fixed top-0 end-0 m-3" style="display: none; z-index: 9999;">
        <strong>Error!</strong> <span id="errorMessage">Please select the row you want to delete.</span>
    </div>

    <!-- Modal: Add New Purchaser -->
    <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">
            <form id="addSupplierForm" method="POST">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addSupplierModalLabel">
                            <i class="fa-solid fa-user-plus text-primary mr-2"></i> Add New Purchaser
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="po-field-group">
                            <label class="po-label">
                                <span>Purchaser Name (English) <span class="text-danger">*</span></span>
                            </label>
                            <input type="text" name="purchaser_name" id="customer_name" class="po-input"
                                placeholder="e.g. Muhammad Ahmad" required>
                        </div>
                        <div class="po-field-group mb-0">
                            <label class="po-label">
                                <span>Purchaser Name (Urdu) <span class="text-danger">*</span></span>
                                <span class="label-urdu">نام اردو میں</span>
                            </label>
                            <input type="text" name="purchaser_name_urdu" id="customer_name_urdu"
                                class="po-input urdu-font" placeholder="مثال: محمد احمد" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="mdcancelBtn" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="po-btn-save">
                            <i class="fa-solid fa-check mr-1"></i> Save Purchaser
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    {{-- Scripts & Event Handlers --}}
    <script>
        $(document).ready(function() {
            // Setup CSRF header
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Initialize Date
            var today = new Date();
            var formattedDate = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);
            if (!$("#order_date").val()) {
                $("#order_date").val(formattedDate);
            }

            $("#order_date").datepicker({
                dateFormat: "yy-mm-dd"
            });

            // Select2 Initializations
            $('#purchasers').select2({
                placeholder: "- Select Purchaser -",
                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%'
            });

            // Purchaser Selection Change
            $('#purchasers').on('change', function() {
                let id = $(this).val();

                if (!id) {
                    $('#supplierDetails').slideUp(200);
                    return;
                }

                $.ajax({
                    url: "{{ url('/get-purchaser-details/') }}/" + id,
                    type: "GET",
                    success: function(data) {
                        $('#supName').text(data.purchaser_name || '-');
                        $('#supPhone').text(data.purchaser_phone || '-');
                        $('#supAddress').text(data.purchaser_address || '-');
                        $('#supEmail').text(data.purchaser_email || '-');
                        $('#supplierDetails').slideDown(250);
                    }
                });
            });

            // Add Purchaser Form submission via AJAX
            $(document).on('submit', '#addSupplierForm', function(e) {
                e.preventDefault();
                let form = $(this);

                $.ajax({
                    url: "{{ route('purchaser.store') }}",
                    method: "POST",
                    data: form.serialize(),
                    success: function(response) {
                        if (response.success) {
                            $('#mdcancelBtn').click();
                            $('#purchasers').empty().append('<option value="">- Select Purchaser -</option>');
                            
                            response.purchasers.forEach(function(purchaser) {
                                const option = `<option value="${purchaser.id_purchaser}">
                                    ${purchaser.purchaser_name} | ${purchaser.purchaser_name_urdu || purchaser.purchaser_name}
                                </option>`;
                                $('#purchasers').append(option);
                            });

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

                            if (typeof toastr !== 'undefined') {
                                toastr.success('Purchaser added successfully!');
                            }
                        }
                    },
                    error: function(response) {
                        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 if (response.responseJSON && response.responseJSON.message) {
                            if (typeof toastr !== 'undefined') toastr.error(response.responseJSON.message);
                        }
                    }
                });
            });

            // Prevent form submit on Enter key
            $('#goodReceiptsForm').on('keydown', function(e) {
                if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') {
                    e.preventDefault();
                }
            });

            // Calculate totals on charges inputs
            $('#custom_charges, #tax, #labour_charges, #local_charges, #weight_charges').on('input', function() {
                calculateTotals();
            });

            // Recalculate on item inputs
            $('#items-wrapper').on('input', 'input[name="bori[]"], input[name="weight[]"], input[name="rate[]"]', function() {
                calculateTotals();
            });

            // Initial calculation
            calculateTotals();
        });

        // Calculate Row Amount
        function calculateAmount(element) {
            let row = element.closest('.delete_row');
            if (!row) row = element.closest('.row');

            let weight = parseFloat(row.querySelector('.weight-input').value) || 0;
            let rate = parseFloat(row.querySelector('.rate-input').value) || 0;
            let amount = (rate * weight) / 40;

            row.querySelector('.amount-input').value = amount.toFixed(2);
            calculateTotals();
        }

        // Calculate Grand Totals
        function calculateTotals() {
            let totalBori = 0;
            let totalWeight = 0;
            let totalAmount = 0;

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

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

            document.querySelectorAll('input[name="amount[]"]').forEach(function(amountInput) {
                totalAmount += parseFloat(amountInput.value) || 0;
            });

            let customCharges = parseFloat(document.getElementById('custom_charges').value) || 0;
            let labourCharges = parseFloat(document.getElementById('labour_charges').value) || 0;
            let localCharges = parseFloat(document.getElementById('local_charges').value) || 0;
            let weightCharges = parseFloat(document.getElementById('weight_charges').value) || 0;
            let tax = parseFloat(document.getElementById('tax').value) || 0;

            let grandTotal = totalAmount + customCharges + tax + labourCharges + localCharges + weightCharges;

            document.getElementById('total-bori').innerText = totalBori;
            document.getElementById('total-weight').innerText = totalWeight.toFixed(2).replace(/\.00$/, '');
            document.getElementById('total-amount').innerText = Number(totalAmount.toFixed(2)).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
            document.getElementById('grand-total').innerText = Number(grandTotal.toFixed(2)).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
        }

        // Cascading Categories for Row 0
        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);
                        $('#productParentCatShow').show();
                    } else {
                        $('#productParentCatShow').hide();
                        $('#productChildCatShow').hide();
                    }
                },
                error: function() {
                    alert('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);
                        $('#productChildCatShow').show();
                    } else {
                        $('#productChildCatShow').hide();
                    }
                },
                error: function() {
                    alert('Error checking Product Child Category!');
                }
            });
        }

        // Add More Dynamic Items
        let itemIndex = 1;
        document.getElementById('add-more').addEventListener('click', function() {
            let rowNumber = $('#items-wrapper .delete_row').length + 1;

            let newRow = `
                <div class="po-item-card delete_row mt-3" id="item-row-${itemIndex}">
                    <div class="po-item-card-header">
                        <div class="po-item-badge">
                            <span class="badge-num">${rowNumber}</span>
                            <span>Item Row #${rowNumber}</span>
                        </div>
                        <button type="button" class="po-btn-remove-row remove-item">
                            <i class="fa-solid fa-trash-can"></i> Remove
                        </button>
                    </div>
                    <div class="row">
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="po-field-group">
                                <label class="po-label">
                                    <span>Main Category</span>
                                    <span class="label-urdu">مین کیٹیگری</span>
                                </label>
                                <select name="productMainCate[]" class="po-select 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 col-12" id="productParentCatShow-${itemIndex}" style="display: none;">
                            <div class="po-field-group">
                                <label class="po-label">
                                    <span>Parent Category</span>
                                    <span class="label-urdu">پیرنٹ کیٹیگری</span>
                                </label>
                                <select name="productParentCate[]" class="po-select 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 col-12" id="productChildCatShow-${itemIndex}" style="display: none;">
                            <div class="po-field-group">
                                <label class="po-label">
                                    <span>Child Category</span>
                                    <span class="label-urdu">چائلڈ کیٹیگری</span>
                                </label>
                                <select name="productChildCate[]" class="po-select item-select">
                                    <option value="">Select Child Category</option>
                                </select>
                            </div>
                        </div>

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

                        <div class="col-lg-2 col-md-4 col-6">
                            <div class="po-field-group">
                                <label class="po-label">
                                    <span>Bori <span class="text-danger">*</span></span>
                                    <span class="label-urdu">بوری</span>
                                </label>
                                <input type="number" step="any" name="bori[]" required class="po-input" placeholder="0" />
                            </div>
                        </div>

                        <div class="col-lg-2 col-md-4 col-6">
                            <div class="po-field-group">
                                <label class="po-label">
                                    <span>Weight (KG)</span>
                                    <span class="label-urdu">وزن</span>
                                </label>
                                <input type="number" step="any" name="weight[]" class="po-input weight-input"
                                    oninput="calculateAmount(this)" placeholder="0.00" />
                            </div>
                        </div>

                        <div class="col-lg-2 col-md-6 col-6">
                            <div class="po-field-group">
                                <label class="po-label">
                                    <span>Rate (40 KG)</span>
                                    <span class="label-urdu">ریٹ فی من</span>
                                </label>
                                <input type="number" step="any" name="rate[]" class="po-input rate-input"
                                    oninput="calculateAmount(this)" placeholder="0.00" />
                            </div>
                        </div>

                        <div class="col-lg-2 col-md-6 col-12">
                            <div class="po-field-group">
                                <label class="po-label">
                                    <span>Amount (PKR)</span>
                                    <span class="label-urdu">رقم</span>
                                </label>
                                <input type="number" step="any" name="amount[]" class="po-input amount-input"
                                    readonly placeholder="0.00" style="background: #f8fafc; font-weight: 700; color: #0284c7;" />
                            </div>
                        </div>
                    </div>
                </div>
            `;

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

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

            itemIndex++;
            updateRowNumbers();
        });

        // Cascading Category functions for dynamic rows
        function checkForParentCateRow(productMainCateId, rowId) {
            $.ajax({
                url: '{{ route('check-cate-parent') }}',
                type: 'GET',
                data: { productMainCateId: productMainCateId },
                success: function(response) {
                    if (Array.isArray(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);
                        $(`#productParentCatShow-${rowId}`).show();
                    } else {
                        $(`#productParentCatShow-${rowId}`).hide();
                        $(`#productChildCatShow-${rowId}`).hide();
                    }
                },
                error: function() {
                    alert('Error checking Product Parent Category!');
                }
            });
        }

        function checkForChildCateRow(productParentCateId, rowId) {
            $.ajax({
                url: '{{ route('check-cate-child') }}',
                type: 'GET',
                data: { productParentCateId: productParentCateId },
                success: function(response) {
                    if (Array.isArray(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);
                        $(`#productChildCatShow-${rowId}`).show();
                    } else {
                        $(`#productChildCatShow-${rowId}`).hide();
                    }
                },
                error: function() {
                    alert('Error checking Product Child Category!');
                }
            });
        }

        // Delete Row Event delegation
        $(document).on('click', '.remove-item', function() {
            if ($('#items-wrapper .delete_row').length > 1) {
                $(this).closest('.delete_row').remove();
                calculateTotals();
                updateRowNumbers();
            } else {
                showErrorNotification("You cannot delete the last remaining item.");
            }
        });

        // Update Row Numbers & remove buttons
        function updateRowNumbers() {
            let totalRows = $('#items-wrapper .delete_row').length;
            $('#items-wrapper .delete_row').each(function(idx) {
                let currentNum = idx + 1;
                $(this).find('.badge-num').text(currentNum);
                $(this).find('.po-item-badge span:last-child').text('Item Row #' + currentNum);
                
                if (totalRows > 1) {
                    $(this).find('.remove-item').show();
                } else {
                    $(this).find('.remove-item').hide();
                }
            });
        }

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

            errorMessage.innerText = message;
            notification.style.display = 'block';

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

        // Background Ctrl + S shortcut support
        document.addEventListener('keydown', function(e) {
            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
                e.preventDefault();
                document.getElementById('goodReceiptsForm').submit();
            }
        });
    </script>
@endpush