@extends('layouts.provider')

@section('title', 'Nouveau fournisseur')
@section('page-title', 'Paramètres')
@section('footer-class', 'footer-spacing')

@section('content')
<div class="space-y-3">
    <x-settings-tabs active="expenses" />
    <x-expense-tabs active="suppliers" />
    
    <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 fournisseur</h3>
            <x-button href="{{ route('provider.expense-settings.index', ['tab' => 'suppliers']) }}" variant="secondary" size="sm">
                <svg class="w-4 h-4 md:mr-1" 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">Retour</span>
            </x-button>
        </div>
    </x-slot>

    <x-supplier-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.expense-settings.index', ['tab' => 'suppliers']) }}" variant="secondary" class="flex-1">Annuler</x-button>
        <x-button type="submit" form="supplier-form" class="flex-1">Créer le fournisseur</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.expense-settings.index', ['tab' => 'suppliers']) }}" variant="secondary" class="flex-1">Annuler</x-button>
        <x-button type="submit" form="supplier-form" class="flex-1">Créer le fournisseur</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>
@endsection