@extends('layouts.provider')

@section('title', 'Modifier la taxe')
@section('page-title', 'Paramètres')
@section('footer-class', 'footer-spacing')

@section('content')
@php $pageWidth = 'narrow'; @endphp
<div class="space-y-3">
    <x-settings-tabs active="taxes" />
    <x-tax-tabs active="taxes" />
    
    <div>
        <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">Modifier la taxe</h3>
                    <x-button href="{{ route('provider.tax-settings.index') }}" 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>

            <form id="tax-form" method="POST" action="{{ route('provider.taxes.update', $tax) }}" class="space-y-6"
                  x-data="{
                      isWithholdingTax: {{ old('is_withholding_tax', $tax->is_withholding_tax) ? 'true' : 'false' }},
                      isVat: {{ old('is_vat', $tax->is_vat) ? 'true' : 'false' }},
                      isBeforeVat: {{ old('is_before_vat', $tax->is_before_vat) ? 'true' : 'false' }},
                      init() {
                          this.updateBeforeVatState();
                      },
                      updateBeforeVatState() {
                          if (this.isWithholdingTax || this.isVat) {
                              this.isBeforeVat = false;
                          }
                          if (this.isWithholdingTax) {
                              this.isVat = false;
                          }
                      },
                      updateWithholdingState() {
                          if (this.isVat) {
                              this.isWithholdingTax = false;
                              this.isBeforeVat = false;
                          }
                      }
                  }">
            @csrf
            @method('PUT')
            
            <x-input name="name" label="Nom (identifiant unique)" value="{{ old('name', $tax->name) }}" required />

            <div class="grid grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Type</label>
                    <div class="space-y-2">
                        <label class="flex items-center">
                            <input type="radio" name="type" value="percent" {{ old('type', $tax->type) === 'percent' ? 'checked' : '' }} class="mr-2">
                            <span class="text-sm">Pourcentage</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="type" value="fixed" {{ old('type', $tax->type) === 'fixed' ? 'checked' : '' }} class="mr-2">
                            <span class="text-sm">Montant fixe</span>
                        </label>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Signe</label>
                    <div class="space-y-2">
                        <label class="flex items-center">
                            <input type="radio" name="sign" value="+" {{ old('sign', $tax->sign) === '+' ? 'checked' : '' }} class="mr-2">
                            <span class="text-sm">+ (Ajout)</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="sign" value="-" {{ old('sign', $tax->sign) === '-' ? 'checked' : '' }} class="mr-2">
                            <span class="text-sm">- (Déduction)</span>
                        </label>
                    </div>
                </div>

                <x-input type="number" name="rate" label="Taux (%)" value="{{ old('rate', $tax->rate) }}" step="0.01" min="0" required />
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Utilisation</label>
                <div class="flex gap-4">
                    <label class="flex items-center">
                        <input type="radio" name="context" value="vente" {{ old('context', $tax->context) === 'vente' ? 'checked' : '' }} class="mr-2">
                        <span class="text-sm">Vente</span>
                    </label>
                    <label class="flex items-center">
                        <input type="radio" name="context" value="achat" {{ old('context', $tax->context) === 'achat' ? 'checked' : '' }} class="mr-2">
                        <span class="text-sm">Achat</span>
                    </label>
                    <label class="flex items-center">
                        <input type="radio" name="context" value="all" {{ old('context', $tax->context) === 'all' ? 'checked' : '' }} class="mr-2">
                        <span class="text-sm">Tout</span>
                    </label>
                </div>
            </div>

            <div class="space-y-3">
                <label class="flex items-center">
                    <input type="checkbox" name="is_vat" value="1" {{ old('is_vat', $tax->is_vat) ? 'checked' : '' }} class="mr-2" 
                           x-model="isVat" @change="updateWithholdingState()">
                    <span class="text-sm">Est une TVA</span>
                </label>
                
                <label class="flex items-center">
                    <input type="checkbox" name="is_withholding_tax" value="1" {{ old('is_withholding_tax', $tax->is_withholding_tax) ? 'checked' : '' }} class="mr-2" 
                           x-model="isWithholdingTax" @change="updateBeforeVatState()">
                    <span class="text-sm">Est une retenue à la source</span>
                </label>
                
                <div class="relative">
                    <label class="flex items-center" :class="{ 'opacity-50': isWithholdingTax || isVat }">
                        <input type="checkbox" name="is_before_vat" value="1" {{ old('is_before_vat', $tax->is_before_vat) ? 'checked' : '' }} class="mr-2" 
                               x-model="isBeforeVat" :disabled="isWithholdingTax || isVat">
                        <span class="text-sm">Appliqué avant la TVA</span>
                    </label>
                    <div x-show="isWithholdingTax" class="text-xs text-blue-600 mt-1">
                        La retenue à la source se calcule toujours sur le TTC (après TVA)
                    </div>
                    <div x-show="isVat" class="text-xs text-blue-600 mt-1">
                        La TVA ne peut pas être appliquée avant elle-même
                    </div>
                </div>
                
                <label class="flex items-center">
                    <input type="checkbox" name="apply_by_default" value="1" {{ old('apply_by_default', $tax->apply_by_default) ? 'checked' : '' }} class="mr-2">
                    <span class="text-sm">Appliquer par défaut</span>
                </label>
                
                <label class="flex items-center">
                    <input type="checkbox" name="active" value="1" {{ old('active', $tax->active) ? 'checked' : '' }} class="mr-2">
                    <span class="text-sm">Active</span>
                </label>
            </div>

            </form>
        </x-card>
    </div>
</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.tax-settings.index') }}" variant="secondary" class="flex-1">
            Annuler
        </x-button>
        <x-button type="submit" form="tax-form" class="flex-1">
            Modifier la taxe
        </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.tax-settings.index') }}" variant="secondary" class="flex-1">
            Annuler
        </x-button>
        <x-button type="submit" form="tax-form" class="flex-1">
            Modifier la taxe
        </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