@extends('layouts.admin_base')
{{-- @section('content')
    <x-slot name="header">
        <h2 class="text-xl font-semibold text-gray-800 leading-tight">
            {{ __('Ajouter une entreprise') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white shadow sm:rounded-lg">
                <div class="p-6">
                    <!-- Validation Errors -->
                    @if ($errors->any())
                        <div class="mb-4 text-red-600">
                            <ul class="list-disc list-inside">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <!-- Form -->
                    <form method="POST" action="{{ route('entreprises.store') }}" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="is_valide" value="1">
                        <!-- Company Details -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="nom" class="block text-sm font-medium text-gray-700">Nom de l'entreprise</label>
                                <input type="text" id="nom" name="nom" class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500" required>
                              
                            </div>

                            <div>
                                <label for="logo" class="block text-sm font-medium text-gray-700">Logo de l'entreprise</label>
                                <input type="file" id="logo" name="logo" class="mt-1 block w-full text-gray-900" accept="image/*" required>
                            </div>

                            <div>
                                <label for="type" class="block text-sm font-medium text-gray-700">Type d'entreprise</label>
                                <select id="type" name="type" class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500" required>
                                    <option value="" disabled selected>Choisissez un type</option>
                                    <option value="0">Public</option>
                                    <option value="1">Privé</option>
                                </select>
                            </div>

                            <div>
                                <label for="taille" class="block text-sm font-medium text-gray-700">Taille de l'entreprise</label>
                                <select id="taille" name="taille" class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500" required>
                                    <option value="" disabled selected>Choisissez une taille</option>
                                    <option value="1-10">1 à 10 employés</option>
                                    <option value="11-50">11 à 50 employés</option>
                                    <option value="51-200">51 à 200 employés</option>
                                    <option value="201-500">201 à 500 employés</option>
                                    <option value="500+">Plus de 500 employés</option>
                                </select>
                            </div>

                            <div>
                                <label for="secteur_activite_id" class="block text-sm font-medium text-gray-700">Secteur d'activité</label>
                                <select id="secteur_activite_id" name="secteur_activite_id" class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500" required>
                                    <option value="" disabled selected>Choisissez un secteur</option>
                                    @foreach ($secteur_activites as $secteur_activite)
                                        <option value="{{ $secteur_activite->id }}">
                                            {{ $secteur_activite->nom }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div>
                                <label for="form_juridique" class="block text-sm font-medium text-gray-700">Forme juridique</label>
                                <select id="form_juridique" name="form_juridique" class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500" required>
                                    <option value="ETS">ETS</option>
                                    <option value="SARL">SARL</option>
                                    <option value="SA">SA</option>
                                    <option value="EP">EP</option>
                                </select>
                            </div>

                            <div>
                                <label for="wilaya" class="block text-sm font-medium text-gray-700">Wilaya</label>
                                <select id="wilaya" name="wilaya" class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500" required>
                                    <!-- Option par défaut : vide uniquement si aucune wilaya n'est sélectionnée -->
                                    <option value="" disabled >Choisissez une wilaya</option>
                                    
                                    <!-- Liste des wilayas -->
                                    @foreach ($wilayas as $wilaya)
                                        <option value="{{ $wilaya->id }}" >
                                            {{ $wilaya->nom }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            
                            <div>
                                <label for="moughatta" class="block text-sm font-medium text-gray-700">Moughataa</label>
                                <select id="moughatta" name="moughatta" class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500" required>
                                    <option value="" disabled selected>Choisissez une moughataa</option>
                                </select>
                            </div>

                            <div>
                                <label for="adresse" class="block text-sm font-medium text-gray-700">Adresse</label>
                                <input type="text" id="adresse" name="adresse" class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500" required>
                            </div>

                            <div>
                                <label for="telephone" class="block text-sm font-medium text-gray-700">Téléphone</label>
                                <input type="text" id="telephone" name="telephone" pattern="[0-9]{8}" class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500" required>
                            </div>

                           

                            <div>
                                <label for="site_web" class="block text-sm font-medium text-gray-700">Site web</label>
                                <input type="url" id="site_web" name="site_web" class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
                            </div>
                        </div>

                        <div class="mt-6">
                            <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                            <textarea id="description" name="description" rows="3" class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        </div>

                        <!-- User Details -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
                            <div>
                                <label for="nom_user" class="block text-sm font-medium text-gray-700">Nom de l'utilisateur</label>
                                <input type="text" id="nom_user" name="nom_user" class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500" required>
                            </div>

                            <div>
                                <label for="email_user" class="block text-sm font-medium text-gray-700">Email de l'utilisateur</label>
                                <input type="email" id="email_user" name="email_user" class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500" required>
                            </div>

                            <div>
                                <label for="mot_de_passe" class="block text-sm font-medium text-gray-700">Mot de passe</label>
                                <input type="password" id="mot_de_passe" name="mot_de_passe" class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-focus:ring-indigo-500" required>
                            </div>

                            <div>
                                <label for="mot_de_passe_confirmation" class="block text-sm font-medium text-gray-700">Confirmer le mot de passe</label>
                                <input type="password" id="mot_de_passe_confirmation" name="mot_de_passe_confirmation" class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500" required>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="text-center gap-6 mt-6">
                            <button type="button" 
                                    class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded" 
                                    onclick="window.history.back();">
                                Annuler
                            </button>
                            <button type="submit" 
                                    class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded ml-2" 
                                    id="submitBtn">
                                Ajouter
                            </button>
                        </div>
                        
                    </form>
                </div>
            </div>
        </div>
    </div>
                        <script>
                            // Désactiver le bouton après le premier clic
                            document.getElementById('submitBtn').addEventListener('click', function() {
                                this.disabled = true;  // Désactiver le bouton
                                this.form.submit();    // Soumettre le formulaire
                            });

                            // Lorsque la wilaya est changée, charger les moughattas correspondants
                            document.getElementById('wilaya').addEventListener('change', function() {
                                var wilayaId = this.value;

                                // Vérifier si une wilaya est sélectionnée
                                if (wilayaId) {
                                    // Envoi de la requête pour récupérer les moughattas de la wilaya sélectionnée
                                    fetch(`/entreprises/moughattas/${wilayaId}`)
                                        .then(response => response.json())
                                        .then(data => {
                                            // Vider la liste actuelle de moughattas
                                            var moughataaSelect = document.getElementById('moughatta');
                                            moughataaSelect.innerHTML =
                                                '<option value="" disabled selected>Choisissez une moughataa</option>';

                                            // Remplir la liste déroulante des moughattas
                                            data.forEach(function(moughataa) {
                                                var option = document.createElement('option');
                                                option.value = moughataa.id;
                                                option.textContent = moughataa.nom;
                                                moughataaSelect.appendChild(option);
                                            });
                                        })
                                        .catch(error => {
                                            console.error('Erreur lors du chargement des moughattas:', error);
                                        });
                                }
                            });
                        </script>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection


@extends($layout) --}}
@section('content')
    <div class="max-w-4xl mx-auto bg-white shadow-md rounded-lg p-8 mt-8">
        <h2 class="text-3xl font-bold text-gray-800 mb-6 text-center">
            {{ isset($entreprise) ? 'Modifier' : 'Crée' }} le profil de l'entreprise
        </h2>

         <!-- Validation Errors -->
         @if ($errors->any())
         <div class="mb-4 text-red-600">
             <ul class="list-disc list-inside">
                 @foreach ($errors->all() as $error)
                     <li>{{ $error }}</li>
                 @endforeach
             </ul>
         </div>
     @endif

        <form action="{{ isset($entreprise) ? route('entreprises.update', ['entreprise' => $entreprise->id]) : route('entreprises.store') }}"
            method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf
            @if (isset($entreprise))
                @method('PUT')
            @endif
            <input type="hidden" name="is_valide" value="1">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="nom" class="block text-sm font-semibold text-gray-700">Nom</label>
                    <input type="text" name="nom" id="nom" value="{{ old('nom', $entreprise->nom ?? '') }}"
                        class="mt-2 block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400"
                        required>
                </div>

                <div>
                    <label for="logo" class="block text-sm font-semibold text-gray-700">Logo</label>
                    <input type="file" name="logo" id="logo" class="mt-2 block w-full text-gray-500">
                </div>

                <div>
                    <label for="site_web" class="block text-sm font-semibold text-gray-700">Site Web</label>
                    <input type="url" name="site_web" id="site_web"
                        value="{{ old('site_web', $entreprise->site_web ?? '') }}"
                        class="mt-2 block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400">
                </div>

                <div>
                    <label for="telephone" class="block text-sm font-semibold text-gray-700">Téléphone</label>
                    <input type="text" name="telephone" id="telephone"
                        value="{{ old('telephone', $entreprise->telephone ?? '') }}"
                        class="mt-2 block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400"
                        required>
                </div>


                <div>
                    <label for="type" class="block text-sm font-semibold text-gray-700">Type d'entreprise</label>
                    <select id="type" name="type"
                        class="mt-2 block w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-400"
                        required>
                        <option value="" disabled>Choisissez un type</option>
                        <option value="0" {{ old('type', $entreprise->type ?? '') == '0' ? 'selected' : '' }}>Public
                        </option>
                        <option value="1" {{ old('type', $entreprise->type ?? '') == '1' ? 'selected' : '' }}>Privé
                        </option>
                    </select>
                </div>
                <div>
                    <label for="taille" class="block text-sm font-semibold text-gray-700">Taille d'entreprise</label>
                    <select id="taille" name="taille"
                        class="mt-2 block w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-400"
                        required>
                        <option value="" disabled>Choisissez une taille</option>
                        @foreach (['1-10' => '1 à 10 employés', '11-50' => '11 à 50 employés', '51-200' => '51 à 200 employés', '201-500' => '201 à 500 employés', '500+' => 'Plus de 500 employés'] as $value => $label)
                            <option value="{{ $value }}"
                                {{ old('taille', $entreprise->taille ?? '') == $value ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="secteur_activite_id" class="block text-sm font-semibold text-gray-700">
                        Secteur d'activité
                    </label>
                    <select id="secteur_activite_id" name="secteur_activite_id"
                        class="mt-2 block w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-400"
                        required>

                        <option value="" disabled selected>Choisissez un Secteur</option>

                        @foreach ($secteur_activites as $secteur_activite)
                            <option value="{{ $secteur_activite->id }}"
                                {{ old('secteur_activite_id', $entreprise->secteur_activite_id ?? '') == $secteur_activite->id ? 'selected' : '' }}>
                                {{ $secteur_activite->nom }}
                            </option>
                        @endforeach
                    </select>
                </div>



                <div>
                    <label for="form_juridique" class="block text-sm font-semibold text-gray-700">Forme Juridique</label>
                    <select id="form_juridique" name="form_juridique"
                        class="mt-2 block w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-400"
                        required>
                        <option value="" disabled selected>Choisissez un Forme Juridique</option>

                        @foreach (['ETS' => 'ETS', 'SARL' => 'SARL', 'SA' => 'SA', 'EP' => 'EP'] as $value => $label)
                            <option value="{{ $value }}"
                                {{ old('form_juridique', $entreprise->form_juridique ?? '') == $value ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">


                <div>
                    <label for="wilaya" class="block text-sm font-semibold text-gray-700">Wilaya</label>
                    <select id="wilaya" name="wilaya"
                        class="mt-2 block w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-400"
                        required>
                        <option value="" disabled>Choisissez une wilaya</option>
                        @foreach ($wilayas as $wilaya)
                            <option value="{{ $wilaya->id }}"
                                {{ old('wilaya', $entreprise->wilaya ?? '') == $wilaya->id ? 'selected' : '' }}>
                                {{ $wilaya->nom }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="moughataa" class="block text-sm font-semibold text-gray-700">Moughataa</label>
                    <select id="moughataa" name="moughataa"
                        class="mt-2 block w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-400"
                        required>
                        <option value="" disabled>Choisissez une moughataa</option>
                        @if (isset($moughataas))
                            @foreach ($moughataas as $moughataa)
                                <option value="{{ $moughataa->id }}"
                                    {{ old('moughataa', $entreprise->moughataa ?? '') == $moughataa->id ? 'selected' : '' }}>
                                    {{ $moughataa->nom }}
                                </option>
                            @endforeach
                        @endif
                    </select>
                </div>


                <div>
                    <label for="adresse" class="block text-sm font-semibold text-gray-700">Adresse</label>
                    <input type="text" name="adresse" id="adresse"
                        value="{{ old('adresse', $entreprise->adresse ?? '') }}"
                        class="mt-2 block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400"
                        required>
                </div>

            </div>

            <div>
                <label for="description" class="block text-sm font-semibold text-gray-700">Description</label>
                <textarea name="description" id="description" rows="4"
                    class="mt-2 block w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400">{{ old('description', $entreprise->description ?? '') }}</textarea>
            </div>

            <!-- Détails de l'utilisateur -->
            <div class="bg-white p-6 rounded-lg shadow-md">
                <h2 class="text-lg font-semibold text-gray-800 mb-4">Détails de l'utilisateur</h2>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="nom_user" class="block text-sm font-medium text-gray-700">Nom de l'utilisateur</label>
                        <input type="text" id="nom_user" name="nom_user"
                            class="mt-1 block w-full rounded-md border-gray-300 focus:ring-2 focus:ring-blue-400" required>
                    </div>

                    <div>
                        <label for="email_user" class="block text-sm font-medium text-gray-700">Email de
                            l'utilisateur</label>
                        <input type="email" id="email_user" name="email_user"
                            class="mt-1 block w-full rounded-md border-gray-300 focus:ring-2 focus:ring-blue-400" required>
                    </div>

                    <div>
                        <label for="mot_de_passe" class="block text-sm font-medium text-gray-700">Mot de passe</label>
                        <input type="password" id="mot_de_passe" name="mot_de_passe"
                            class="mt-1 block w-full rounded-md border-gray-300 focus:ring-2 focus:ring-blue-400" required>
                    </div>

                    <div>
                        <label for="mot_de_passe_confirmation" class="block text-sm font-medium text-gray-700">Confirmer
                            le mot de passe</label>
                        <input type="password" id="mot_de_passe_confirmation" name="mot_de_passe_confirmation"
                            class="mt-1 block w-full rounded-md border-gray-300 focus:ring-2 focus:ring-blue-400" required>
                    </div>
                </div>
            </div>


            {{-- <div class="flex justify-center">
                <button type="submit" id="submitBtn"
                    class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition duration-300">
                    {{ isset($entreprise) ? 'Mettre à jour' : 'Ajouter' }}
                </button>
            </div> --}}
            <!-- Submit Button -->
            <div class="text-center px-6 py-10 gap-6 mt-6">
                <button type="button" 
                        class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded" 
                        onclick="window.history.back();">
                    Annuler
                </button>
                <button type="submit" 
                        class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-2" 
                        id="submitBtn">
                        {{ isset($entreprise) ? 'Mettre à jour' : 'Crée' }}
                </button>
            </div>
        </form>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const submitBtn = document.getElementById('submitBtn');
            if (submitBtn) {
                submitBtn.addEventListener('click', function() {
                    this.disabled = true;
                    this.form.submit();
                });
            }


            const wilayaSelect = document.getElementById('wilaya');
            const moughataaSelect = document.getElementById('moughataa');

            async function fetchMoughataas(wilayaId, selectedMoughataa = null) {
                if (!wilayaId) return;
                try {
                    const response = await fetch(`/entreprises/moughattas/${wilayaId}`);
                    const data = await response.json();

                    moughataaSelect.innerHTML = '<option value="" disabled>Choisissez une moughataa</option>';

                    data.forEach(moughataa => {
                        const option = document.createElement('option');
                        option.value = moughataa.id;
                        option.textContent = moughataa.nom;
                        if (selectedMoughataa && selectedMoughataa == moughataa.id) {
                            option.selected = true;
                        }
                        moughataaSelect.appendChild(option);
                    });
                } catch (error) {
                    console.error("Erreur lors du chargement des moughataas :", error);
                }
            }

            // Charger la moughataa actuelle lors de la modification
            if (wilayaSelect.value) {
                fetchMoughataas(wilayaSelect.value, "{{ old('moughataa', $entreprise->moughataa ?? '') }}");
            }

            // Mettre à jour les moughataas quand la wilaya change
            wilayaSelect.addEventListener('change', function() {
                fetchMoughataas(this.value);
            });
        });
    </script>

@endsection