{{-- resources/views/purchase/bills/edit.blade.php --}}
@extends('master.app')
@section('title', 'Edit Supplier Invoice')

@section('body')
<main class="app-content">
    <section class="gradient-custom-2">
        <div class="card mask-custom shadow-sm" style="border-radius:18px;">
            <div class="card-body p-4">

                <div class="d-flex flex-wrap align-items-center justify-content-between mb-3">
                    <div>
                        <h5 class="mb-0 fw-bold">
                            <i class="fa fa-pencil me-1"></i> Edit Purchase Invoice
                        </h5>
                        <small class="text-muted">One-page invoice (Add to List + Update)</small>
                    </div>
                    <div class="d-flex gap-2">
                        <a href="{{ route('msupplier_bill.index') }}" class="btn btn-sm btn-light border">
                            <i class="fa fa-list me-1"></i> Back to Bills
                        </a>
                    </div>
                </div>

                @include('general.valert')

                <form action="{{ route('msupplier_bill.update', $bill->id) }}" method="POST" enctype="multipart/form-data" id="invoiceForm">
                    @csrf
                    @method('PUT')

                    {{-- Invoice Header --}}
                    <div class="card border-0 shadow-sm mb-3" style="border-radius:14px;">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="fw-bold mb-0"><i class="fa fa-info-circle me-1"></i> Invoice Info</h6>
                                <span class="badge bg-secondary">Header</span>
                            </div>

                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label">Invoice Type</label>
                                    <select name="type_id" required class="form-select select2" id="type_id">
                                        <option value="">Choose Invoice Type</option>
                                        <option value="1" {{ (int)$bill->type_id === 1 || is_null($bill->type_id) ? 'selected' : '' }}>Raw Materials</option>
                                        <option value="2" {{ (int)$bill->type_id === 2 ? 'selected' : '' }}>Finished Goods</option>
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">Supplier</label>
                                    <select name="supplier_id" required class="form-select select2" id="supplier_id">
                                        <option value="">Choose Supplier</option>
                                        @foreach ($suppliers as $row)
                                            <option value="{{ $row->id }}" {{ (int)$row->id === (int)$bill->supplier_id ? 'selected' : '' }}>
                                                {{ $row->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-outline">
                                        <input type="number" required name="invoice_number" value="{{ $bill->invoice_number }}" id="invoice_number" class="form-control" />
                                        <label class="form-label" for="invoice_number">Invoice Number</label>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <div class="form-outline">
                                        <input type="text" required name="title" value="{{ $bill->title }}" id="title" class="form-control" />
                                        <label class="form-label" for="title">Title</label>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    @if(isset($bdate) && $bdate == 1)
                                        <label class="form-label">Date</label>
                                        <input type="text" required dir="rtl" name="date" value="{{ $bill->invoice_date }}" class="form-control sample-date-picker" id="date" />
                                    @else
                                        <div class="form-outline datepicker">
                                            <input type="date" required name="date" value="{{ $bill->invoice_date }}" class="form-control" id="date" />
                                            <label class="form-label" for="date">Date</label>
                                        </div>
                                    @endif
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">Currency</label>
                                    <select name="currency_id" required class="form-select select2" id="currency_id">
                                        <option value="">Choose Currency</option>
                                        @foreach ($currencies as $row)
                                            <option value="{{ $row->id }}" {{ (int)$row->id === (int)$bill->currency_id ? 'selected' : '' }}>
                                                {{ $row->title_ps ?? $row->title_en ?? $row->title_dr }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-3" id="ex_rate_text_box" style="display:none;">
                                    <div class="form-outline">
                                        <input type="text" name="ex_rate" value="{{ $bill->ex_rate }}" id="ex_rate" class="form-control" />
                                        <label class="form-label" for="ex_rate">Exchange Rate</label>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label">Invoice File</label>
                                    <input type="file" name="bill_files" class="form-control" />
                                    <small class="text-muted d-block mt-1">Upload only if you want to replace old file</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Add Items --}}
                    <div class="card border-0 shadow-sm mb-3" style="border-radius:16px; overflow:hidden;">
                        <div class="px-3 px-md-4 py-3 border-bottom" style="background:rgba(13,110,253,.06);">
                            <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                                <div>
                                    <h6 class="fw-bold mb-0"><i class="fa fa-plus-circle me-1 text-primary"></i> Add Items</h6>
                                    <small class="text-muted">Select type then add items</small>
                                </div>
                                <span class="badge bg-secondary">Items</span>
                            </div>
                        </div>

                        <div class="card-body p-3 p-md-4">

                            {{-- RAW --}}
                            <div id="rawBox" style="display:none;">
                                <div class="border p-3 p-md-4" style="border-radius:14px; background:#fff;">
                                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
                                        <div class="fw-bold"><i class="fa fa-cubes text-primary me-1"></i> Raw Materials</div>
                                        <button type="button" class="btn btn-sm btn-light border btn-rounded" id="rawClear">
                                            <i class="fa fa-eraser me-1"></i> Clear
                                        </button>
                                    </div>

                                    <div class="row g-3">
                                        <div class="col-lg-4">
                                            <label class="form-label mb-1">Category</label>
                                            <select id="raw_cat_id" class="form-select select2">
                                                <option value="">Choose Category</option>
                                                @foreach ($pCategories ?? [] as $c)
                                                    <option value="{{ $c->id }}">{{ $c->title_en }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-lg-4">
                                            <label class="form-label mb-1">Sub Category</label>
                                            <select id="raw_scat_id" class="form-select select2">
                                                <option value="">SCAT</option>
                                            </select>
                                        </div>

                                        <div class="col-lg-4">
                                            <label class="form-label mb-1">Unit</label>
                                            <select id="raw_unit_id" class="form-select select2">
                                                <option value="">Choose Unit</option>
                                                @foreach ($pUnits ?? [] as $u)
                                                    <option value="{{ $u->id }}">{{ $u->title_ps ?? $u->title_en }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-4 col-lg-2">
                                            <label class="form-label mb-1">CPI</label>
                                            <input type="number" id="raw_cpi" class="form-control" placeholder="0">
                                        </div>

                                        <div class="col-md-4 col-lg-2">
                                            <label class="form-label mb-1">SPI</label>
                                            <input type="number" id="raw_spi" class="form-control" placeholder="0">
                                        </div>

                                        <div class="col-md-4 col-lg-2">
                                            <label class="form-label mb-1">Qty</label>
                                            <input type="number" id="raw_qty" class="form-control" placeholder="0">
                                        </div>

                                        <div class="col-lg-6 ms-auto d-flex justify-content-end align-items-end">
                                            <button type="button" class="btn btn-primary btn-rounded w-100 w-lg-auto" id="addRaw">
                                                <i class="fa fa-plus me-1"></i> Add to List
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- FIN --}}
                            <div id="finBox" style="display:none;">
                                <div class="border p-3 p-md-4" style="border-radius:14px; background:#fff;">
                                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
                                        <div class="fw-bold"><i class="fa fa-dropbox text-primary me-1"></i> Finished Goods</div>
                                        <button type="button" class="btn btn-sm btn-light border btn-rounded" id="finClear">
                                            <i class="fa fa-eraser me-1"></i> Clear
                                        </button>
                                    </div>

                                    <div class="row g-3">
                                        <div class="col-lg-3">
                                            <label class="form-label mb-1">Category</label>
                                            <select id="fin_cat_id" class="form-select select2">
                                                <option value="">Choose Category</option>
                                                @foreach ($sCategories ?? [] as $c)
                                                    <option value="{{ $c->id }}">{{ $c->title_en ?? $c->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-lg-3">
                                            <label class="form-label mb-1">Sub Category</label>
                                            <select id="fin_sub_cat_id" class="form-select select2">
                                                <option value="">Choose Sub Category</option>
                                                @foreach ($sSubcategories ?? [] as $sc)
                                                    <option value="{{ $sc->id }}" data-cat="{{ $sc->cat_id }}">
                                                        {{ $sc->title_en ?? $sc->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-lg-3">
                                            <label class="form-label mb-1">Unit</label>
                                            <select id="fin_unit_id" class="form-select select2">
                                                <option value="">Choose Unit</option>
                                                @foreach ($sUnits ?? [] as $u)
                                                    <option value="{{ $u->id }}">{{ $u->title_ps ?? $u->title_en }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-lg-3">
                                            <label class="form-label mb-1">Weight</label>
                                            <select id="fin_weight_id" class="form-select select2">
                                                <option value="">Choose Weight</option>
                                                @foreach ($sWeights ?? [] as $w)
                                                    <option value="{{ $w->id }}">{{ $w->title_ps ?? $w->title_en }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-lg-4">
                                            <label class="form-label mb-1">Location</label>
                                            <select id="fin_location_id" class="form-select select2">
                                                <option value="">Choose Location</option>
                                                @foreach ($locations ?? [] as $l)
                                                    <option value="{{ $l->id }}">{{ $l->title ?? $l->name ?? ('Location #'.$l->id) }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-md-4 col-lg-2">
                                            <label class="form-label mb-1">Price</label>
                                            <input type="number" id="fin_price" class="form-control" placeholder="0">
                                        </div>

                                        <div class="col-md-4 col-lg-2">
                                            <label class="form-label mb-1">Qty</label>
                                            <input type="number" id="fin_qty" class="form-control" placeholder="0">
                                        </div>

                                        <div class="col-md-4 col-lg-2">
                                            <label class="form-label mb-1">SPI</label>
                                            <input type="number" id="fin_spi" class="form-control" placeholder="0">
                                        </div>

                                        <div class="col-lg-6 ms-auto d-flex justify-content-end align-items-end">
                                            <button type="button" class="btn btn-primary btn-rounded w-100 w-lg-auto" id="addFin">
                                                <i class="fa fa-plus me-1"></i> Add to List
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    {{-- Items List --}}
                    <div class="card border-0 shadow-sm mb-3" style="border-radius:14px;">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="fw-bold mb-0"><i class="fa fa-list me-1"></i> Items List</h6>
                                <span class="badge bg-secondary">List</span>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-striped align-middle" id="itemsTable">
                                    <thead class="bg-light">
                                        <tr>
                                            <th style="width:60px;">#</th>
                                            <th>Item</th>
                                            <th style="width:120px;">Unit</th>
                                            <th style="width:110px;">Qty</th>
                                            <th style="width:130px;">Price</th>
                                            <th style="width:140px;">Total</th>
                                            <th style="width:90px;" class="text-end">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr id="emptyRow">
                                            <td colspan="7" class="text-center text-muted py-3">No items added yet.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            {{-- Hidden inputs for items --}}
                            <div id="itemsInputs"></div>
                        </div>
                    </div>

                    {{-- Checkout --}}
                    <div class="card border-0 shadow-sm" style="border-radius:14px;">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h6 class="fw-bold mb-0"><i class="fa fa-check-circle me-1"></i> Checkout</h6>
                                <span class="badge bg-secondary">Update</span>
                            </div>

                            <div class="row g-3">
                                <div class="col-md-4">
                                    <div class="form-outline">
                                        <input type="text" readonly id="grand_total" class="form-control" value="0" />
                                        <label class="form-label" for="grand_total">Grand Total</label>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-outline">
                                        <input type="text" id="payment" name="payment" value="{{ $bill->payment ?? 0 }}" class="form-control" />
                                        <label class="form-label" for="payment">Payment</label>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-outline">
                                        <input type="text" readonly id="balance_value" class="form-control" value="0" />
                                        <label class="form-label" for="balance_value">Balance</label>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Transaction Type</label>
                                    <select name="transaction_id" class="form-select">
                                        <option value="">Define Transaction Type</option>
                                        <option value="1" {{ (int)$bill->transaction_id === 1 ? 'selected' : '' }}>Cash</option>
                                        <option value="2" {{ (int)$bill->transaction_id === 2 ? 'selected' : '' }}>Bank</option>
                                        <option value="3" {{ (int)$bill->transaction_id === 3 ? 'selected' : '' }}>Sarafi</option>
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label">Target Cash</label>
                                    <select name="cash_id" class="form-select">
                                        <option value="">Define Target Type</option>
                                        <option value="1" {{ (int)$bill->c_target === 1 ? 'selected' : '' }}>Target Cash Yes</option>
                                        <option value="2" {{ (int)$bill->c_target !== 1 ? 'selected' : '' }}>Target Cash No</option>
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-outline">
                                        <input type="text" name="payment_by" id="payment_by" value="{{ $bill->payment_by }}" class="form-control" />
                                        <label class="form-label" for="payment_by">Payment By</label>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex flex-wrap justify-content-end gap-2 mt-4">
                                <a href="{{ route('msupplier_bill.index') }}" class="btn btn-light border btn-rounded">
                                    <i class="fa fa-list me-1"></i> Back
                                </a>
                                <button type="submit" class="btn btn-primary btn-rounded" id="processBtn" disabled>
                                    <i class="fa fa-save me-1"></i> Update Invoice
                                </button>
                            </div>
                        </div>
                    </div>

                </form>

            </div>
        </div>
    </section>
</main>
@endsection


@section('pageJs')
@php
    // ✅ FIX: build PHP array first, then json it (prevents "Unclosed '[' ... does not match ')'")
    $preloadItems = (((int)$bill->type_id === 1) || is_null($bill->type_id))
        ? $bill_items->map(function($it){
            return [
                'label' => 'Cat #'.$it->cat_id,
                'subLabel' => $it->scat_id ? ('SCAT #'.$it->scat_id) : '',
                'unitLabel' => 'Unit #'.$it->unit_id,
                'qty' => (float) $it->qty,
                'price' => (float) $it->cpi,
                'total' => (float) $it->total,
                'payload' => [
                    'mode' => 'raw',
                    'cat_id' => $it->cat_id,
                    'scat_id' => $it->scat_id ?? '',
                    'unit_id' => $it->unit_id,
                    'cpi' => (float) $it->cpi,
                    'spi' => (float) $it->spi,
                    'qty' => (float) $it->qty,
                ],
            ];
        })->values()
        : $bill_items->map(function($it){
            return [
                'label' => 'Cat #'.$it->cat_id.' - Sub #'.$it->sub_cat_id,
                'subLabel' => 'Weight #'.$it->weight_id.' | Location #'.$it->location_id,
                'unitLabel' => 'Unit #'.$it->unit_id,
                'qty' => (float) $it->qty,
                'price' => (float) $it->price,
                'total' => (float) $it->total,
                'payload' => [
                    'mode' => 'fin',
                    'cat_id' => $it->cat_id,
                    'sub_cat_id' => $it->sub_cat_id,
                    'unit_id' => $it->unit_id,
                    'weight_id' => $it->weight_id,
                    'location_id' => $it->location_id,
                    'price' => (float) $it->price,
                    'qty' => (float) $it->qty,
                    'spi' => (float) ($it->spi ?? 0),
                ],
            ];
        })->values();
@endphp

<script>
    $(".app-menu").removeClass("active");
    $("#nav_purchase1").addClass("active");
    $("#purchasei").addClass("is-expanded");
    $("#purchase_invoices").addClass("active");

    function money(n){
        n = parseFloat(n || 0);
        return (Math.round(n * 100) / 100).toString();
    }

    // ✅ preload items from server
    let items = @json($preloadItems);

    function rebuildHiddenInputs(){
        const box = $('#itemsInputs'); box.html('');
        items.forEach((it,i)=>{
            Object.keys(it.payload || {}).forEach(key=>{
                box.append(`<input type="hidden" name="items[${i}][${key}]" value="${it.payload[key]}">`);
            });
        });
    }

    function calcTotal(){
        let total = 0;
        items.forEach(it => total += parseFloat(it.total || 0));
        $('#grand_total').val(money(total));
        calcBalance();
    }

    function calcBalance(){
        const total = parseFloat($('#grand_total').val() || 0);
        const pay = parseFloat($('#payment').val() || 0);
        $('#balance_value').val(money(total - pay));
    }

    function renderTable(){
        const tbody = $('#itemsTable tbody'); tbody.html('');
        if(items.length === 0){
            tbody.html(`<tr id="emptyRow"><td colspan="7" class="text-center text-muted py-3">No items added yet.</td></tr>`);
            $('#processBtn').prop('disabled', true);
            rebuildHiddenInputs();
            calcTotal();
            return;
        }

        items.forEach((it,idx)=>{
            tbody.append(`
                <tr>
                    <td>${idx+1}</td>
                    <td>
                        <div class="fw-bold">${it.label || '-'}</div>
                        <small class="text-muted">${it.subLabel || ''}</small>
                    </td>
                    <td>${it.unitLabel || '-'}</td>
                    <td>${money(it.qty)}</td>
                    <td>${money(it.price)}</td>
                    <td class="fw-bold">${money(it.total)}</td>
                    <td class="text-end">
                        <button type="button" class="btn btn-sm btn-light border removeItemBtn" data-index="${idx}">
                            <i class="fa fa-trash text-danger"></i>
                        </button>
                    </td>
                </tr>
            `);
        });

        $('#processBtn').prop('disabled', false);
        rebuildHiddenInputs();
        calcTotal();
    }

    function showByType(){
        const type = $('#type_id').val();
        $('#rawBox').toggle(type == 1);
        $('#finBox').toggle(type == 2);
    }

    // RAW ajax subcats
    $(document).on('change', '#raw_cat_id', function(){
        $.ajax({
            url: '{{ route('category.row_category') }}',
            type: 'GET',
            data: { cat_id: $(this).val() },
            success: function(data){
                $("#raw_scat_id").html(data).trigger('change');
            }
        });
    });

    // FIN filter subcats
    function filterFinSubCats(){
        const catId = $('#fin_cat_id').val();
        const sub = $('#fin_sub_cat_id');
        sub.find('option').each(function(){
            const v = $(this).val();
            if(!v) return;
            $(this).toggle($(this).data('cat') == catId);
        });
        sub.val('').trigger('change');
    }

    $(document).on('click', '#addRaw', function(){
        if($('#type_id').val() != 1) return alert('Select Raw Materials type first');

        const cat = $('#raw_cat_id')[0], scat = $('#raw_scat_id')[0], unit = $('#raw_unit_id')[0];
        const cpi = $('#raw_cpi').val(), spi = $('#raw_spi').val(), qty = $('#raw_qty').val();

        if(!cat.value || !unit.value || !cpi || !spi || !qty) return alert('Fill all RAW fields');

        const total = parseFloat(cpi) * parseFloat(qty);
        items.push({
            label: cat.options[cat.selectedIndex].text,
            subLabel: (scat && scat.value) ? scat.options[scat.selectedIndex].text : '',
            unitLabel: unit.options[unit.selectedIndex].text,
            qty: parseFloat(qty),
            price: parseFloat(cpi),
            total: money(total),
            payload: {
                mode:'raw',
                cat_id:cat.value,
                scat_id:(scat && scat.value) ? scat.value : '',
                unit_id:unit.value,
                cpi: cpi,
                spi: spi,
                qty: qty
            }
        });

        $('#raw_cpi,#raw_spi,#raw_qty').val('');
        renderTable();
    });

    $(document).on('click', '#addFin', function(){
        if($('#type_id').val() != 2) return alert('Select Finished Goods type first');

        const cat = $('#fin_cat_id')[0], sub = $('#fin_sub_cat_id')[0], unit = $('#fin_unit_id')[0];
        const weight = $('#fin_weight_id')[0], loc = $('#fin_location_id')[0];
        const price = $('#fin_price').val(), qty = $('#fin_qty').val(), spi = $('#fin_spi').val() || 0;

        if(!cat.value || !sub.value || !unit.value || !weight.value || !loc.value || !price || !qty)
            return alert('Fill all FIN fields');

        const total = parseFloat(price) * parseFloat(qty);
        items.push({
            label: cat.options[cat.selectedIndex].text + ' - ' + sub.options[sub.selectedIndex].text,
            subLabel: 'Weight: ' + weight.options[weight.selectedIndex].text + ' | Location: ' + loc.options[loc.selectedIndex].text,
            unitLabel: unit.options[unit.selectedIndex].text,
            qty: parseFloat(qty),
            price: parseFloat(price),
            total: money(total),
            payload: {
                mode:'fin',
                cat_id:cat.value,
                sub_cat_id:sub.value,
                unit_id:unit.value,
                weight_id:weight.value,
                location_id:loc.value,
                price: price,
                qty: qty,
                spi: spi
            }
        });

        $('#fin_price,#fin_qty,#fin_spi').val('');
        renderTable();
    });

    $(document).on('click', '.removeItemBtn', function(){
        const i = parseInt($(this).data('index'));
        items.splice(i,1);
        renderTable();
    });

    $(document).on('click', '#rawClear', function(){
        $('#raw_cpi,#raw_spi,#raw_qty').val('');
        $('#raw_cat_id,#raw_scat_id,#raw_unit_id').val('').trigger('change');
    });

    $(document).on('click', '#finClear', function(){
        $('#fin_price,#fin_qty,#fin_spi').val('');
        $('#fin_cat_id,#fin_sub_cat_id,#fin_unit_id,#fin_weight_id,#fin_location_id').val('').trigger('change');
    });

    $(document).on('change', '#type_id', function(){ showByType(); });
    $(document).on('change', '#fin_cat_id', function(){ filterFinSubCats(); });

    $(document).on('input', '#payment', function(){
        this.value = this.value.replace(/[^0-9.]/g,'').replace(/(\..*)\./g,'$1');
        calcBalance();
    });

    $(document).on('change', '#currency_id', function(){
        $.ajax({
            url: '{{ route('get.ex_rate') }}',
            type: 'GET',
            data: { currency_id: $(this).val() },
            success: function(value){
                $("#ex_rate").val(value);
            }
        });

        if($(this).val() != 1) $("#ex_rate_text_box").show();
        else $("#ex_rate_text_box").hide();
    });

    $('#invoiceForm').on('submit', function(e){
        if(items.length === 0){
            e.preventDefault();
            alert('Please add at least one item!');
            return false;
        }
        calcTotal();
        rebuildHiddenInputs();
        return true;
    });

    $(function(){
        showByType();
        renderTable();
        calcBalance();

        if($('#currency_id').val() != 1) $('#ex_rate_text_box').show();

        // Load current type (bill type) UI
        $('#type_id').trigger('change');
    });
</script>
@endsection