@extends('layouts.master')

@section('title', __('UserAttendances'))
@section('content_title', __('UserAttendances'))
@section('content_summary', 'UserAttendance summary')
@section('main_content')


<div class="card-body">
    <form id="student_schedule" action="{{ route('hrm.user_attendances.takeAttendance') }}" method="POST">
        @csrf
        <div class="row">
            <div class="col col-md-3 mb-3">
                <label for="academic_year_id" class="form-label">Select Academic Year</label>
                <select class="form-select form-select-sm select_academic_year_id" name="academic_year_id" id="academic_year_id">
                    <option value="" selected>Please Select</option>
                    @foreach ($academicYears as $item)
                        <option value="{{ $item->id }}">{{ $item->academic_year }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col col-md-3 mb-3">
                <label for="academic_class_id" class="form-label">Select Academic Class</label>
                <select class="form-select form-select-sm select_academic_class_id" name="academic_class_id" id="academic_class_id">
                    <option value="" selected>Please Select</option>
                    @foreach ($academicClass as $item)
                        <option value="{{ $item->id }}">{{ $item->academic_class }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col col-md-3 mb-3">
                <label for="section_id" class="form-label">Section</label>
                <select class="form-select form-select-sm select_section_id" name="section_id" id="section_id">
                    <option value="" selected>Please Select</option>
                    @foreach ($section as $item)
                        <option value="{{ $item->id }}">{{ $item->section_name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col col-md-3 mb-3">
                <label for="group_id" class="form-label">Group</label>
                <select class="form-select form-select-sm select_group_id" name="group_id" id="group_id">
                    <option value="" selected>Please Select</option>
                    @foreach ($group as $item)
                        <option value="{{ $item->id }}">{{ $item->group_name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="col col-md-3 mb-3">
         <!-- Attendance Date Field (Initially Hidden) -->
         <div id="attendance_date_field" class="mb-3" style="display: none;">
            <label for="attendance_date" class="form-label">Attendance Date</label>
            <input type="date" id="attendance_date" name="attendance_date" class="form-control form-control-sm" value="{{ date('Y-m-d') }}">
        </div>
    </div>

        <div class="text-center mt-2">
            <button type="submit" id="search-button" class="btn btn-primary btn-hover-shine btn-lg">Search</button>
        </div>
    </form>
</div>
<!-- Attendance Table -->
<div class="main-card mb-3 card" id="attendance_table" style="display: none;">
    <div class="card-body">
        <ul class="nav nav-tabs">
            {{-- <li class="nav-item">
                <a data-bs-toggle="tab" href="#tab-eg10-0" id="home-tab" class="mb-2 me-2 btn btn-shadow-primary btn-primary">
                    Home
                </a>
            </li> --}}
            <li class="nav-item">
                <a data-bs-toggle="tab" href="#tab-eg10-1" id="take-attendance-tab" class="mb-2 me-2 btn btn-shadow-danger btn-success">
                    Take Attendance
                </a>
            </li>
        </ul>



        <!-- Home Table -->


        <!-- Take Attendance Table -->
        <div id="take_attendance_data" style="display: none;">
            <table style="width: 100%" class="table table-hover table-striped table-bordered table-custom-design">
                <thead>
                    <tr>
                        <th>{{ __('Name') }}</th>
                        {{-- <th>{{ __('Phone') }}</th>

                        <th>{{ __('Present') }}</th>
                        <th>{{ __('Late') }}</th>
                        <th>{{ __('Absent') }}</th> --}}
                    </tr>
                </thead>
                <tbody id="attendance_data">
                    {{-- Data will be loaded here dynamically --}}
                </tbody>
            </table>
        </div>
    </div>
</div>

@push('script')
<script>
    $('#student_schedule').on('submit', function(e) {
        e.preventDefault(); // Prevent form submission

        // Get the selected values
        var academicYearId = $('#academic_year_id').val();
        var academicClassId = $('#academic_class_id').val();
        var sectionId = $('#section_id').val();
        var groupId = $('#group_id').val();

        // Check if at least one field is selected
        if (!academicYearId && !academicClassId && !sectionId && !groupId) {
            alert('Please select at least one field.');
            return false;
        }

        $.ajax({
            url: '{{ route("hrm.user_attendances.takeAttendance") }}',
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                // Clear previous results
                $('#attendance_data').empty();

                // Insert new data
                $('#attendance_data').html(response.takeData);

                // Show the table only when there's data
                $('#attendance_table').show();
            },
            error: function(xhr) {
                console.log(xhr.responseText);
                alert('Error: ' + xhr.responseText);
            }
        });
    });



</script>




@endpush

<style>
    .table-custom-design {
        border: 2px solid #cbe2d0;
        background-color: #f8f9fa;
    }

    .table-custom-design th {
        background-color: #6f8173;
        color: #fff;
        text-align: center;
    }

    .table-custom-design td {
        text-align: center;
        vertical-align: middle;
    }
</style>