@extends('layouts.provider')

@section('title', 'Annulation de facture')
@section('page-title', 'Finances > Annulation de facture')

@section('content')
    <div class="max-w-4xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <div class="bg-white rounded-lg shadow-sm">
            <!-- Header -->
            <div class="px-6 py-4 border-b border-gray-200">
                <h2 class="text-xl font-semibold text-gray-900">Annulation de facture</h2>
            </div>

            <!-- Invoice Info -->
            <div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <p class="text-sm text-gray-600">Facture</p>
                        <p class="font-semibold text-gray-900">{{ $invoice->invoice_number }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Client</p>
                        <p class="font-semibold text-gray-900">{{ $invoice->client->first_name }} {{ $invoice->client->last_name }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Date</p>
                        <p class="font-semibold text-gray-900">{{ $invoice->payment_date->format('d/m/Y') }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-600">Montant total</p>
                        <p class="font-semibold text-gray-900">{{ number_format($invoice->net_amount, 3) }} {{ $invoice->currency }}</p>
                    </div>
                </div>
            </div>

            <form action="{{ route('provider.invoices.cancel', $invoice->uuid) }}" method="POST">
                @csrf

                <!-- Paiements à annuler -->
                @if($invoice->invoicePayments->count() > 0)
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-sm font-semibold text-gray-900 mb-3">Paiements à annuler</h3>
                    <div class="space-y-2">
                        @php
                            $paymentNumber = 0;
                            $paymentNumbers = [];
                            foreach($invoice->invoicePayments->sortBy('id') as $p) {
                                $paymentNumber++;
                                $paymentNumbers[$p->id] = $paymentNumber;
                            }
                        @endphp
                        @foreach($invoice->invoicePayments->sortByDesc('id') as $payment)
                        <div class="flex justify-between items-center text-xs p-2 rounded {{ $payment->isReversal() ? 'bg-red-50' : 'bg-gray-50' }}">
                            <div class="flex-1">
                                <div class="font-medium text-gray-900">
                                    #{{ str_pad($paymentNumbers[$payment->id] ?? 0, 2, '0', STR_PAD_LEFT) }} - {{ $payment->payment_date->format('d/m/Y') }}
                                    @if($payment->isReversed())
                                        <span class="text-red-600">(Annulé)</span>
                                    @endif
                                </div>
                                <div class="text-gray-500">
                                    @if($payment->isReversal())
                                        @php
                                            $reversedPaymentId = $payment->reversal_of_payment_id;
                                            $reversedPaymentNumber = str_pad($paymentNumbers[$reversedPaymentId] ?? 0, 2, '0', STR_PAD_LEFT);
                                        @endphp
                                        Annulation · #{{ $reversedPaymentNumber }} · {{ $payment->reversal_reason }}
                                    @else
                                        @switch($payment->payment_method)
                                            @case('cash') Espèces @break
                                            @case('bank_transfer') Virement @break
                                            @case('check') Chèque @break
                                            @case('card') Carte @break
                                        @endswitch
                                        @if($payment->treasuryAccount)
                                            · {{ $payment->treasuryAccount->name }}
                                        @endif
                                    @endif
                                </div>
                            </div>
                            <div class="font-semibold {{ $payment->amount < 0 ? 'text-red-600' : 'text-green-600' }}">
                                {{ $payment->amount < 0 ? '-' : '' }}{{ number_format(abs($payment->amount), 3) }}
                            </div>
                        </div>
                        @endforeach
                        <div class="flex justify-between items-center text-sm font-semibold pt-2 border-t border-gray-200">
                            <span class="text-gray-900">Total payé</span>
                            <span class="text-gray-900">{{ number_format($invoice->paid_amount, 3) }} {{ $invoice->currency }}</span>
                        </div>
                    </div>
                </div>

                <!-- Remboursement client -->
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-sm font-semibold text-gray-900 mb-3">Remboursement client <span class="text-red-600">*</span></h3>
                    
                    <div class="space-y-4" x-data="{ accountType: '' }">
                        <div class="grid grid-cols-3 gap-4">
                            <div class="col-span-2">
                                <label for="refund_treasury_account_id" class="block text-sm font-medium text-gray-700 mb-1">
                                    Compte de trésorerie
                                </label>
                                <select name="refund_treasury_account_id" id="refund_treasury_account_id" required
                                    @change="accountType = $event.target.selectedOptions[0].dataset.type; updateRefundMethods($event.target.selectedOptions[0].dataset.type)"
                                    class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                    <option value="">Sélectionner un compte</option>
                                    @foreach($treasuryAccounts as $account)
                                    <option value="{{ $account->id }}" data-balance="{{ $account->current_balance }}" data-type="{{ $account->type }}">
                                        {{ $account->name }} ({{ $account->type }}) - Solde: {{ number_format($account->current_balance, 3) }} {{ $account->currency }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('refund_treasury_account_id')
                                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label for="refund_method" class="block text-sm font-medium text-gray-700 mb-1">
                                    Paiement en
                                </label>
                                <select name="refund_method" id="refund_method" required
                                    class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                    <option value="">Sélectionner d'abord un compte...</option>
                                </select>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">
                                Montant du remboursement
                            </label>
                            <input type="text" readonly value="{{ number_format($invoice->paid_amount, 3) }} {{ $invoice->currency }}"
                                class="w-full rounded-md border-gray-300 bg-gray-50 shadow-sm">
                            <p class="mt-1 text-xs text-gray-500">Montant non modifiable (total des paiements)</p>
                        </div>

                        <div>
                            <label for="refund_reference" class="block text-sm font-medium text-gray-700 mb-1">
                                Référence (optionnel)
                            </label>
                            <input type="text" name="refund_reference" id="refund_reference"
                                class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                placeholder="Ex: Chèque n°...">
                        </div>
                    </div>
                </div>
                <input type="hidden" name="has_payments" value="true">
                @endif

                <!-- Motif d'annulation -->
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-sm font-semibold text-gray-900 mb-3">Motif d'annulation <span class="text-red-600">*</span></h3>
                    
                    <div class="space-y-4">
                        <div>
                            <select name="reason_type" id="reason_type" required
                                class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                <option value="">Sélectionner un motif</option>
                                <option value="erreur_facturation">Erreur de facturation</option>
                                <option value="remise_negociee">Remise négociée après coup</option>
                                <option value="service_non_rendu">Service non rendu</option>
                                <option value="client_insatisfait">Client insatisfait</option>
                                <option value="autre">Autre</option>
                            </select>
                            @error('reason_type')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="reason_description" class="block text-sm font-medium text-gray-700 mb-1">
                                Description (optionnel)
                            </label>
                            <textarea name="reason_description" id="reason_description" rows="3"
                                class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                placeholder="Détails supplémentaires..."></textarea>
                        </div>
                    </div>
                </div>

                <!-- Conséquences -->
                <div class="px-6 py-4 bg-yellow-50 border-b border-gray-200">
                    <h3 class="text-sm font-semibold text-gray-900 mb-3">Conséquences</h3>
                    <ul class="space-y-2 text-sm text-gray-700">
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-yellow-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                            </svg>
                            <span>Un avoir sera créé avec un montant de <strong>-{{ number_format($invoice->net_amount, 3) }} {{ $invoice->currency }}</strong></span>
                        </li>
                        @if($invoice->invoicePayments->count() > 0)
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-yellow-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                            </svg>
                            <span>Tous les paiements seront annulés avec des contre-écritures</span>
                        </li>
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-yellow-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                            </svg>
                            <span>Sortie de trésorerie: <strong>-{{ number_format($invoice->paid_amount, 3) }} {{ $invoice->currency }}</strong></span>
                        </li>
                        @endif
                        <li class="flex items-start">
                            <svg class="w-5 h-5 text-yellow-600 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                            </svg>
                            <span>Les séances seront remises en statut "non facturé"</span>
                        </li>
                    </ul>

                    @if($invoice->appointments->count() > 0)
                    <div class="mt-3">
                        <p class="text-xs font-medium text-gray-700 mb-2">Séances concernées:</p>
                        <ul class="text-xs text-gray-600 space-y-1">
                            @foreach($invoice->appointments as $appointment)
                            <li>
                                <a href="{{ route('provider.appointments.calendar', ['highlight' => $appointment->uuid, 'date' => $appointment->start_time->format('Y-m-d')]) }}" 
                                   target="_blank"
                                   class="text-blue-600 hover:text-blue-800 hover:underline">
                                    • {{ $appointment->start_time->format('d/m/Y H:i') }} - {{ $appointment->end_time ? $appointment->end_time->format('H:i') : $appointment->start_time->addHour()->format('H:i') }} - {{ $appointment->service->name }}
                                </a>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                </div>

                <!-- Actions -->
                <div class="px-6 py-4 bg-gray-50">
                    <div class="flex justify-between items-center gap-3">
                        <a href="{{ route('provider.invoices.show', $invoice->uuid) }}"
                            class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">
                            Annuler
                        </a>
                        <button type="submit" id="submit-cancel-btn"
                            class="flex-1 px-4 py-2 bg-red-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-red-700">
                            Confirmer l'annulation
                        </button>
                    </div>
                    <p class="text-xs text-red-600 font-medium mt-3 text-center">⚠️ Cette action est irréversible</p>
                </div>
            </form>
        </div>
    </div>

    @push('scripts')
    <script>
        function updateRefundMethods(accountType) {
            const select = document.getElementById('refund_method');
            select.innerHTML = '';
            
            if (accountType === 'cash') {
                select.innerHTML = '<option value="cash">Espèces</option>';
                select.value = 'cash';
            } else if (accountType === 'bank') {
                select.innerHTML = `
                    <option value="">Sélectionner...</option>
                    <option value="bank_transfer">Virement bancaire</option>
                    <option value="check">Chèque</option>
                    <option value="card">Carte bancaire</option>
                `;
            } else {
                select.innerHTML = '<option value="">Sélectionner d\'abord un compte...</option>';
            }
        }
    </script>
    @endpush

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const accountSelect = document.getElementById('refund_treasury_account_id');
                if (accountSelect) {
                    accountSelect.addEventListener('change', function() {
                        const selectedOption = this.options[this.selectedIndex];
                        const balance = parseFloat(selectedOption.dataset.balance || 0);
                        const refundAmount = {{ $invoice->paid_amount }};
                        
                        if (balance < refundAmount && selectedOption.value) {
                            document.getElementById('warning-message').textContent = `Le solde du compte sélectionné (${balance.toFixed(3)} TND) est insuffisant pour le remboursement (${refundAmount.toFixed(3)} TND).\n\nVoulez-vous continuer quand même ?`;
                            document.getElementById('warning-modal').classList.remove('hidden');
                            document.getElementById('submit-cancel-btn').disabled = true;
                        } else {
                            document.getElementById('submit-cancel-btn').disabled = false;
                        }
                    });
                }
                
                document.getElementById('warning-cancel-btn')?.addEventListener('click', function() {
                    document.getElementById('warning-modal').classList.add('hidden');
                    document.getElementById('refund_treasury_account_id').value = '';
                    document.getElementById('submit-cancel-btn').disabled = true;
                });
                
                document.getElementById('warning-continue-btn')?.addEventListener('click', function() {
                    document.getElementById('warning-modal').classList.add('hidden');
                    document.getElementById('submit-cancel-btn').disabled = false;
                });
            });
        </script>
    </div>

    <!-- Modal d'avertissement solde insuffisant -->
    <div id="warning-modal" class="hidden fixed inset-0 z-50 overflow-y-auto" role="dialog" aria-modal="true">
        <div class="flex items-center justify-center min-h-screen px-4 py-4 text-center">
            <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" onclick="document.getElementById('warning-modal').classList.add('hidden')"></div>

            <div class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full relative z-10">
                <div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-yellow-100 rounded-full sm:mx-0 sm:h-10 sm:w-10">
                            <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                            </svg>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                            <h3 class="text-lg font-medium leading-6 text-gray-900">Solde insuffisant</h3>
                            <div class="mt-2">
                                <p id="warning-message" class="text-sm text-gray-500 whitespace-pre-line"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="px-4 py-3 bg-gray-50 sm:px-6">
                    <div class="flex gap-3">
                        <button type="button" id="warning-cancel-btn" class="flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">
                            Annuler
                        </button>
                        <button type="button" id="warning-continue-btn" class="flex-1 px-4 py-2 text-sm font-medium text-white bg-yellow-600 border border-transparent rounded-lg hover:bg-yellow-700">
                            Continuer quand même
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection