@php
    $mpCategory = \App\Models\ProductCategory::pluck('category_name', 'id')->toArray();
    $mpBrands   = \App\Models\Brand::where('status', 1)->pluck('brand_name', 'id')->toArray();
    $mpUnits    = \App\Models\Unit::where('status', 1)->get()->mapWithKeys(function ($item) {
        return [strtolower($item->name) => $item->name];
    })->toArray();
    $mpTaxGroup = \App\Models\TaxGroup::pluck('tax_slab', 'id')
        ->map(function ($taxSlab) {
            if ($taxSlab === 'None' || $taxSlab === 'Exempt') {
                return $taxSlab;
            }
            return 'GST@' . $taxSlab . '%';
        })
        ->toArray();
    $mpManufacturers = \App\Models\Manufacturer::pluck('name', 'id')->toArray();
    $mpSettings = \App\Models\ItemSetting::first();
    if (!$mpSettings) {
        $mpSettings = (object) [
            'item_category_enabled' => true,
            'mrp_enabled' => true,
            'gst_enabled' => true,
            'stock_maintenance_enabled' => true,
            'brand_enabled' => true,
            'part_number_enabled' => true,
            'item_code_sku_enabled' => true,
            'model_no_enabled' => false,
            'size_enabled' => false,
            'batch_tracking_enabled' => false,
            'manufacturing_date_enabled' => false,
            'expiry_date_enabled' => false,
            'description_enabled' => true,
        ];
    }
@endphp

<style>
    #productModal .mp-section-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: #35608C;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #e9ecef;
        padding-bottom: 0.35rem;
        margin-top: 1.25rem;
        margin-bottom: 0.75rem;
    }
    #productModal .modal-body {
        max-height: 80vh;
        overflow-y: auto;
    }
</style>

<div class="modal fade" id="productModal" tabindex="-1" aria-labelledby="productModalLabel" aria-hidden="true"
    data-bs-keyboard="false" data-bs-backdrop="static" style="z-index: 1055;">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="productModalLabel"><i class="ri-box-3-line text-primary me-1"></i> Create Item / Product</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <div id="mpGlobalError" class="alert alert-danger d-none py-2" style="font-size: 13px;"></div>

                <form id="productModalForm" action="{{ route('product.store') }}" method="POST" class="row g-3 needs-validation" autocomplete="off">
                    @csrf
                    <input type="hidden" name="request_from" id="mp_request_from" value="model">

                    {{-- ===== 1. BASIC ITEM DETAILS ===== --}}
                    <div class="col-12 mt-0">
                        <div class="mp-section-title mt-0">Basic Item Details</div>
                    </div>

                    <div class="col-md-6 col-12">
                        <label for="mp_product_name" class="form-label fw-semibold">Item Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="mp_product_name" name="product_name" required placeholder="e.g. Engine Oil, Front Tyre">
                        <span class="text-danger mp-error small" data-field="product_name"></span>
                    </div>

                    <div class="col-md-6 col-12" id="mp_fld_category">
                        <label for="mp_product_category_id" class="form-label fw-semibold">
                            Category <span class="text-danger">*</span>
                            <button type="button" class="btn btn-sm btn-primary py-0 px-1 btnQuickAddCategory ms-1" title="Add Category">
                                <i class="ri-add-circle-line"></i>
                            </button>
                        </label>
                        <select name="product_category_id" id="mp_product_category_id" class="form-select select2-mp-modal" required>
                            <option value="">--Select--</option>
                            @foreach ($mpCategory as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                        <span class="text-danger mp-error small" data-field="product_category_id"></span>
                    </div>

                    <div class="col-md-6 col-12">
                        <label for="mp_units" class="form-label fw-semibold">
                            Unit <span class="text-danger">*</span>
                            <button type="button" class="btn btn-sm btn-primary py-0 px-1 btnQuickAddUnit ms-1" title="Add Unit">
                                <i class="ri-add-circle-line"></i>
                            </button>
                        </label>
                        <select name="units" id="mp_units" class="form-select select2-mp-modal" required>
                            <option value="">--Select--</option>
                            @foreach ($mpUnits as $val => $name)
                                <option value="{{ $val }}">{{ $name }}</option>
                            @endforeach
                        </select>
                        <span class="text-danger mp-error small" data-field="units"></span>
                    </div>

                    <div class="col-md-6 col-12" id="mp_fld_brand">
                        <label for="mp_brand_id" class="form-label fw-semibold">
                            Brand <span class="text-danger">*</span>
                            <button type="button" class="btn btn-sm btn-primary py-0 px-1 btnQuickAddBrand ms-1" title="Add Brand">
                                <i class="ri-add-circle-line"></i>
                            </button>
                        </label>
                        <select name="brand_id" id="mp_brand_id" class="form-select select2-mp-modal">
                            <option value="">--Select--</option>
                            @foreach ($mpBrands as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                        <span class="text-danger mp-error small" data-field="brand_id"></span>
                    </div>

                    {{-- ===== 2. PRICING & TAX ===== --}}
                    <div class="col-12">
                        <div class="mp-section-title">Pricing & Tax</div>
                    </div>

                    <div class="col-md-4 col-12">
                        <label for="mp_purchase_rate" class="form-label fw-semibold">Purchase Rate</label>
                        <input type="number" class="form-control mp-floatnumber" id="mp_purchase_rate" name="purchase_rate" step="0.01" placeholder="0.00">
                        <span class="text-danger mp-error small" data-field="purchase_rate"></span>
                    </div>

                    <div class="col-md-4 col-12" id="mp_fld_mrp">
                        <label for="mp_mrp" class="form-label fw-semibold">MRP / Sale Price</label>
                        <input type="number" class="form-control mp-floatnumber" id="mp_mrp" name="mrp" step="0.01" placeholder="0.00">
                        <span class="text-danger mp-error small" data-field="mrp"></span>
                    </div>

                    <div class="col-md-4 col-12" id="mp_fld_gst">
                        <label for="mp_gst_applicable" class="form-label fw-semibold">GST Applicable <span class="text-danger">*</span></label>
                        <select name="gst_applicable" id="mp_gst_applicable" class="form-select" required>
                            <option value="yes" selected>Applicable</option>
                            <option value="no">Not-Applicable</option>
                        </select>
                        <span class="text-danger mp-error small" data-field="gst_applicable"></span>
                    </div>

                    <div class="col-md-4 col-12 mpApplicableYes">
                        <label for="mp_tax_group_id" class="form-label fw-semibold">Tax Slab <span class="text-danger">*</span></label>
                        <select name="tax_group_id" id="mp_tax_group_id" class="form-select select2-mp-modal">
                            <option value="">--Select--</option>
                            @foreach ($mpTaxGroup as $id => $slab)
                                <option value="{{ $id }}">{{ $slab }}</option>
                            @endforeach
                        </select>
                        <span class="text-danger mp-error small" data-field="tax_group_id"></span>
                    </div>

                    <div class="col-md-4 col-12 mpApplicableYes">
                        <label for="mp_hsn_code" class="form-label fw-semibold">HSN Code</label>
                        <input type="text" class="form-control" id="mp_hsn_code" name="hsn_code" placeholder="HSN/SAC Code" oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                        <span class="text-danger mp-error small" data-field="hsn_code"></span>
                    </div>

                    {{-- ===== 3. OPENING STOCK ===== --}}
                    <div class="col-12" id="mp_section_opening_stock">
                        <div class="mp-section-title">Opening Stock</div>
                    </div>

                    <div class="col-md-4 col-12" id="mp_fld_opening_stock_qty">
                        <label for="mp_opening_stock" class="form-label fw-semibold">Opening Stock (Qty) <span class="text-danger">*</span></label>
                        <input type="number" class="form-control mp-number" id="mp_opening_stock" name="opening_stock" value="0" onfocus="if(this.value=='0') this.value='';">
                        <span class="text-danger mp-error small" data-field="opening_stock"></span>
                    </div>

                    <div class="col-md-4 col-12" id="mp_fld_rate_per">
                        <label for="mp_rate_per" class="form-label fw-semibold">Rate Per Unit <span class="text-danger">*</span></label>
                        <input type="number" class="form-control mp-floatnumber" id="mp_rate_per" name="rate_per" value="0.00" step="0.01" onfocus="if(this.value=='0') this.value='';">
                        <span class="text-danger mp-error small" data-field="rate_per"></span>
                    </div>

                    <div class="col-md-4 col-12" id="mp_fld_stock_alert">
                        <label for="mp_stock_alert" class="form-label fw-semibold">Minimum Stock Alert</label>
                        <input type="number" class="form-control mp-number" id="mp_stock_alert" name="stock_alert" value="0" onfocus="if(this.value=='0') this.value='';">
                        <span class="text-danger mp-error small" data-field="stock_alert"></span>
                    </div>

                    {{-- ===== 4. ADDITIONAL / TRACKING DETAILS ===== --}}
                    <div class="col-12">
                        <div class="mp-section-title">Additional / Tracking Details</div>
                    </div>

                    <div class="col-md-4 col-12">
                        <label for="mp_manufacturer_id" class="form-label fw-semibold">Manufacturer</label>
                        <select name="manufacturer_id" id="mp_manufacturer_id" class="form-select select2-mp-modal">
                            <option value="">--Select--</option>
                            @foreach ($mpManufacturers as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                        <span class="text-danger mp-error small" data-field="manufacturer_id"></span>
                    </div>

                    <div class="col-md-4 col-12" id="mp_fld_part_number" style="display:none;">
                        <label for="mp_part_number" class="form-label fw-semibold">Part Number <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="mp_part_number" name="part_number" placeholder="Part Number">
                        <span class="text-danger mp-error small" data-field="part_number"></span>
                    </div>

                    <div class="col-md-4 col-12" id="mp_fld_item_code" style="display:none;">
                        <label for="mp_item_code" class="form-label fw-semibold">Item Code / SKU <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="mp_item_code" name="item_code" placeholder="SKU / Item Code">
                        <span class="text-danger mp-error small" data-field="item_code"></span>
                    </div>

                    <div class="col-md-4 col-12" id="mp_fld_model_no" style="display:none;">
                        <label for="mp_model_no" class="form-label fw-semibold">Model No. <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="mp_model_no" name="model_no" placeholder="Model No">
                        <span class="text-danger mp-error small" data-field="model_no"></span>
                    </div>

                    <div class="col-md-4 col-12" id="mp_fld_size" style="display:none;">
                        <label for="mp_size" class="form-label fw-semibold">Size <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="mp_size" name="size" placeholder="Size">
                        <span class="text-danger mp-error small" data-field="size"></span>
                    </div>

                    <div class="col-md-4 col-12" id="mp_fld_batch_number" style="display:none;">
                        <label for="mp_batch_number" class="form-label fw-semibold">Batch Number <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="mp_batch_number" name="batch_number" placeholder="Batch Number">
                        <span class="text-danger mp-error small" data-field="batch_number"></span>
                    </div>

                    <div class="col-md-4 col-12" id="mp_fld_mfg_date" style="display:none;">
                        <label for="mp_manufacturing_date" class="form-label fw-semibold">Manufacturing Date <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="ri-calendar-todo-line"></i></span>
                            <input type="text" class="form-control mp-datepicker" id="mp_manufacturing_date" name="manufacturing_date" placeholder="DD-MM-YYYY">
                        </div>
                        <span class="text-danger mp-error small" data-field="manufacturing_date"></span>
                    </div>

                    <div class="col-md-4 col-12" id="mp_fld_expiry_date" style="display:none;">
                        <label for="mp_expiry_date" class="form-label fw-semibold">Expiry Date <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="ri-calendar-todo-line"></i></span>
                            <input type="text" class="form-control mp-datepicker" id="mp_expiry_date" name="expiry_date" placeholder="DD-MM-YYYY">
                        </div>
                        <span class="text-danger mp-error small" data-field="expiry_date"></span>
                    </div>

                    <div class="col-md-4 col-12">
                        <label for="mp_status" class="form-label fw-semibold">Status <span class="text-danger">*</span></label>
                        <select class="form-select" id="mp_status" name="status" required>
                            <option value="Active" selected>Active</option>
                            <option value="Inactive">Inactive</option>
                        </select>
                        <span class="text-danger mp-error small" data-field="status"></span>
                    </div>

                    <div class="col-md-12 col-12" id="mp_fld_description">
                        <label for="mp_remark" class="form-label fw-semibold">Description / Remarks</label>
                        <textarea class="form-control" id="mp_remark" name="remark" rows="2" placeholder="Optional notes..."></textarea>
                        <span class="text-danger mp-error small" data-field="remark"></span>
                    </div>

                    {{-- ===== SUBMIT BUTTONS ===== --}}
                    <div class="col-12 mt-4 pt-3 border-top d-flex justify-content-end gap-2">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button class="btn btn-primary px-4" id="mpBtnSubmit" type="button">
                            <i class="ri-save-line me-1"></i> Save Item
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

@include('common.modal.category')
@include('common.modal.brand')
@include('common.modal.unit')

@push('footer_script')
<script>
$(document).ready(function() {
    var mpSettings = {
        itemCategory:      {{ ($mpSettings->item_category_enabled ?? true) ? 'true' : 'false' }},
        mrp:               {{ ($mpSettings->mrp_enabled ?? true) ? 'true' : 'false' }},
        gst:               {{ ($mpSettings->gst_enabled ?? true) ? 'true' : 'false' }},
        stockMaintenance:  {{ ($mpSettings->stock_maintenance_enabled ?? true) ? 'true' : 'false' }},
        brand:             {{ ($mpSettings->brand_enabled ?? true) ? 'true' : 'false' }},
        partNumber:        {{ ($mpSettings->part_number_enabled ?? true) ? 'true' : 'false' }},
        itemCodeSku:       {{ ($mpSettings->item_code_sku_enabled ?? true) ? 'true' : 'false' }},
        modelNo:           {{ ($mpSettings->model_no_enabled ?? false) ? 'true' : 'false' }},
        size:              {{ ($mpSettings->size_enabled ?? false) ? 'true' : 'false' }},
        batchTracking:     {{ ($mpSettings->batch_tracking_enabled ?? false) ? 'true' : 'false' }},
        mfgDate:           {{ ($mpSettings->manufacturing_date_enabled ?? false) ? 'true' : 'false' }},
        expiryDate:        {{ ($mpSettings->expiry_date_enabled ?? false) ? 'true' : 'false' }},
        description:       {{ ($mpSettings->description_enabled ?? true) ? 'true' : 'false' }}
    };

    function applyMpSettings() {
        $('#mp_fld_category').toggle(mpSettings.itemCategory);
        $('#mp_fld_mrp').toggle(mpSettings.mrp);
        $('#mp_fld_gst').toggle(mpSettings.gst);
        $('#mp_section_opening_stock, #mp_fld_opening_stock_qty, #mp_fld_rate_per, #mp_fld_stock_alert').toggle(mpSettings.stockMaintenance);
        $('#mp_fld_brand').toggle(mpSettings.brand);
        $('#mp_fld_part_number').toggle(mpSettings.partNumber);
        $('#mp_fld_item_code').toggle(mpSettings.itemCodeSku);
        $('#mp_fld_model_no').toggle(mpSettings.modelNo);
        $('#mp_fld_size').toggle(mpSettings.size);
        $('#mp_fld_batch_number').toggle(mpSettings.batchTracking);
        $('#mp_fld_mfg_date').toggle(mpSettings.mfgDate);
        $('#mp_fld_expiry_date').toggle(mpSettings.expiryDate);
        $('#mp_fld_description').toggle(mpSettings.description);
    }

    // Number only filters
    $(document).on('input', '.mp-number', function() {
        this.value = this.value.replace(/\D/g, '');
    });
    $(document).on('input', '.mp-floatnumber', function() {
        this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
    });

    // GST Applicable toggle
    $('#mp_gst_applicable').on('change', function() {
        if ($(this).val() === 'yes') {
            $('.mpApplicableYes').show();
            $('#mp_tax_group_id').attr('required', true);
        } else {
            $('.mpApplicableYes').hide();
            $('#mp_tax_group_id').attr('required', false).val('').trigger('change');
        }
    });

    // Modal show event
    $('#productModal').on('shown.bs.modal', function() {
        $('.select2-mp-modal').select2({
            dropdownParent: $('#productModal'),
            placeholder: "Search / Select...",
            allowClear: true,
            width: '100%'
        });

        if (typeof $.fn.daterangepicker !== 'undefined') {
            $('.mp-datepicker').daterangepicker({
                singleDatePicker: true,
                autoUpdateInput: false,
                parentEl: '#productModal',
                locale: { format: 'DD-MM-YYYY' }
            }).on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD-MM-YYYY'));
            });
        }

        applyMpSettings();
        $('#mp_gst_applicable').trigger('change');
    });

    // Modal submit via AJAX
    $('#mpBtnSubmit').on('click', function() {
        $('.mp-error').html('');
        $('#mpGlobalError').addClass('d-none').html('');

        var form = $('#productModalForm');
        var btn = $(this);
        btn.prop('disabled', true).html('<i class="ri-loader-4-line"></i> Saving...');

        $.ajax({
            url: "{{ route('product.store') }}",
            type: "POST",
            data: form.serialize(),
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            success: function(response) {
                btn.prop('disabled', false).html('<i class="ri-save-line me-1"></i> Save Item');

                if (response.success && response.data) {
                    var product = response.data;
                    var label = product.product_name;

                    // Append new product to any parent product dropdowns (e.g. voucher items table)
                    var targetSelects = $('select[name="product_id[]"], #product_id, select.item-product-select');
                    var newOption = new Option(label, product.id, true, true);
                    targetSelects.append(newOption);
                    
                    // Select in the currently active row or last select
                    targetSelects.last().val(product.id).trigger('change');

                    $('#productModal').modal('hide');
                    form[0].reset();
                    $('#mp_opening_stock').val('0');
                    $('#mp_stock_alert').val('0');
                    $('#mp_rate_per').val('0.00');

                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Item Created!',
                            text: product.product_name + ' created and selected.',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    }
                } else {
                    $('#mpGlobalError').removeClass('d-none').text(response.message || 'Error saving item.');
                }
            },
            error: function(xhr) {
                btn.prop('disabled', false).html('<i class="ri-save-line me-1"></i> Save Item');

                if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                    $.each(xhr.responseJSON.errors, function(field, messages) {
                        $('.mp-error[data-field="' + field + '"]').html(messages[0]);
                    });
                } else {
                    var msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'An error occurred while saving the item.';
                    $('#mpGlobalError').removeClass('d-none').text(msg);
                }
            }
        });
    });

    // Reset when modal opens
    $('#productModal').on('show.bs.modal', function() {
        $('.mp-error').html('');
        $('#mpGlobalError').addClass('d-none').html('');
    });
});
</script>
@endpush