@extends('layouts.admin.base-dashboard')

@section('title', 'List Purchase Order')

@section('content')
    @include('layouts.admin.include.message')

    {{-- Filter Card --}}
    <div class="card mb-4">
        <div class="card-body">
            <form id="filterForm" class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label for="branch_filter" class="form-label">Cabang</label>
                    <select id="branch_filter" name="branch_id" class="form-control">
                        <option value="">Semua Cabang</option>
                        @foreach ($branches as $branch)
                            <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="date_from" class="form-label">Dari Tanggal</label>
                    <input type="text" id="date_from" name="date_from" class="form-control datepicker" autocomplete="off">
                </div>
                <div class="col-md-3">
                    <label for="date_to" class="form-label">Sampai Tanggal</label>
                    <input type="text" id="date_to" name="date_to" class="form-control datepicker" autocomplete="off">
                </div>
                <div class="col-md-3">
                    <button type="button" id="filterBtn" class="btn btn-primary w-100 btn-sm">Filter</button>
                </div>
            </form>
        </div>
    </div>

    {{-- Table Card dengan tombol Add --}}
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">List Purchase Order</h5>
            <a href="{{ route('supplier-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">
            <table id="po-table" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>PO Number</th>
                        <th>Cabang</th>
                        <th>Order Date</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection

@push('script')
<script>
    $(function() {
        // Inisialisasi datepicker
        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true
        });

        // Setup CSRF token untuk AJAX
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Inisialisasi DataTable
        var table = $('#po-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('supplier-orders.index') }}",
                data: function(d) {
                    d.branch_id = $('#branch_filter').val();
                    d.date_from = $('#date_from').val();
                    d.date_to   = $('#date_to').val();
                }
            },
            columns: [
                {
                    data: 'DT_RowIndex',
                    name: '',
                    orderable: false,
                    searchable: false,
                    width: '5%'
                },
                { data: 'po_number', name: 'po_number' },
                { data: 'branch',    name: 'branch.name' },
                { data: 'order_date', name: 'order_date' },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ],
            order: [[3, 'desc']]
        });

        // Reload DataTable saat tombol Filter diklik
        $('#filterBtn').on('click', function() {
            table.ajax.reload();
        });
    });
</script>
@endpush