@extends('Branch.layout')

@section('content')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <style>
        .card {
            border-radius: 12px;
        }

        .card-header {
            border-radius: 12px 12px 0 0 !important;
        }

        .table th {
            font-weight: 600;
        }

        .border-start {
            border-left-width: 5px !important;
        }
    </style>
    <div class="container-fluid">

        <div class="card">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">

                <h5 class="mb-0">
                    Attendance Details - {{ $staff->name }}
                </h5>

                <a href="{{ route('branch.view_branch', $staff->branch_id) }}" class="btn btn-light btn-sm">
                    <i class="bi bi-arrow-left"></i> Back
                </a>

            </div>

            <div class="card-body">
                <div class="row mb-3">

                    <div class="col-md-3">
                        <label>From Date</label>
                        <input type="date" id="from_date" class="form-control">
                    </div>

                    <div class="col-md-3">
                        <label>To Date</label>
                        <input type="date" id="to_date" class="form-control">
                    </div>

                    <div class="col-md-2 mt-4">
                        <button type="button" id="filter" class="btn btn-primary">
                            Filter
                        </button>
                    </div>

                    <div class="col-md-2 mt-4">
                        <button type="button" id="reset" class="btn btn-secondary">
                            Reset
                        </button>
                    </div>

                </div>
                <div class="table-responsive">
                    <table class="table table-bordered" id="attendanceTable">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Date</th>
                                <th>Check In</th>
                                <th>Check Out</th>
                                <th>Working Hours</th>
                                <th>Status</th>
                                <th>Duty Type</th>
                                <th>Per Day Salary</th>
                            </tr>
                        </thead>
                    </table>
                </div>

            </div>
        </div>

    </div>


    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <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 = $('#attendanceTable').DataTable({
                processing: true,
                serverSide: true,
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ],
                ajax: {
                    url: "{{ route('branch.view_staff_attendance_data', $staff->id) }}",
                    data: function (d) {
                        d.from_date = $('#from_date').val();
                        d.to_date = $('#to_date').val();
                    }
                },

                order: [[1, 'desc']],

                columns: [
                    {
                        data: 'DT_RowIndex',
                        name: 'id',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'attendance_date',
                        name: 'attendance_date'
                    },
                    // {
                    //     data:'checkin',
                    //     name:'checkin'
                    // },
                    {
                        data: 'attendance_checkin',
                        name: 'attendance_checkin'
                    },
                    {
                        data: 'attendance_checkout',
                        name: 'attendance_checkout'
                    },
                    {
                        data: 'working_hours',
                        name: 'working_hours'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'duty_type',
                        name: 'duty_type'
                    },
                    {
                        data: 'calculated_salary',
                        name: 'calculated_salary'
                    }
                ]
            });

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

            $('#reset').click(function () {
                $('#from_date').val('');
                $('#to_date').val('');
                table.draw();
            });

        });
    </script>

@endsection