@extends('layouts.admin.base-dashboard')
@section('title', 'Edit Delivery Order')

@section('content')
<div class="card">
    <form action="{{ route('delivery-orders.update', $trx->id) }}" method="POST" id="doForm" class="form-horizontal needs-validation">
        @csrf
        @method('PUT')
        <h5 class="card-header">Edit Delivery Order</h5>
        <div class="card-body">
            <div class="form-group row">
                <label class="control-label text-right col-md-2">Cabang <span class="text-danger">*</span></label>
                <div class="col-md-4">
                    <select name="branch_id" id="branch_id" class="form-control select2" required>
                        <option value="">-- Pilih Cabang --</option>
                        @foreach ($branches as $b)
                            <option value="{{ $b->id }}" {{ $trx->branch_id == $b->id ? 'selected' : '' }}>{{ $b->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <hr>
            <div>
                <table class="table table-bordered" id="productsTable">
                    <thead>
                        <tr>
                            <th>Produk</th>
                            <th>Harga</th>
                            <th>Qty</th>
                            <th>Diskon</th>
                            <th>Subtotal</th>
                            <th>
                                <button type="button" class="btn btn-success btn-sm text-white" id="addRow"><i class="la la-plus text-white"></i></button>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($trx->items as $idx => $item)
                        <tr>
                            <td>
                                <select class="form-control select2 product_select" name="products[{{ $idx }}][product_id]" required data-old="{{ $item->product_id }}">
                                    <option value="">-- Pilih Produk --</option>
                                    <!-- Opsi akan diisi via JS AJAX on page load/branch change -->
                                </select>
                            </td>
                            <td><input type="number" name="products[{{ $idx }}][price]" class="form-control price" min="0" required value="{{ $item->price }}" readonly></td>
                            <td><input type="number" name="products[{{ $idx }}][qty]" class="form-control qty" min="1" required value="{{ $item->qty }}"></td>
                            <td><input type="number" name="products[{{ $idx }}][discount]" class="form-control discount" min="0" value="{{ $item->discount }}"></td>
                            <td><input type="text" class="form-control subtotal" readonly value="{{ ($item->price - $item->discount) * $item->qty }}"></td>
                            <td>
                                <button type="button" class="btn btn-danger btn-sm text-white removeRow"><i class="la la-trash text-white"></i></button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4" class="text-end">Total</td>
                            <td colspan="2"><input type="text" id="total" class="form-control" readonly></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="card-footer">
            <button type="submit" class="btn btn-primary btn-rounded text-white">
                <i class="la la-save"></i> Update
            </button>
            <a href="{{ route('delivery-orders.index') }}" class="btn btn-info btn-rounded text-white">
                <i class="la la-chevron-left text-white"></i> Back
            </a>
        </div>
    </form>
</div>
@endsection

@push('script')
<script>
$(function(){
    $('.select2').select2();

    function recalc() {
        let total = 0;
        $('#productsTable tbody tr').each(function() {
            let row = $(this);
            let price = parseInt(row.find('.price').val() || 0);
            let qty = parseInt(row.find('.qty').val() || 0);
            let disc = parseInt(row.find('.discount').val() || 0);
            let sub = (price - disc) * qty;
            if (sub < 0) sub = 0;
            row.find('.subtotal').val(sub);
            total += sub;
        });
        $('#total').val(total);
    }

    function setProductOptions(productSelect, products, selectedId = null) {
        let options = '<option value="">-- Pilih Produk --</option>';
        products.forEach(function(p) {
            options += `<option value="${p.id}" data-price="${p.price}" data-stock="${p.stock}"${(selectedId == p.id ? ' selected' : '')}>${p.text}</option>`;
        });
        productSelect.html(options).trigger('change');
    }

    // Fetch products by branch and update all product select
    function updateAllProductOptions(selectedOld = {}) {
        let branchId = $('#branch_id').val();
        if(!branchId) {
            $('.product_select').each(function(){
                setProductOptions($(this), []);
                $(this).closest('tr').find('.price').val('');
            });
            return;
        }
        $.get("{{ route('delivery-orders.products-by-branch') }}", { branch_id: branchId }, function(products){
            $('.product_select').each(function(){
                let oldSelected = $(this).data('old') || $(this).val();
                setProductOptions($(this), products, oldSelected);
                // Kalau di-edit, harga akan auto update di event change (lihat bawah)
            });
        });
    }

    // On branch change: update all product selects
    $('#branch_id').change(function() {
        // Clear data-old, force select ulang jika branch berubah
        $('.product_select').each(function() {
            $(this).removeData('old').val('');
        });
        updateAllProductOptions();
    });

    // On page load: prefill options sesuai branch & item
    updateAllProductOptions();

    // Saat produk dipilih, isi harga
    $('#productsTable').on('change', '.product_select', function(){
        let price = $(this).find(':selected').data('price') || 0;
        let stock = $(this).find(':selected').data('stock') || 0;
        $(this).closest('tr').find('.price').val(price).trigger('input');
        // Optional: info stok
        // alert('Stok produk di cabang ini: ' + stock);
    });

    $('#productsTable').on('input change', '.price, .qty, .discount', function() {
        recalc();
    });

    // Add Row
    $('#addRow').click(function() {
        let i = $('#productsTable tbody tr').length;
        let branchId = $('#branch_id').val();
        let row = `<tr>
            <td>
                <select class="form-control select2 product_select" name="products[${i}][product_id]" required>
                    <option value="">-- Pilih Produk --</option>
                </select>
            </td>
            <td><input type="number" name="products[${i}][price]" class="form-control price" min="0" required readonly></td>
            <td><input type="number" name="products[${i}][qty]" class="form-control qty" min="1" required></td>
            <td><input type="number" name="products[${i}][discount]" class="form-control discount" min="0" value="0"></td>
            <td><input type="text" class="form-control subtotal" readonly></td>
            <td><button type="button" class="btn btn-danger btn-sm removeRow"><i class="la la-trash"></i></button></td>
        </tr>`;
        $('#productsTable tbody').append(row);
        $('.select2').select2();
        // Isi select produk via AJAX
        if(branchId) {
            $.get("{{ route('delivery-orders.products-by-branch') }}", { branch_id: branchId }, function(products){
                setProductOptions($('#productsTable tbody tr:last .product_select'), products);
            });
        }
    });

    // Remove row
    $('#productsTable').on('click', '.removeRow', function() {
        $(this).closest('tr').remove();
        recalc();
    });

    recalc();
});
</script>
@endpush