@extends('layouts.app')

@section('title', 'Vente Rapide de Tickets')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0 text-gray-800">
                    <i class="fas fa-bolt me-2 text-warning"></i>Vente Rapide de Tickets
                </h1>
                <div>
                    <a href="{{ route('quick-sale.sales') }}" class="btn btn-info me-2">
                        <i class="fas fa-history me-2"></i>Historique des ventes
                    </a>
                    <a href="{{ route('consultation-tickets.index') }}" class="btn btn-secondary">
                        <i class="fas fa-list me-2"></i>Tous les tickets
                    </a>
                </div>
            </div>

            <!-- Statistiques rapides -->
            <div class="row mb-4">
                <div class="col-md-4">
                    <div class="card bg-primary text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="mb-0">{{ $todaySales }}</h4>
                                    <small>Ventes aujourd'hui</small>
                                </div>
                                <i class="fas fa-ticket-alt fa-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="mb-0">{{ number_format($todayRevenue) }} FCFA</h4>
                                    <small>Recettes du jour</small>
                                </div>
                                <i class="fas fa-money-bill-wave fa-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card bg-info text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="mb-0">{{ $recentSales->count() }}</h4>
                                    <small>Ventes récentes</small>
                                </div>
                                <i class="fas fa-clock fa-2x opacity-75"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Formulaire de vente -->
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">
                                <i class="fas fa-plus-circle me-2"></i>Nouvelle Vente
                            </h5>
                        </div>
                        <div class="card-body">
                            <form id="quickSaleForm">
                                @csrf
                                <div class="row">
                                    <!-- Centre de santé (automatiquement assigné) -->
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label class="form-label">Centre de santé</label>
                                            <div class="alert alert-info">
                                                <i class="fas fa-info-circle"></i>
                                                Vente pour le centre : <strong>{{ $userHealthCenter->name ?? 'Centre non défini' }}</strong>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Type de consultation -->
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="consultation_type" class="form-label">Type de consultation <span class="text-danger">*</span></label>
                                            <select class="form-select" id="consultation_type" name="consultation_type" required>
                                                <option value="">Sélectionner le type...</option>
                                                @foreach($consultationTypes as $key => $type)
                                                    <option value="{{ $key }}" data-fee="{{ $consultationFees[$key] }}">
                                                        {{ $type }} - {{ number_format($consultationFees[$key]) }} FCFA
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <!-- Date et heure -->
                                    <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" id="appointment_date" name="appointment_date" 
                                                   value="{{ date('Y-m-d') }}" min="{{ date('Y-m-d') }}" required>
                                        </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" id="appointment_time" name="appointment_time" 
                                                   value="{{ date('H:i') }}" required>
                                        </div>
                                    </div>
                                </div>

                                <!-- Montants -->
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="consultation_fee" class="form-label">Tarif consultation <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <input type="number" class="form-control" id="consultation_fee" name="consultation_fee" 
                                                       min="0" step="100" required readonly>
                                                <span class="input-group-text">FCFA</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="additional_fees" class="form-label">Frais supplémentaires</label>
                                            <div class="input-group">
                                                <input type="number" class="form-control" id="additional_fees" name="additional_fees" 
                                                       min="0" step="100" value="0">
                                                <span class="input-group-text">FCFA</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="total_amount" class="form-label">Total à payer</label>
                                            <div class="input-group">
                                                <input type="number" class="form-control fw-bold" id="total_amount" name="total_amount" 
                                                       readonly>
                                                <span class="input-group-text">FCFA</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Paiement -->
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="payment_method" class="form-label">Mode de paiement <span class="text-danger">*</span></label>
                                            <select class="form-select" id="payment_method" name="payment_method" required>
                                                <option value="cash">Espèces</option>
                                                <option value="card">Carte bancaire</option>
                                                <option value="mobile_money">Mobile Money</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="amount_paid" class="form-label">Montant payé <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <input type="number" class="form-control" id="amount_paid" name="amount_paid" 
                                                       min="0" step="100" required>
                                                <span class="input-group-text">FCFA</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="change_given" class="form-label">Monnaie à rendre</label>
                                            <div class="input-group">
                                                <input type="number" class="form-control" id="change_given" name="change_given" readonly>
                                                <span class="input-group-text">FCFA</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Notes -->
                                <div class="mb-3">
                                    <label for="notes" class="form-label">Notes (optionnel)</label>
                                    <textarea class="form-control" id="notes" name="notes" rows="2" 
                                              placeholder="Notes additionnelles..."></textarea>
                                </div>

                                <div class="d-flex justify-content-end gap-2">
                                    <button type="button" class="btn btn-secondary" onclick="resetForm()">
                                        <i class="fas fa-undo me-2"></i>Réinitialiser
                                    </button>
                                    <button type="submit" class="btn btn-success btn-lg">
                                        <i class="fas fa-shopping-cart me-2"></i>Effectuer la vente
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Ventes récentes -->
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">
                                <i class="fas fa-clock me-2"></i>Ventes récentes
                            </h6>
                        </div>
                        <div class="card-body p-0">
                            @if($recentSales->count() > 0)
                                <div class="list-group list-group-flush">
                                    @foreach($recentSales as $sale)
                                        <div class="list-group-item d-flex justify-content-between align-items-start">
                                            <div class="ms-2 me-auto">
                                                <div class="fw-bold">{{ $sale->patient->name }}</div>
                                                <small class="text-muted">
                                                    {{ $sale->receipt_number }} - {{ $sale->created_at->format('H:i') }}
                                                </small>
                                            </div>
                                            <span class="badge bg-success rounded-pill">
                                                {{ number_format($sale->total_amount) }} F
                                            </span>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="text-center py-4">
                                    <i class="fas fa-receipt fa-3x text-muted mb-3"></i>
                                    <p class="text-muted">Aucune vente récente</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmation de vente -->
<div class="modal fade" id="saleConfirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="fas fa-check-circle me-2"></i>Vente Réussie
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="saleResult"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                <button type="button" class="btn btn-success" id="printReceiptBtn">
                    <i class="fas fa-print me-2"></i>Imprimer le ticket
                </button>
                <button type="button" class="btn btn-primary" onclick="location.reload()">
                    <i class="fas fa-plus me-2"></i>Nouvelle vente
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let currentReceiptId = null;

    // Calculer automatiquement les montants
    function calculateAmounts() {
        const consultationFee = parseFloat($('#consultation_fee').val()) || 0;
        const additionalFees = parseFloat($('#additional_fees').val()) || 0;
        const totalAmount = consultationFee + additionalFees;
        
        $('#total_amount').val(totalAmount);
        
        // Calculer la monnaie
        const amountPaid = parseFloat($('#amount_paid').val()) || 0;
        const changeGiven = Math.max(0, amountPaid - totalAmount);
        $('#change_given').val(changeGiven);
    }

    // Mettre à jour le tarif selon le type de consultation
    $('#consultation_type').change(function() {
        const selectedOption = $(this).find('option:selected');
        const fee = selectedOption.data('fee') || 0;
        $('#consultation_fee').val(fee);
        calculateAmounts();
    });

    $('#additional_fees, #amount_paid').on('input', calculateAmounts);
    // Formulaire de vente rapide
    $('#quickSaleForm').submit(function(e) {
        e.preventDefault();
        
        const submitBtn = $(this).find('button[type="submit"]');
        submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>Traitement...');
        
        $.ajax({
            url: '{{ route("quick-sale.store") }}',
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                if (response.success) {
                    currentReceiptId = response.cash_receipt_id;
                    
                    $('#saleResult').html(`
                        <div class="text-center">
                            <i class="fas fa-ticket-alt fa-3x text-success mb-3"></i>
                            <h4>Ticket généré avec succès!</h4>
                            <div class="alert alert-success">
                                <strong>N° de ticket:</strong> ${response.receipt_number}<br>
                                <strong>Montant total:</strong> ${response.total_amount.toLocaleString()} FCFA<br>
                                <strong>Monnaie rendue:</strong> ${response.change_given.toLocaleString()} FCFA
                            </div>
                        </div>
                    `);
                    
                    $('#saleConfirmModal').modal('show');
                } else {
                    alert('Erreur: ' + response.message);
                }
            },
            error: function(xhr) {
                alert('Erreur lors de la vente');
            },
            complete: function() {
                submitBtn.prop('disabled', false).html('<i class="fas fa-shopping-cart me-2"></i>Effectuer la vente');
            }
        });
    });

    // Imprimer le ticket
    $('#printReceiptBtn').click(function() {
        if (currentReceiptId) {
            window.open(`{{ url('quick-sale/receipt') }}/${currentReceiptId}/pdf`, '_blank');
        }
    });
});

function resetForm() {
    $('#quickSaleForm')[0].reset();
    $('#total_amount').val('');
    $('#change_given').val('');
}
</script>
@endpush