@extends('layouts.correction-blade')
@section('page-title', 'Agents')

@push('styles')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endpush

@section('content')


    <form method="POST" action="{{ route('correction.store') }}">
    @csrf

    @if (session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fas fa-check-circle me-2"></i>
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

@if ($errors->any())
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-triangle me-2"></i>
        <strong>Erreur :</strong> Veuillez corriger les champs suivants :
        <ul class="mt-2 mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

                    <div class="row justify-content-center mt-4">
                        <!-- Call Form -->

                        <div class="col-lg-8">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-phone-alt me-2"></i>
                                        Corriger un traitement
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div id="alert-container"></div>
                                    <form id="call-form">


                                        <!-- Numéro -->
                                            <!-- Numéro -->
                                        <div class="mb-3">
                                            <label for="msisdn" class="form-label">Numéro de téléphone</label>
                                            <input type="tel" class="form-control" id="msisdn" name="msisdn" required>
                                        </div>

                                                                            <!-- Statut -->
                                        <div class="mb-4">
                                        <label for="statut" class="form-label">Codification</label>
                                        <select class="form-select" id="statut" name="statut" required onchange="toggleObservations()">
                                            <option value="">Sélectionnez une codification</option>
                                            <option value="Approuvé">Approuvé</option>
                                            <option value="Rejeté">Rejeté</option>
                                            <option value="Compte déjà en full">Compte déjà en full</option>
                                            <
                                        </select>
                                        </div>

                                    <div class="mb-3" id="observations-block" style="display: none;">
                                        <label for="observations" class="form-label">Motif de Rejet</label>
                                        <select class="form-select" id="observations" name="observations">
                                            <option value="" selected disabled>— Sélectionner un motif —</option>
                                            <option>VERSO PIECE NON CONFORME</option>
                                            <option>COMPTE MINEUR</option>
                                            <option>COMPTE RESILIE</option>
                                            <option>DATE DE NAISSANCE ILLISIBLE</option>
                                            <option>DATE DE NAISSANCE MAL RENSEIGNEE</option>
                                            <option>DATE DE NAISSANCE NON RENSEIGNEE</option>
                                            <option>DATE D'EMISSION MAL RENSEIGNEE</option>
                                            <option>DATE D'EXPIRATION MAL RENSEIGNEE</option>
                                            <option>DATE D'EXPIRATION ILLISIBLE</option>
                                            <option>GENRE MAL RENSEIGNE</option>
                                            <option>GENRE NON RENSEIGNE</option>
                                            <option>IDENTITE PIECE NON CONFORME</option>
                                            <option>NOM ILLISIBLE</option>
                                            <option>NOM MAL RENSEIGNE</option>
                                            <option>NUMERO ID ILLISIBLE</option>
                                            <option>NUMERO ID MAL RENSEIGNE</option>
                                            <option>PIECE EXPIREE</option>
                                            <option>PIECE ILLISIBLE</option>
                                            <option>PIECE MAL CADREE</option>
                                            <option>PIECE NON RECOMMANDEE</option>
                                            <option>PRENOM NON RENSEIGNE</option>
                                            <option>PROFIL COMPTE LITE</option>
                                            <option>TYPE DE PIECE MAL RENSEIGNE</option>
                                            <option value="Autre">Autre</option>
                                        </select>
                                    </div>

                                    <div class="mt-2" id="custom-observation-block" style="display: none;">
        <label for="custom_observations" class="form-label">Motif personnalisé</label>
        <input type="text" class="form-control" id="custom_observations" name="custom_observations"
            placeholder="Saisir le motif personnalisé ici">
    </div>


                                        <!-- Boutons -->
                                        <div class="d-flex justify-content-between">
                                            <button type="submit" class="btn btn-primary">Mettre à jour</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

</form>



@endsection

@push('scripts')
    <script>

function toggleObservations() {
    const statut = document.getElementById('statut').value;
    const obsBlock = document.getElementById('observations-block');
    const customBlock = document.getElementById('custom-observation-block');

    obsBlock.style.display = statut === 'Rejeté' ? 'block' : 'none';
    customBlock.style.display = 'none';

    document.getElementById('observations').addEventListener('change', function () {
        customBlock.style.display = this.value === 'Autre' ? 'block' : 'none';
    });
}
window.onload = toggleObservations;


          function toggleObservations() {
    const statut = document.getElementById('statut').value;
    const obsBlock = document.getElementById('observations-block');
    obsBlock.style.display = statut === 'Rejeté' ? 'block' : 'none';
  }

  // Optionnel : init à l'ouverture si le champ est pré-rempli
  document.addEventListener('DOMContentLoaded', toggleObservations)

  document.addEventListener('DOMContentLoaded', function () {
    const observationsSelect = document.getElementById('observations');
    const customBlock = document.getElementById('custom-observation-block');

    if (observationsSelect) {
        observationsSelect.addEventListener('change', function () {
            customBlock.style.display = this.value === 'Autre' ? 'block' : 'none';
        });
    }
});
    </script>
@endpush