@extends('Admin.layout')

@section('content')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <div class="card">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="d-flex align-items-center gap-2">

                <a href="{{ route('payout_preview', [
        'month' => $month,
        'year' => $year
    ]) }}" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">

                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">

                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />

                    </svg>

                </a>

                <h5 class="mb-0">
                    {{ $branch->branch_name }} Branch
                    - {{ date('F', mktime(0, 0, 0, $month, 1)) }}
                </h5>

            </div>
            <div class="d-flex gap-2">
                <button type="button" id="printBtn" class="btn btn-label-secondary">Print</button>
                <button type="button" id="exportBtn" class="btn btn-label-secondary">Export</button>
            </div>
        </div>

        <div class="card-body">

            <table class="table table-bordered" id="staffPayoutTable">
                <div class="row mb-3">

                    <div class="col-md-3">
                        <label>From Date</label>
                        <input type="date" id="from_date"
                            value="{{ Carbon\Carbon::create(now()->year, $month, 1)->startOfMonth()->format('Y-m-d') }}"
                            class="form-control">
                    </div>

                    <div class="col-md-3">
                        <label>To Date</label>
                        <input type="date" id="to_date"
                            value="{{ Carbon\Carbon::create(now()->year, $month, 1)->endOfMonth()->format('Y-m-d') }}"
                            class="form-control">
                    </div>

                    <div class="col-md-2">
                        <label>Year</label>
                        <select id="year" class="form-control">
                            @for($y = date('Y'); $y >= 2023; $y--)
                                <option value="{{ $y }}" {{ $y == date('Y') ? 'selected' : '' }}>
                                    {{ $y }}
                                </option>
                            @endfor
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label>Staff Name</label>
                        <input type="text" id="staff_name" placeholder="Search Staff" class="form-control">
                    </div>

                    <div class="col-md-1 d-flex align-items-end">
                        <button id="resetBtn" class="btn btn-outline-secondary w-100">
                            Reset
                        </button>
                    </div>

                </div>
                <thead>
                    <tr>
                        <th>Sno</th>
                        <th>Staff Name</th>
                        {{-- <th>Attendance Date</th> --}}
                        <th>Salary</th>
                        <th>Total Working Hours</th>
                        <th>Hour Based Salary</th>
                        <th>Per Day Salary</th>
                        <th>Paid Leave Days</th>
                        <th>Paid Leave Amt</th>

                        <th>Present Days</th>
                        <th>Half Day</th>
                        <th>Full Day</th>
                        <th>One & Half Day</th>
                        <th>Double Duty</th>
                        <th>Hour Based</th>
                        <th>Day Based Salary</th>
                        <th>Advance</th>
                        <th>Balance</th>
                        <th>View</th>
                    </tr>
                </thead>
            </table>

        </div>
    </div>




    <script>
        $(function () {

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

                processing: true,
                serverSide: true,
                lengthChange: true,
                lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],

                ajax: {
                    url: "{{ route('view_payout_preview_data', [$branch->id, $month]) }}",
                    data: function (d) {
                        d.from_date = $('#from_date').val();
                        d.to_date = $('#to_date').val();
                        d.year = $('#year').val();
                        d.staff_name = $('#staff_name').val();
                    }
                },
                columnDefs: [
                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }
                ],

                // columns: [
                //     { data: 'DT_RowIndex', orderable: false, searchable: false },
                //     { data: 'staff_name' },
                //     { data: 'attendance_date' },
                //     { data: 'salary' },
                //     {
                //         data: 'total_working_hours',
                //         defaultContent: '0 hrs 00 mins'
                //     },
                //     { data: 'hour_based_salary', defaultContent: '0' },
                //     { data: 'day_based_salary', defaultContent: '0' },
                //     { data: 'advance' },
                //     { data: 'balance' },
                //     { data: 'view', orderable: false, searchable: false }
                // ]

                columns: [
                    { data: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'staff_name' },
                    // { data: 'attendance_date' },
                    { data: 'salary' },
                    {
                        data: 'total_working_hours',
                        defaultContent: '0 hrs 00 mins'
                    },
                    {
                        data: 'hour_based_salary',
                        defaultContent: '0.00'
                    },
                    {
                        data: 'per_day_salary',
                        defaultContent: '0.00'
                    },
                    {
                        data: 'paid_leave_days',
                        defaultContent: '0'
                    },
                    {
                        data: 'paid_leave_amount',
                        defaultContent: '0.00'
                    },
                    {
                        data: 'present_days',
                        defaultContent: '0',
                        searchable: false
                    },
                    {
                        data: 'half_day_count',
                        defaultContent: '0',
                        searchable: false
                    },
                    {
                        data: 'full_day_count',
                        defaultContent: '0',
                        searchable: false
                    },
                    {
                        data: 'one_half_day_count',
                        defaultContent: '0',
                        searchable: false
                    },
                    {
                        data: 'double_duty_count',
                        defaultContent: '0',
                        searchable: false
                    },
                    {
                        data: 'hour_based_count',
                        defaultContent: '0',
                        searchable: false
                    },
                    {
                        data: 'day_based_salary',
                        defaultContent: '0.00'
                    },
                    {
                        data: 'advance',
                        defaultContent: '0.00'
                    },
                    {
                        data: 'balance',
                        defaultContent: '0.00'
                    },
                    {
                        data: 'view',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            $('#from_date, #to_date, #year').on('change', function () {
                table.ajax.reload();
            });

            let staffSearchTimer;
            $('#staff_name').on('keyup', function () {
                clearTimeout(staffSearchTimer);
                staffSearchTimer = setTimeout(() => table.ajax.reload(), 400);
            });

            $('#resetBtn').on('click', function () {
                $('#from_date').val("{{ now()->startOfMonth()->format('Y-m-d') }}");
                $('#to_date').val("{{ now()->endOfMonth()->format('Y-m-d') }}");
                $('#year').val("{{ now()->year }}");
                $('#staff_name').val('');
                table.ajax.reload();
            });

            $('#exportBtn').on('click', function () {
                const params = new URLSearchParams({
                    from_date: $('#from_date').val() || '',
                    to_date: $('#to_date').val() || '',
                    year: $('#year').val() || '',
                    staff_name: $('#staff_name').val() || ''
                });
                window.location.href = "{{ route('view_payout_preview_export', [$branch->id, $month]) }}?" + params.toString();
            });

            $('#printBtn').on('click', function () {
                const params = new URLSearchParams({
                    from_date: $('#from_date').val() || '',
                    to_date: $('#to_date').val() || '',
                    year: $('#year').val() || '',
                    staff_name: $('#staff_name').val() || ''
                });
                window.open("{{ route('view_payout_preview_print', [$branch->id, $month]) }}?" + params.toString(), '_blank');
            });

        });
    </script>
    {{--
    <script>
        $(function () {

            $(function () {

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

                    processing: true,
                    serverSide: true,

                    ajax: {
                        url: "{{ route('view_payout_preview_data', [$branch->id, $month]) }}",
                        data: function (d) {
                            d.from_date = $('#from_date').val();
                            d.to_date = $('#to_date').val();
                            d.year = $('#year').val();
                            d.staff_name = $('#staff_name').val();
                        }
                    },

                    columns: [
                        { data: 'DT_RowIndex', orderable: false, searchable: false },
                        { data: 'staff_name' },
                        { data: 'attendance_date' },
                        { data: 'salary' },
                        { data: 'advance' },
                        { data: 'balance' },
                        { data: 'view', orderable: false, searchable: false }
                    ]
                });

                $('#searchBtn').click(function () {
                    table.draw();
                });

            });

        });
    </script> --}}

@endsection