@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">WORKFLOW WHATSAPP</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('whatsapp_store') }}" method="POST" id="presenceForm">
                            @csrf
                            <!-- Date Field -->
                            <input type="hidden" name="agent_id" id="user_id">
                            <!-- 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>

                            <!-- 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