@extends('layouts.provider')

@section('title', 'Ajouter une 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">Ajouter une 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.store') }}" class="space-y-6" 
                  x-data="{
                      isWithholdingTax: false,
                      isVat: false,
                      isBeforeVat: 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
            
            <x-input name="name" label="Nom (identifiant unique)" value="{{ old('name') }}" placeholder="fodec" 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" checked class="mr-2" onchange="updateRateLabel()">
                            <span class="text-sm">Pourcentage</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="type" value="fixed" class="mr-2" onchange="updateRateLabel()">
                            <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="+" checked class="mr-2">
                            <span class="text-sm">+ (Ajout)</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="sign" value="-" class="mr-2">
                            <span class="text-sm">- (Déduction)</span>
                        </label>
                    </div>
                </div>

                <x-input type="number" name="rate" step="0.01" min="0" value="{{ old('rate') }}" required>
                    <x-slot name="label">
                        <span id="rate-label">Taux (%)</span>
                    </x-slot>
                </x-input>
            </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" checked class="mr-2">
                        <span class="text-sm">Vente</span>
                    </label>
                    <label class="flex items-center">
                        <input type="radio" name="context" value="achat" class="mr-2">
                        <span class="text-sm">Achat</span>
                    </label>
                    <label class="flex items-center">
                        <input type="radio" name="context" value="all" 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" 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" 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" 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" 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" 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">
            Créer 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">
            Créer la taxe
        </x-button>
    </div>
</div>

<script>
function updateRateLabel() {
    const typeRadios = document.querySelectorAll('input[name="type"]');
    const rateLabel = document.getElementById('rate-label');
    
    const selectedType = Array.from(typeRadios).find(radio => radio.checked)?.value;
    
    if (selectedType === 'fixed') {
        rateLabel.textContent = 'Montant (TND)';
    } else {
        rateLabel.textContent = 'Taux (%)';
    }
}

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