@extends('layouts.provider')

@section('title', 'Paramètres - Informations Fiscales')
@section('page-title', 'Paramètres')
@section('footer-class', 'footer-spacing')

@section('content')
<x-settings-tabs active="fiscal" />

<form id="fiscal-form" action="{{ route('provider.settings.fiscal.update') }}" method="POST" class="space-y-6">
    @csrf
    @method('PUT')
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Informations fiscales -->
        <x-card>
        <x-slot name="header">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Informations fiscales</h3>
        </x-slot>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="md:col-span-2">
                <x-input 
                    name="legal_name" 
                    label="Raison sociale officielle" 
                    :value="old('legal_name', $provider->legal_name)" 
                    placeholder="Si différente du nom commercial"
                    help="Laissez vide si identique au nom commercial" />
            </div>

            <x-input 
                name="tax_id" 
                label="Matricule fiscal" 
                :value="old('tax_id', $provider->tax_id)" 
                placeholder="Ex: 1234567/A/M/000" />
        </div>
        </x-card>

        <!-- Paramètres de facturation -->
        <x-card>
        <x-slot name="header">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Paramètres de facturation</h3>
        </x-slot>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="md:col-span-2">
                <x-input 
                    type="number" 
                    name="default_tax_rate" 
                    label="Taux de taxe par défaut (%)" 
                    :value="old('default_tax_rate', $provider->billing_settings['default_tax_rate'] ?? '')" 
                    placeholder="Ex: 19"
                    step="0.01"
                    min="0"
                    max="100" />
            </div>

            <div class="md:col-span-2">
                <x-input 
                    type="number" 
                    name="fiscal_stamp" 
                    label="Timbre fiscal" 
                    :value="old('fiscal_stamp', $provider->billing_settings['fiscal_stamp'] ?? '')" 
                    placeholder="Ex: 1.000"
                    step="0.001"
                    min="0" />
            </div>

            <div class="md:col-span-2">
                <x-input 
                    name="bank_name" 
                    label="Nom de la banque" 
                    :value="old('bank_name', $provider->billing_settings['bank_name'] ?? '')" 
                    placeholder="Ex: Banque de Tunisie" />
            </div>

            <x-input 
                name="bank_account_number" 
                label="Numéro de compte" 
                :value="old('bank_account_number', $provider->billing_settings['bank_account_number'] ?? '')" 
                placeholder="Ex: 12345678901234567890" />

            <x-input 
                name="bank_iban" 
                label="IBAN" 
                :value="old('bank_iban', $provider->billing_settings['bank_iban'] ?? '')" 
                placeholder="Ex: TN59 1234 5678 9012 3456 7890" />

            <div class="md:col-span-2">
                <x-textarea 
                    name="invoice_footer" 
                    label="Texte de pied de facture" 
                    :value="old('invoice_footer', $provider->billing_settings['invoice_footer'] ?? '')" 
                    placeholder="Texte libre qui apparaîtra en bas de vos factures..."
                    rows="3" />
            </div>
        </div>
        </x-card>
    </div>

    <!-- Aperçu sur facture -->
    <x-card>
        <x-slot name="header">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Aperçu sur facture</h3>
        </x-slot>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
            <div class="lg:col-span-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6">
                <div class="text-sm space-y-1">
                    <div class="font-semibold text-gray-900 dark:text-white">
                        {{ $provider->legal_name ?: $provider->business_name ?: 'Nom de l\'entreprise' }}
                    </div>
                    @if($provider->tax_id)
                        <div class="text-gray-600 dark:text-gray-400">
                            Matricule fiscal: {{ $provider->tax_id }}
                        </div>
                    @endif
                    @if($provider->address)
                        <div class="text-gray-600 dark:text-gray-400">
                            {{ $provider->address }}
                        </div>
                    @endif
                    @if($provider->city || $provider->country)
                        <div class="text-gray-600 dark:text-gray-400">
                            {{ trim(($provider->city ?? '') . ' ' . ($provider->country ?? '')) }}
                        </div>
                    @endif
                    @if($provider->phone)
                        <div class="text-gray-600 dark:text-gray-400">
                            Tél: {{ $provider->phone }}
                        </div>
                    @endif
                </div>
            </div>
            <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                <div class="flex">
                    <svg class="w-5 h-5 text-blue-400 dark:text-blue-500 mr-2" 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"></path>
                    </svg>
                    <div>
                        <p class="text-sm text-blue-700 dark:text-blue-300 font-medium mb-1">
                            Adresse de facturation
                        </p>
                        <p class="text-sm text-blue-600 dark:text-blue-400">
                            L'adresse de facturation est la même que votre adresse de profil. 
                            <a href="{{ route('provider.profile.edit') }}" class="underline font-medium">
                                Modifiez-la dans votre profil
                            </a> pour qu'elle apparaisse sur vos factures.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </x-card>
    
</form>

<!-- Bouton d'enregistrement -->
<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">
    <x-button type="submit" form="fiscal-form" variant="primary" class="w-full">
        Enregistrer
    </x-button>
</div>
@endsection

<!-- Bouton fixe -->
<div id="fixed-button" class="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">
    <x-button type="submit" form="fiscal-form" variant="primary" class="w-full">
        Enregistrer
    </x-button>
</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>