@extends('layouts.app')

@section('title', 'Nouveau Ticket de Consultation')

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">
        <i class="fas fa-ticket-alt me-2"></i>
        Nouveau Ticket de Consultation
    </h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <a href="{{ route('consultation-tickets.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-1"></i>
            Retour à la liste
        </a>
    </div>
</div>

<div class="card shadow-sm">
    <div class="card-body">
        <form action="{{ route('consultation-tickets.store') }}" method="POST">
            @csrf
            
            <div class="row">
                <div class="col-md-6">
                    <h5 class="mb-3">Informations du ticket</h5>
                    
                    <div class="mb-3">
                        <label for="patient_id" class="form-label">Patient <span class="text-danger">*</span></label>
                        <select class="form-select @error('patient_id') is-invalid @enderror" 
                                id="patient_id" name="patient_id" required>
                            <option value="">Sélectionner un patient...</option>
                            @foreach($patients as $patient)
                                <option value="{{ $patient->id }}" {{ old('patient_id') == $patient->id ? 'selected' : '' }}>
                                    {{ $patient->patient_number }} - {{ $patient->full_name }} ({{ $patient->age }} ans)
                                </option>
                            @endforeach
                        </select>
                        @error('patient_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text">
                            <a href="{{ route('patients.create') }}" class="text-decoration-none">
                                <i class="fas fa-plus me-1"></i>
                                Ajouter un nouveau patient
                            </a>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="health_center_id" class="form-label">Centre de santé <span class="text-danger">*</span></label>
                        <select class="form-select @error('health_center_id') is-invalid @enderror" 
                                id="health_center_id" name="health_center_id" required>
                            <option value="">Sélectionner un centre...</option>
                            @foreach($healthCenters as $center)
                                <option value="{{ $center->id }}" {{ old('health_center_id') == $center->id ? 'selected' : '' }}>
                                    {{ $center->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('health_center_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="doctor_id" class="form-label">Médecin <span class="text-danger">*</span></label>
                        <select class="form-select @error('doctor_id') is-invalid @enderror" 
                                id="doctor_id" name="doctor_id" required>
                            <option value="">Sélectionner un médecin...</option>
                            @foreach($doctors as $doctor)
                                <option value="{{ $doctor->id }}" 
                                        data-fee="{{ $doctor->consultation_fee }}"
                                        data-specialization="{{ $doctor->specialization }}"
                                        {{ old('doctor_id') == $doctor->id ? 'selected' : '' }}>
                                    Dr. {{ $doctor->full_name }} - {{ $doctor->specialization }}
                                </option>
                            @endforeach
                        </select>
                        @error('doctor_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div class="form-text" id="doctor-info"></div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="appointment_date" class="form-label">Date du rendez-vous <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('appointment_date') is-invalid @enderror" 
                                       id="appointment_date" name="appointment_date" 
                                       value="{{ old('appointment_date', date('Y-m-d')) }}" 
                                       min="{{ date('Y-m-d') }}" required>
                                @error('appointment_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="appointment_time" class="form-label">Heure du rendez-vous <span class="text-danger">*</span></label>
                                <input type="time" class="form-control @error('appointment_time') is-invalid @enderror" 
                                       id="appointment_time" name="appointment_time" 
                                       value="{{ old('appointment_time', '09:00') }}" required>
                                @error('appointment_time')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <h5 class="mb-3">Détails de la consultation</h5>
                    
                    <div class="mb-3">
                        <label for="reason_for_visit" class="form-label">Motif de la visite</label>
                        <textarea class="form-control @error('reason_for_visit') is-invalid @enderror" 
                                  id="reason_for_visit" name="reason_for_visit" rows="4" 
                                  placeholder="Décrire brièvement le motif de la consultation...">{{ old('reason_for_visit') }}</textarea>
                        @error('reason_for_visit')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Récapitulatif -->
                    <div class="card bg-light">
                        <div class="card-header">
                            <h6 class="mb-0">
                                <i class="fas fa-receipt me-2"></i>
                                Récapitulatif du ticket
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between mb-2">
                                <span>Frais de consultation:</span>
                                <span id="consultation-fee">-</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span>Numéro de ticket:</span>
                                <span class="text-muted">Généré automatiquement</span>
                            </div>
                            <hr>
                            <div class="d-flex justify-content-between">
                                <strong>Total à payer:</strong>
                                <strong id="total-fee" class="text-primary">-</strong>
                            </div>
                        </div>
                    </div>

                    <!-- Actions recommandées -->
                    <div class="mt-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="create_patient_record">
                            <label class="form-check-label" for="create_patient_record">
                                Créer un dossier médical pour ce patient
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="send_reminder">
                            <label class="form-check-label" for="send_reminder">
                                Envoyer un rappel au patient (si téléphone disponible)
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-end gap-2 mt-4">
                <a href="{{ route('consultation-tickets.index') }}" class="btn btn-secondary">
                    <i class="fas fa-times me-1"></i>
                    Annuler
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save me-1"></i>
                    Créer le ticket
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const doctorSelect = document.getElementById('doctor_id');
    const consultationFeeSpan = document.getElementById('consultation-fee');
    const totalFeeSpan = document.getElementById('total-fee');
    const doctorInfoDiv = document.getElementById('doctor-info');
    
    function updateDoctorInfo() {
        const selectedOption = doctorSelect.options[doctorSelect.selectedIndex];
        
        if (selectedOption.value) {
            const fee = parseFloat(selectedOption.dataset.fee || 0);
            const specialization = selectedOption.dataset.specialization || '';
            
            consultationFeeSpan.textContent = fee.toLocaleString() + ' FCFA';
            totalFeeSpan.textContent = fee.toLocaleString() + ' FCFA';
            
            doctorInfoDiv.innerHTML = `
                <i class="fas fa-info-circle me-1"></i>
                Spécialisation: ${specialization} | 
                Tarif: ${fee.toLocaleString()} FCFA
            `;
        } else {
            consultationFeeSpan.textContent = '-';
            totalFeeSpan.textContent = '-';
            doctorInfoDiv.innerHTML = '';
        }
    }
    
    doctorSelect.addEventListener('change', updateDoctorInfo);
    updateDoctorInfo(); // Initial call
});
</script>
@endpush