@extends('layouts.app')

@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="row tablerow">
                <div class="col-md-12">
                    @php
                        $page_name = 'Hr > Employee Attendance';
                        $page_number = 1;
                    @endphp
                    @include('layouts.table_top')
                </div>

                <div class="col-md-12">
                    <div class="left-card">
                        <form action="{{ route('employee_attandance.store') }}" method="POST" id="ajax_form_data">
                            @csrf
                            <div class="panel-body">
                                <div class="row g-3 align-items-end mb-2">

                                    {{-- Mark as Holiday --}}
                                    <div class="col-md-2">
                                        <button type="button" class="btn btn-warning w-100" id="save_as_holiday">
                                            Mark As Holiday
                                        </button>
                                    </div>

                                    {{-- Department --}}
                                    <div class="col-md-3">
                                        <label for="department_id" class="form-label">Department</label>
                                        <select class="form-select" name="department_id" id="department_id">
                                            <option value="">All</option>
                                            @foreach ($departments as $d)
                                                <option value="{{ $d->id }}">{{ $d->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- Employee --}}
                                    <div class="col-md-4">
                                        <label for="employee_id" class="form-label">Employee Name & ID</label>
                                        <select class="form-select selectpicker" data-live-search="true" name="employee_id"
                                            id="employee_id">
                                            <option value="">All</option>
                                            @foreach ($employees as $employee)
                                                <option value="{{ $employee->id }}">
                                                    {{ $employee->name }} - {{ $employee->employee_id }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- Date --}}
                                    <div class="col-md-2">
                                        <label for="filter_date" class="form-label">Date</label>
                                        <input type="date" class="form-control" name="date" id="filter_date"
                                            value="{{ $date }}">
                                    </div>

                                    {{-- Filter button --}}
                                    <div class="col-md-1">
                                        <button type="button" class="btn btn-primary w-100" id="filter">Filter</button>
                                    </div>

                                </div>

                            </div>

                            <div class="table-responsive" style="padding:0;">
                                <table class="table table-bordered" style="width:100%;">
                                    <thead>
                                        <tr>
                                            <th width="1%" class="text-center">SL</th>
                                            <th class="text-center">Fingerprint/Emp No.</th>
                                            <th class="text-center">Employee Name & ID</th>
                                            <th class="text-center" colspan="4">Attendance</th>
                                            <th class="text-center">In Time</th>
                                            <th class="text-center">Out Time</th>
                                            <th class="text-center">Note</th>
                                        </tr>
                                    </thead>

                                    {{-- tbody is initially empty; we fill via AJAX on page load --}}
                                    <tbody id="attendance_tbody"></tbody>
                                </table>
                            </div>

                            {{-- Keep selected date for POST (kept in sync by JS) --}}
                            <input type="hidden" name="date" id="post_date" value="{{ $date }}">

                            <div class="col-12 d-flex justify-content-end">
                                <button type="submit" class="btn primary-button mt-3 mr-2">Save</button>
                            </div>

                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        (function($) {
            function currentParams() {
                return {
                    department_id: $('#department_id').val() || '',
                    employee_id: $('#employee_id').val() || '',
                    date: $('#filter_date').val() || ''
                };
            }

            function loadRows() {
                const params = currentParams();

                // keep hidden post date synced
                $('#post_date').val(params.date);

                $.ajax({
                    url: "{{ route('employee_attandance.rows') }}",
                    type: "GET",
                    data: params,
                    beforeSend: function() {
                        $('#filter').prop('disabled', true).text('Loading...');
                    },
                    success: function(html) {
                        $('#attendance_tbody').html(html);
                        if ($.fn.selectpicker) $('.selectpicker').selectpicker('refresh');
                    },
                    complete: function() {
                        $('#filter').prop('disabled', false).text('Filter');
                    },
                    error: function(xhr) {
                        alert('Failed to load rows: ' + (xhr.responseJSON?.message || xhr.statusText));
                    }
                });
            }

            // initial load (AJAX rows on page load)
            $(document).ready(function() {
                loadRows();
            });

            // explicit filter button
            $(document).on('click', '#filter', function(e) {
                e.preventDefault();
                loadRows();
            });

            // Enter triggers filter
            $(document).on('keydown', '#filter_date, #employee_id, #department_id', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    loadRows();
                }
            });

            // Mark-as-holiday toggles current rendered rows
            $(document).on('click', '#save_as_holiday', function(e) {
                e.preventDefault();
                $('#attendance_tbody .holiday').prop('checked', true);
            });

        })(jQuery);
    </script>
@endpush