@extends('layouts.main')
@section('title')
    Daily Report - Reports
@endsection

@section('breadcrumb')
    <li class="breadcrumb-item" aria-current="page">Reports</li>
    <li class="breadcrumb-item active" aria-current="page">Daily Report</li>
@endsection

@section('content')
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header">
                    <div class="card-title">
                        Daily Report
                    </div>
                </div>
                <div class="card-body">
                    <div class="row gy-4">
                        <div class="col-3">
                            <label for="start_date">Start Date:</label>
                            <input type="date" name="start_date" class="form-control" id="start_date"
                                   value="{{ date('Y-m-d') }}">
                        </div>
                        <div class="col-3">
                            <label for="end_date">End Date:</label>
                            <input type="date" name="end_date" class="form-control" id="end_date"
                                   value="{{ date('Y-m-d') }}">
                        </div>
                        <div class="col-3">
                            <label for="user_id">User:</label>
                            <select type="date" name="user_id" class="form-control select2" id="user_id">
                                @foreach($users as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-3">
                            <button type="button" class="btn btn-primary" id="get_report" style="margin-top: 23px">
                                Get
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card custom-card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered datatable">
                            <thead>
                            <tr>
                                <th>Sr. #</th>
                                <th>User Email</th>
                                <th>User Name</th>
                                <th>Date</th>
                                <th>Total Shift Time</th>
                                <th>Total Break Time</th>
                                <th>Total Time</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        $(document).ready(function () {
            let table = $('.datatable');

            $('#get_report').click(function () {
                let start_date = $('#start_date').val();
                let end_date = $('#end_date').val();
                let user_id = $('#user_id').val();

                if ($.fn.DataTable.isDataTable('.datatable')) {
                    $('.datatable').DataTable().destroy();
                }

                table = $('.datatable').DataTable({
                    processing: true,
                    serverSide: false,
                    dom: 'Bfrtip',
                    ajax: {
                        url: '{{ route("admin.tracker.get_report_daily") }}',
                        method: 'POST',
                        data: {
                            start_date,
                            end_date,
                            user_id
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        error: function (xhr) {
                            const errorMessage = xhr.responseJSON?.message || "An error occurred.";
                            Swal.fire({
                                title: "Error!",
                                text: errorMessage,
                                icon: "error",
                                confirmButtonText: "OK"
                            });
                        }
                    },
                    columns: [
                        {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                        {data: 'user_email', name: 'user_email'},
                        {data: 'username', name: 'username'},
                        {data: 'date', name: 'date'},
                        {data: 'total_work_time', name: 'total_work_time'},
                        {data: 'total_break_time', name: 'total_break_time'},
                        {data: 'net_time', name: 'net_time'}
                    ],

                });
            });
        });
    </script>
@endsection