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

@section('content')
@if (session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif
@if (session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
@endif

<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span>🧾 List Delivery Order</span>
        <a href="{{ route('delivery-orders.create') }}" class="btn btn-success btn-sm text-white">
            <i class="la la-plus text-white"></i> Add
        </a>
    </div>
    <div class="card-body">
        <form id="filterForm" class="mb-3 d-flex gap-2 align-items-end">
            <div>
                <label for="branch_filter">Cabang</label>
                <select id="branch_filter" class="form-control" style="min-width:180px">
                    <option value="">Semua Cabang</option>
                    @foreach ($branches as $branch)
                        <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                    @endforeach
                </select>
            </div>
        </form>
        <div class="table-responsive">
            <table id="table-orders" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Branch</th>
                        <th>Total</th>
                        <th>Discount</th>
                        <th>User</th>
                        <th>Date</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {{-- DataTable AJAX --}}
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('script')
<script>
$(function() {
    let table = $('#table-orders').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route('delivery-orders.index') }}',
            data: function(d) {
                d.branch_id = $('#branch_filter').val();
            }
        },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'branch.name', name: 'branch.name', defaultContent: '-' },
            { data: 'total_amount', name: 'total_amount', render: $.fn.dataTable.render.number(',', '.', 0, 'Rp ') },
            { data: 'discount_total', name: 'discount_total', render: $.fn.dataTable.render.number(',', '.', 0, 'Rp ') },
            { data: 'user.name', name: 'user.name', defaultContent: '-' },
            { data: 'created_at', name: 'created_at' },
            { data: 'action', orderable: false, searchable: false }
        ]
    });

    $('#branch_filter').change(function() {
        table.ajax.reload();
    });
});
</script>
@endpush