@extends('Branch.layout')

@section('content')

<div class="d-flex justify-content-between mb-3">
    <h5>Payout Preview</h5>
    <a href="{{ route('branch.generate_payment') }}" class="btn btn-success">
        Generate Payout
    </a>
</div>

<div class="card p-3">

    <div class="card p-3 mb-3">

        <div class="row g-3 align-items-end">

            <div class="col-md-2">
                <label class="form-label">Show</label>
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
            </div>

            <div class="col-md-3">
                <label class="form-label">Branch</label>
                <select id="branchFilter" class="form-select">
                    <option value="">All Branch</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->branch_name }}">
                            {{ $branch->branch_name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-3">
                <label class="form-label">Month</label>
                <select id="monthFilter" class="form-select">

                    @for($m = 1; $m <= 12; $m++)
                        <option value="{{ $m }}"
                            {{ $m == now()->month ? 'selected' : '' }}>
                            {{ date('F', mktime(0,0,0,$m,1)) }}
                        </option>
                    @endfor

                </select>
            </div>

            <div class="col-md-2">
                <label class="form-label">Year</label>
                <select id="yearFilter" class="form-select">

                    @for($y = now()->year; $y >= now()->year - 5; $y--)
                        <option value="{{ $y }}"
                            {{ $y == now()->year ? 'selected' : '' }}>
                            {{ $y }}
                        </option>
                    @endfor

                </select>
            </div>

        </div>

    </div>

    <div class="table-responsive">

        <table class="table table-bordered" id="payoutTable">

            <thead>
                <tr>
                    <th>Sno</th>
                    <th>Month</th>
                    <th>Branch</th>
                    <th>Staff Count</th>
                    <th>Payout</th>
                    <th>View</th>
                </tr>
            </thead>

        </table>

    </div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
$(document).ready(function () {

    var table = $('#payoutTable').DataTable({

        processing: true,
        serverSide: true,

        pageLength: $('#pageLength').val(),

        ajax: {
            url: "{{ route('branch.payout.preview.data') }}",
            data: function (d) {
                d.branch = $('#branchFilter').val();
                d.month  = $('#monthFilter').val();
                d.year   = $('#yearFilter').val();
            }
        },

        ordering: false,

        columns: [
            { data: 'DT_RowIndex', searchable:false, orderable:false },
            { data: 'month' },
            { data: 'branch' },
            { data: 'staff_count' },
            { data: 'payout' },
            { data: 'view', searchable:false, orderable:false }
        ]
    });

    $('#branchFilter, #monthFilter, #yearFilter').change(function () {
        table.ajax.reload();
    });

    $('#pageLength').change(function () {
        table.page.len($(this).val()).draw();
    });

});
</script>

@endsection