@extends('Admin.layout')

<style>
    .dt-search,
    .dt-length {
        display: none !important;
    }
</style>

@section('content')

<div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
    <div class="col-auto">
        <h5>
            <button type="button"
                class="btn btn-icon bg-white waves-effect me-2"
                style="box-shadow: 0px 9px 12px -2px #66328E1F;">

                <a href="{{ route('admin.dashboard') }}">
                    <svg xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="#000"
                        stroke-width="2">

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

            </button>

            Staff Currently On Break

        </h5>
    </div>
</div>

<div class="card p-0 m-2">

    <div class="row mb-3 align-items-center p-3 g-2">

        <div class="col-auto">

            <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>
                <option value="All">All</option>
            </select>

        </div>

        <div class="col d-flex justify-content-end gap-2">

            <div style="width:180px;">
                <input type="text"
                    id="searchBox"
                    class="form-control"
                    placeholder="Search Staff">
            </div>

            <button class="btn btn-primary" id="searchButton">
                Search
            </button>

        </div>

    </div>

    <div class="card-datatable table-responsive pt-0">

        <table id="dept" class="table">

           <thead>
    <tr>
        <th>SNO</th>
        <th>Staff Name</th>
        <th>Break Start Time</th>
        <th>Current Duration</th>
        <th>Expected Break Time</th>
        <th>Exceeded Time</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 () {

    let table = $('#dept').DataTable({

        processing: true,
        serverSide: true,

        ajax: {

            url: "{{ route('staff_break_history_report') }}",

            type: "GET",

            data: function (d) {

                d.search_value = $('#searchBox').val();

            }

        },

        searching: false,
        lengthChange: false,
        pageLength: 10,
        ordering: false,

       columns: [

    {
        data: 'DT_RowIndex',
        name: 'DT_RowIndex',
        searchable: false,
        orderable: false
    },

    {
        data: 'staff_name',
        name: 'staff_name'
    },

    {
        data: 'start_time',
        name: 'start_time'
    },

    {
        data: 'current_duration',
        name: 'current_duration'
    },

    {
        data: 'expected_time',
        name: 'expected_time'
    },

    {
        data: 'status',
        name: 'status',
        searchable: false,
        orderable: false
    }

]

    });

    $('#searchButton').on('click', function () {

        table.draw();

    });

    $('#searchBox').on('keyup', function () {

        table.draw();

    });

    $('#pageLength').on('change', function () {

        let length = $(this).val() === 'All'
            ? -1
            : $(this).val();

        table.page.len(length).draw();

    });

});

</script>

@endsection