@extends('layouts.provider')

@section('title', 'Profil')
@section('page-title', 'Profil')
@section('footer-class', 'footer-spacing')

@section('content')
@php $pageWidth = 'narrow'; @endphp
<div class="space-y-4">

    <x-card :noBorder="true" :noSpacing="true">
        <x-slot name="header">
            <div class="pb-2 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Informations personnelles</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Votre compte et mot de passe</p>
            </div>
        </x-slot>
        
        <div class="mt-3">
        <form id="profile-form" action="{{ route('provider.profile.update') }}" method="POST" enctype="multipart/form-data" class="space-y-4">
            @csrf
            @method('PUT')
            
            <div class="grid grid-cols-2 gap-4">
                <x-input 
                    type="text" 
                    name="name" 
                    label="Nom complet" 
                    value="{{ old('name', auth()->user()->name) }}"
                    required
                />

                <x-input 
                    type="email" 
                    name="email" 
                    label="Email" 
                    value="{{ auth()->user()->email }}"
                    readonly
                    class="bg-gray-100 dark:bg-gray-700 cursor-not-allowed"
                />
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                <x-input 
                    type="password" 
                    name="current_password" 
                    label="Mot de passe actuel" 
                    placeholder="Requis pour changer"
                    autocomplete="off"
                />

                <div class="grid grid-cols-2 gap-4 sm:contents">
                    <x-input 
                        type="password" 
                        name="password" 
                        label="Nouveau mot de passe" 
                        placeholder="Laisser vide si inchangé"
                        autocomplete="new-password"
                    />

                    <x-input 
                        type="password" 
                        name="password_confirmation" 
                        label="Confirmer le mot de passe" 
                        placeholder="Confirmer le nouveau"
                        autocomplete="new-password"
                    />
                </div>
            </div>
        </div>
    </x-card>

    </form>
</div>

<!-- 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="profile-form" variant="primary" class="w-full">
        Enregistrer
    </x-button>
</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">
    <x-button type="submit" form="profile-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>
@endsection