@extends('layouts.pointage-layout')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

@section('title', 'Système de Pointage - Présence CABOMA')

@section('content')
<div class="container">
    <!-- Timer Circle -->
    <div class="timer-circle">
        <span id="timer">--:--:--</span>
    </div>

    <!-- Main Title -->
    <h1 class="main-title">PRÉSENCE GANHI</h1>

    <!-- Success Message -->
    @if(session('success'))
        <div class="success-alert">
            <strong>Success!</strong> {{ session('success') }}
        </div>
    @endif

        @if(session('error'))
        <div class="error-alert">
            <strong>Error!</strong> {{ session('error') }}
        </div>
    @endif

        <!-- Registration Form -->
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6">
                <div class="form-container">
                    <form action="{{ route('pointage.store') }}" method="POST" id="presenceForm">
                        @csrf
                        <!-- Date Field -->
@php
    use Carbon\Carbon;
    $today = Carbon::now()->format('d/m/Y'); // affichage
    $todayForDb = Carbon::now()->format('Y-m-d'); // format base de données
@endphp

<div class="mb-4">
    <label for="date" class="form-label">Date</label>
    <input type="text"
        class="form-control"
        value="{{ $today }}"
        disabled>

    <!-- Champ caché pour l'enregistrement -->
    <input type="hidden" name="date" value="{{ $todayForDb }}">
</div

                        <!-- Agent Name Field -->
                        <div class="mb-4 position-relative">
                            <label for="agent_name" class="form-label">Nom prénom agent</label>
                            <input type="text"
                                class="form-control @error('agent_name') is-invalid @enderror"
                                id="agent_name"
                                name="agent_name"
                                value="{{ old('agent_name') }}"
                                placeholder="Entrez le nom complet de l'agent"
                                autocomplete="off"
                                required>
                            <input type="hidden" name="user_id" id="user_id">
                            <div id="agent_suggestions" class="list-group position-absolute w-100 z-3"></div>
                            @error('agent_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>


                        <!-- Vacation Field -->
                        <div class="mb-4">
                            <label for="vacation" class="form-label">Vacation</label>
                            <select class="form-select @error('vacation') is-invalid @enderror"
                                    id="vacation"
                                    name="vacation"
                                    required>
                                <option value="">Select</option>
                                <option value="07h-15h" >07h-15h</option>
                                <option value="10h-18h" >10h-18h</option>
                                <option value="15h-23h" >15h-23h</option>
                                <option value="23h-07h" >23h-07h</option>
                                <option value="07h-15h" >07h-15h</option>
                                <option value="supplémentaire">Heure supplémentaire</option>
                            </select>
                            @error('vacation')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Pointage Type Field -->
                        <div class="mb-4">
                            <label for="pointage" class="form-label">Pointage</label>
                            <select class="form-select @error('pointage') is-invalid @enderror"
                                    id="pointage"
                                    name="pointage"
                                    required>
                                <option value="">Select</option>
                                <option value="Absence">Absence</option>
                                <option value="Présence">Présence</option>
                                <option value="Permissionnaire">Permissionnaire</option>
                            </select>
                            @error('pointage')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Submit Button -->
                        <div class="d-grid">
                            <button type="submit" class="btn btn-register">
                                <i class="fas fa-clock me-2"></i>Enregistrer
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @endsection

@section('scripts')
<script>
    // Auto-submit form functionality (optional)
    document.getElementById('presenceForm').addEventListener('submit', function(e) {
        const submitBtn = this.querySelector('button[type="submit"]');
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Enregistrement...';
        submitBtn.disabled = true;
    });

    // Dynamic time update in form
    function setCurrentTime() {
        const now = new Date();
        const currentTime = now.toTimeString().slice(0, 5);
        // You can use this for additional time fields if needed
    }

    setCurrentTime();


    $(document).ready(function () {
    $('#agent_name').on('input', function () {
        let query = $(this).val();
        if (query.length < 2) {
            $('#agent_suggestions').empty();
            return;
        }

        $.ajax({
            url: 'agent-suggestions',
            data: { query: query },
            success: function (data) {
                let suggestions = '';
                data.forEach(function (user) {
                    suggestions += `<button type="button" class="list-group-item list-group-item-action" data-id="${user.id}" data-name="${user.name}">${user.name}</button>`;
                });
                $('#agent_suggestions').html(suggestions);
            }
        });
    });

    $('#agent_suggestions').on('click', 'button', function () {
        let name = $(this).data('name');
        let id = $(this).data('id');
        $('#agent_name').val(name);
        $('#user_id').val(id);
        $('#agent_suggestions').empty();
    });

    // Fermer les suggestions si on clique ailleurs
    $(document).on('click', function (e) {
        if (!$(e.target).closest('#agent_name, #agent_suggestions').length) {
            $('#agent_suggestions').empty();
        }
    });
});
</script>
@endsection