@extends('Admin.layout')

@section('content')

<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">
        {{ $branch->branch_name }} Staff Attendance
    </h5>

    <a href="{{ route('view_branch',$branch->id) }}"
       class="btn btn-light btn-sm">
        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-3">
        <label>Staff Name</label>
        <input type="text" id="staff_name" class="form-control" placeholder="Search Staff">
    </div>

    <div class="col-md-3 d-flex align-items-end">
        <button class="btn btn-primary me-2" id="filter">
            Search
        </button>

        <button class="btn btn-secondary" id="reset">
            Reset
        </button>
    </div>

</div>
            <table class="table table-bordered" id="attendanceTable">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Staff Name</th>
                        <th>Attendance 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>

<script>
$(function(){

$(function(){

    var table = $('#attendanceTable').DataTable({
        processing:true,
        serverSide:true,

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

        columns:[
            {
                data:'DT_RowIndex',
                orderable:false,
                searchable:false
            },
            {
                data:'staff_name',
                name:'staff_name'
            },
            {
                data:'attendance_date',
                name:'attendance_date'
            },
            {
                data:'checkin',
                name:'checkin'
            },
            {
                data:'checkout',
                name:'checkout'
            },
            {
                data:'working_hours',
                name:'working_hours'
            },
            {
                data:'status',
                name:'status'
            },
            {
                data:'duty_type',
                name:'duty_type'
            },
            {
                data:'perday_salary',
                name:'perday_salary'
            }
        ]
    });

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

    $('#reset').click(function(){

        $('#from_date').val('');
        $('#to_date').val('');
        $('#staff_name').val('');

        table.draw();
    });

});

});
</script>

@endsection