@extends('layouts.app')

@push('css')
@endpush

@section('title', 'Attendance Tracking')

@section('panel-actions')
        <div class="row m-0">
            <select id="punch_employee_id" class="form-control form-control-sm mr-2" style="width: 200px;">
                <option value="">Quick Punch...</option>
                @foreach($employees as $e)
                    <option value="{{ $e->id }}">{{ $e->name }}</option>
                @endforeach
            </select>
            <button class="btn btn-primary btn-sm" id="punchBtn">
                <i class="fas fa-clock mr-1"></i> Punch
            </button>
        </div>
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <!-- Filter Section -->
        <div class="card card-primary card-outline">
            <div class="card-header">
                <h3 class="card-title fw-bold"><i class="fas fa-filter mr-2"></i>Filter Attendance</h3>
            </div>
            <div class="card-body">
                <form id="filterForm" class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Start Date</label>
                            <input type="date" id="start_date" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>End Date</label>
                            <input type="date" id="end_date" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Employee</label>
                            <select id="employee_id_filter" class="form-control select2-ajax" style="width: 100%;">
                                <option value="">All Employees</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3" style="margin-top: 32px;">
                        <button type="button" id="applyFilter" class="btn btn-primary">
                            <i class="fas fa-filter mr-1"></i> Filter
                        </button>
                        <button type="button" id="resetFilter" class="btn btn-default ml-1">
                            <i class="fas fa-undo"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Table Section -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title fw-bold"><i class="fas fa-list mr-2"></i>Attendance Records</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered table-striped w-100" id="attendanceTable">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Employee</th>
                                <th>Punch In</th>
                                <th>Punch Out</th>
                                <th>Duration (H:M)</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function() {
    $('.select2-ajax').select2({
        theme: 'bootstrap4',
        ajax: {
            url: "{{ route('employees.search') }}",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return { term: params.term };
            },
            processResults: function (data) {
                return { results: data.results };
            },
            cache: true
        },
        placeholder: 'Search for an employee...',
        allowClear: true
    });

    var table = $('#attendanceTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('attendances.data') }}",
            data: function (d) {
                d.start_date = $('#start_date').val();
                d.end_date = $('#end_date').val();
                d.employee_id = $('#employee_id_filter').val();
            }
        },
        columns: [
            {data: 'date', name: 'date'},
            {data: 'employee', name: 'employee'},
            {data: 'punch_in', name: 'punch_in'},
            {data: 'punch_out', name: 'punch_out'},
            {data: 'duration', name: 'duration', orderable: false, searchable: false}
        ],
        scrollX: true,
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search attendance records...",
            paginate: {
                previous: '<i class="fas fa-chevron-left"></i>',
                next: '<i class="fas fa-chevron-right"></i>'
            }
        },
        drawCallback: function() {
            $('.dataTables_paginate > .pagination').addClass('pagination-sm');
        }
    });

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

    $('#resetFilter').click(function(){
        $('#filterForm')[0].reset();
        $('#employee_id_filter').val(null).trigger('change');
        table.draw();
    });

    $('#punchBtn').click(function() {
        let employee_id = $('#punch_employee_id').val();
        if(!employee_id) {
            Swal.fire({
                title: 'Error',
                text: 'Please select an employee',
                icon: 'error',
                confirmButtonClass: 'btn btn-primary'
            });
            return;
        }

        $.post("{{ route('attendances.punch') }}", {
            _token: "{{ csrf_token() }}",
            employee_id: employee_id
        }, function(response) {
            Swal.fire({
                title: 'Success',
                text: response.success,
                icon: 'success',
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
            });
            table.draw();
        }).fail(function() {
            Swal.fire({
                title: 'Error',
                text: 'Something went wrong',
                icon: 'error',
                confirmButtonClass: 'btn btn-primary'
            });
        });
    });
});
</script>
@endpush