@extends('layouts.provider')

@section('title', 'Nouveau mouvement')
@section('page-title', 'Finances > Trésorerie')
@section('footer-class', 'footer-spacing')

@section('content')
@php $pageWidth = 'narrow'; @endphp
<div class="space-y-6">
    <x-finances-tabs active="tresorerie" />
    
    <x-card>
        <x-slot name="header">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Nouveau mouvement</h3>
                <x-button href="{{ route('provider.treasury.movements.index', $account->uuid) }}" variant="secondary" size="sm">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                    </svg>
                    <span class="hidden md:inline ml-1">Retour</span>
                </x-button>
            </div>
        </x-slot>

        <!-- Compte info -->
        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 mb-6">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    @if($account->type === 'cash')
                    <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    </svg>
                    @elseif($account->type === 'bank')
                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
                    </svg>
                    @else
                    <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                    </svg>
                    @endif
                    <div>
                        <div class="text-lg font-semibold text-gray-900 dark:text-white">{{ $account->name }}</div>
                        <div class="text-sm text-gray-600 dark:text-gray-400 mt-0.5">
                            Réf.: {{ $account->reference ?: '-' }}
                        </div>
                    </div>
                </div>
                <div class="text-right">
                    <div class="text-sm text-gray-500 dark:text-gray-400">Solde actuel</div>
                    <div class="text-lg font-bold {{ $account->current_balance >= 0 ? 'text-green-600' : 'text-red-600' }}">
                        {{ number_format($account->current_balance, 3) }} {{ $account->currency }}
                    </div>
                </div>
            </div>
        </div>

        <form id="movement-form" method="POST" action="{{ route('provider.treasury.movements.store') }}" class="space-y-6" x-data="{ movementType: '{{ old('type', '') }}' }">
            @csrf
            <input type="hidden" name="treasury_account_id" id="treasury_account_id" value="{{ $account->id }}" data-balance="{{ $account->current_balance }}">
            
            <div class="grid grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Type de mouvement <span class="text-red-500">*</span></label>
                    <select name="type" id="movement_type" x-model="movementType" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg">
                        <option value="">Sélectionner...</option>
                        <option value="depot">Dépôt (+)</option>
                        <option value="retrait">Retrait (-)</option>
                        <option value="transfert">Transfert</option>
                    </select>
                    @error('type')
                        <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                <div>
                    <x-input 
                        name="amount" 
                        id="movement_amount"
                        label="Montant" 
                        type="number"
                        step="0.001"
                        min="0.001"
                        :value="old('amount')"
                        required 
                    />
                </div>
            </div>
            
            <div x-show="movementType === 'transfert'" style="display: none;">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Compte destination <span class="text-red-500">*</span></label>
                <select name="to_account_id" :required="movementType === 'transfert'" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white rounded-lg">
                    <option value="">Sélectionner...</option>
                    @foreach($accounts ?? [] as $acc)
                        @if($acc->id != $account->id)
                        <option value="{{ $acc->id }}" {{ old('to_account_id') == $acc->id ? 'selected' : '' }}>
                            {{ $acc->name }} ({{ number_format($acc->current_balance, 2) }} {{ $acc->currency }})
                        </option>
                        @endif
                    @endforeach
                </select>
            </div>
            
            <div class="grid grid-cols-2 gap-6">
                
                <div>
                    <x-input 
                        name="operation_date" 
                        label="Date d'opération" 
                        type="date"
                        :value="old('operation_date', date('Y-m-d'))"
                        required 
                    />
                </div>
                
                <div>
                    <x-input 
                        name="reference" 
                        label="Référence (optionnel)"
                        placeholder="Numéro de pièce, référence..."
                        :value="old('reference')"
                    />
                </div>
                
                <div class="col-span-2">
                    <x-textarea 
                        name="description" 
                        label="Description"
                        rows="3"
                        placeholder="Description du mouvement..."
                        :value="old('description')"
                    />
                </div>
            </div>
        </form>
    </x-card>
</div>

<!-- Boutons d'action -->
<div id="normal-button" class="mt-6 -mx-4 -mb-4 p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shadow-lg">
    <div class="flex gap-3">
        <x-button href="{{ route('provider.treasury.movements.index', $account->uuid) }}" variant="secondary" class="flex-1">
            Annuler
        </x-button>
        <x-button type="submit" form="movement-form" class="flex-1">
            Enregistrer
        </x-button>
    </div>
</div>

<!-- Bouton fixe -->
<div id="fixed-button" class="hidden fixed bottom-16 left-0 right-0 p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shadow-lg z-40">
    <div class="flex gap-3">
        <x-button href="{{ route('provider.treasury.movements.index', $account->uuid) }}" variant="secondary" class="flex-1">
            Annuler
        </x-button>
        <x-button type="submit" form="movement-form" class="flex-1">
            Enregistrer
        </x-button>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const normalButton = document.getElementById('normal-button');
        const fixedButton = document.getElementById('fixed-button');
        
        function toggleButton() {
            const rect = normalButton.getBoundingClientRect();
            const isFullyVisible = rect.bottom <= (window.innerHeight - 64);
            
            if (isFullyVisible) {
                fixedButton.classList.add('hidden');
            } else {
                fixedButton.classList.remove('hidden');
            }
        }
        
        window.addEventListener('scroll', toggleButton);
        toggleButton();
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const typeSelect = document.getElementById('movement_type');
        const amountInput = document.getElementById('movement_amount');
        const accountInput = document.getElementById('treasury_account_id');
        let modalShown = false;
        
        function checkBalance() {
            const type = typeSelect.value;
            const amount = parseFloat(amountInput.value || 0);
            const balance = parseFloat(accountInput.dataset.balance || 0);
            
            if ((type === 'retrait' || type === 'transfert') && amount > 0 && balance < amount && !modalShown) {
                document.getElementById('insufficient-balance-message').textContent = `Le solde du compte (${balance.toFixed(3)} TND) est insuffisant pour ce ${type === 'retrait' ? 'retrait' : 'transfert'} (${amount.toFixed(3)} TND).\n\nVoulez-vous continuer quand même ?`;
                document.getElementById('insufficient-balance-modal').classList.remove('hidden');
                modalShown = true;
            }
        }
        
        typeSelect.addEventListener('change', function() {
            modalShown = false;
            checkBalance();
        });
        amountInput.addEventListener('blur', checkBalance);
        
        document.getElementById('insufficient-balance-cancel')?.addEventListener('click', function() {
            document.getElementById('insufficient-balance-modal').classList.add('hidden');
            amountInput.value = '';
            modalShown = false;
        });
        
        document.getElementById('insufficient-balance-continue')?.addEventListener('click', function() {
            document.getElementById('insufficient-balance-modal').classList.add('hidden');
        });
    });
</script>

<!-- Modal d'avertissement solde insuffisant -->
<div id="insufficient-balance-modal" class="hidden fixed inset-0 z-[60] 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('insufficient-balance-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="insufficient-balance-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="insufficient-balance-cancel" 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="insufficient-balance-continue" 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