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

@section('content')
<div class="card">
    <form action="{{ route('delivery-orders.store') }}" method="POST" id="doForm" class="form-horizontal needs-validation">
        @csrf
        <h5 class="card-header">Create 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 $branch)
                            <option value="{{ $branch->id }}">{{ $branch->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>
                        <tr>
                            <td>
                                <select class="form-control select2 product_select" name="products[0][product_id]" required>
                                    <option value="">-- Pilih Produk --</option>
                                </select>
                            </td>
                            <td><input type="number" name="products[0][price]" class="form-control price" min="0" required readonly></td>
                            <td><input type="number" name="products[0][qty]" class="form-control qty" min="1" required></td>
                            <td><input type="number" name="products[0][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 text-white removeRow"><i class="la la-trash text-white"></i></button></td>
                        </tr>
                    </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 btn-sm tex-white">
                <i class="la la-save text-white"></i> Simpan
            </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) {
        let options = '<option value="">-- Pilih Produk --</option>';
        products.forEach(function(p) {
            options += `<option value="${p.id}" data-price="${p.price}" data-stock="${p.stock}">${p.text}</option>`;
        });
        productSelect.html(options).trigger('change');
    }

    // Fetch products by branch AJAX
    $('#branch_id').change(function() {
        let branchId = $(this).val();
        if(!branchId) {
            // Kosongkan produk
            $('.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){
            // Untuk semua row, update produk
            $('.product_select').each(function(){
                setProductOptions($(this), products);
                $(this).closest('tr').find('.price').val('');
            });
        });
    });

    // Produk select, isi harga otomatis
    $('#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');
        // Optionally show stock info to user
        // alert('Stok produk di cabang ini: ' + stock);
    });

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

    $('#addRow').click(function() {
        let i = $('#productsTable tbody tr').length;
        let branchId = $('#branch_id').val();
        // Kosongkan select dulu, lalu isi via AJAX
        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();
        if(branchId) {
            $.get("{{ route('delivery-orders.products-by-branch') }}", { branch_id: branchId }, function(products){
                setProductOptions($('#productsTable tbody tr:last .product_select'), products);
            });
        }
    });

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

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