@extends('admin.layouts.app')

@section('title', 'Créer une Agence')
@section('header', 'Nouvelle Agence')

@section('content')
    <div class="max-w-2xl mx-auto">
        <div class="mb-6">
            <a href="{{ route('admin.tenants.index') }}" class="text-slate-500 hover:text-brand-600 dark:text-slate-400 dark:hover:text-white transition-colors flex items-center">
                <i class="fas fa-arrow-left mr-2"></i> Retour à la liste
            </a>
        </div>

        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-100 dark:border-white/10 p-8 transition-colors">
            <h2 class="text-lg font-bold text-slate-800 dark:text-white mb-6 pb-4 border-b border-slate-50 dark:border-white/5">Informations de l'Agence</h2>
            
            <form action="{{ route('admin.tenants.store') }}" method="POST">
                @csrf
                
                <div class="space-y-6">
                    <div>
                        <label for="id" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Identifiant (ID) <span class="text-rose-500">*</span></label>
                        <input type="text" name="id" id="id" value="{{ old('id') }}" 
                               class="block w-full rounded-lg border-slate-300 dark:border-white/10 bg-white dark:bg-black/20 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2.5 px-3 transition-colors" 
                               placeholder="ex: agence-paris" required>
                        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Utilisé pour l'identification interne et technique. Unique.</p>
                    </div>

                    <div>
                        <label for="domain" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Domaine <span class="text-rose-500">*</span></label>
                        <div class="flex rounded-md shadow-sm">
                            <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-slate-300 dark:border-white/10 bg-slate-50 dark:bg-white/5 text-slate-500 dark:text-slate-400 sm:text-sm">
                                http://
                            </span>
                            <input type="text" name="domain" id="domain" value="{{ old('domain') }}" 
                                   class="flex-1 block w-full rounded-none rounded-r-lg border-slate-300 dark:border-white/10 bg-white dark:bg-black/20 text-slate-900 dark:text-white focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2.5 px-3 transition-colors" 
                                   placeholder="agence.localhost" required>
                        </div>
                        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Le domaine complet pour accéder à l'application.</p>
                    </div>

                    <div class="pt-4">
                        <div class="flex items-start">
                            <div class="flex items-center h-5">
                                <input id="is_active" name="is_active" type="checkbox" value="1" {{ old('is_active', true) ? 'checked' : '' }} 
                                       class="focus:ring-brand-500 h-4 w-4 text-brand-600 border-slate-300 dark:border-white/10 bg-white dark:bg-black/20 rounded transition-colors">
                            </div>
                            <div class="ml-3 text-sm">
                                <label for="is_active" class="font-medium text-slate-700 dark:text-slate-300">Activer l'agence</label>
                                <p class="text-slate-500 dark:text-slate-400">Si décoché, l'accès sera bloqué pour tous les utilisateurs de cette agence.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-8 pt-6 border-t border-slate-50 dark:border-white/5 flex justify-end space-x-3">
                    <a href="{{ route('admin.tenants.index') }}" class="bg-white dark:bg-slate-800 border border-slate-300 dark:border-white/10 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 font-medium py-2 px-4 rounded-lg shadow-sm transition-all">
                        Annuler
                    </a>
                    <button type="submit" class="bg-brand-600 hover:bg-brand-700 text-white font-medium py-2 px-6 rounded-lg shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500">
                        Créer l'Agence
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection