{# Modal for creating/editing activity sectors #}
<div id="activity-sector-modal"
     data-controller="activity-sector-modal"
     data-activity-sector-modal-company-id-value="{{ company.id }}"
     data-activity-sector-modal-target="modal"
     class="hidden fixed inset-0 z-50 overflow-y-auto"
     aria-labelledby="modal-title"
     role="dialog"
     aria-modal="true"
     tabindex="-1">

    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">

        {# Background overlay #}
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
             data-action="click->activity-sector-modal#close"
             aria-hidden="true"></div>

        {# This element is to trick the browser into centering the modal contents. #}
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

        {# Modal panel #}
        <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full sm:p-6 relative">

            {# Loading Overlay #}
            <div data-activity-sector-modal-target="loadingOverlay"
                 class="hidden absolute inset-0 bg-white bg-opacity-90 flex items-center justify-center z-10 rounded-lg">
                <div class="text-center">
                    <svg class="inline mr-2 w-12 h-12 text-blue-600 animate-spin fill-blue-200" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
                        <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
                    </svg>
                    <p class="mt-3 text-sm text-gray-700 font-medium">Enregistrement en cours...</p>
                </div>
            </div>

            {# Modal Header #}
            <div class="flex items-start justify-between mb-5">
                <h3 class="text-xl font-semibold text-gray-900"
                    id="modal-title"
                    data-activity-sector-modal-target="modalTitle">
                    Nouveau secteur d'activité
                </h3>
                <button type="button"
                        data-action="click->activity-sector-modal#close"
                        data-activity-sector-modal-target="closeButton"
                        class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center">
                    <i class="fas fa-times text-xl"></i>
                    <span class="sr-only">Fermer</span>
                </button>
            </div>

            {# Modal Body - Form #}
            <form id="activity-sector-modal-form"
                  data-activity-sector-modal-target="form"
                  data-action="submit->activity-sector-modal#submit"
                  class="space-y-4"
                  novalidate>

                {# Hidden field for sector ID (used in edit mode) #}
                <input type="hidden"
                       name="id"
                       data-activity-sector-modal-target="sectorId">

                {# CSRF Token #}
                <input type="hidden" name="_token" value="{{ csrf_token('activity_sector_form') }}">

                {# Name Field #}
                <div>
                    <label for="sector-name" class="block text-sm font-medium text-gray-700 mb-2">
                        Nom du secteur <span class="text-red-500">*</span>
                    </label>
                    <input type="text"
                           id="sector-name"
                           name="name"
                           required
                           maxlength="100"
                           data-activity-sector-modal-target="nameInput"
                           data-action="input->activity-sector-modal#validateField"
                           placeholder="Technologies, Commerce, Industrie..."
                           class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                    <div data-activity-sector-modal-target="errorName" class="hidden mt-1 text-xs text-red-600" role="alert"></div>
                </div>

                {# Code Field #}
                <div>
                    <label for="sector-code" class="block text-sm font-medium text-gray-700 mb-2">
                        Code (abréviation)
                    </label>
                    <input type="text"
                           id="sector-code"
                           name="code"
                           maxlength="10"
                           data-activity-sector-modal-target="codeInput"
                           data-action="input->activity-sector-modal#validateField"
                           placeholder="IT, COM, IND..."
                           pattern="[A-Z0-9]*"
                           style="text-transform: uppercase;"
                           class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                    <div data-activity-sector-modal-target="errorCode" class="hidden mt-1 text-xs text-red-600" role="alert"></div>
                    <p class="mt-1 text-xs text-gray-500">Code court en majuscules (optionnel)</p>
                </div>

                {# Description Field #}
                <div>
                    <label for="sector-description" class="block text-sm font-medium text-gray-700 mb-2">
                        Description
                    </label>
                    <textarea id="sector-description"
                              name="description"
                              rows="3"
                              maxlength="500"
                              data-activity-sector-modal-target="descriptionInput"
                              placeholder="Description du secteur d'activité..."
                              class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"></textarea>
                    <div data-activity-sector-modal-target="errorDescription" class="hidden mt-1 text-xs text-red-600" role="alert"></div>
                </div>

                {# Color and Icon - Two columns #}
                <div class="grid grid-cols-2 gap-4">
                    {# Color Select #}
                    <div>
                        <label for="sector-color" class="block text-sm font-medium text-gray-700 mb-2">
                            Couleur
                        </label>
                        <select id="sector-color"
                                name="color"
                                data-activity-sector-modal-target="colorSelect"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                            <option value="blue">Bleu</option>
                            <option value="green">Vert</option>
                            <option value="red">Rouge</option>
                            <option value="yellow">Jaune</option>
                            <option value="purple">Violet</option>
                            <option value="pink">Rose</option>
                            <option value="indigo">Indigo</option>
                            <option value="orange">Orange</option>
                            <option value="teal">Turquoise</option>
                            <option value="gray">Gris</option>
                        </select>
                        <p class="mt-1 text-xs text-gray-500">Couleur du badge</p>
                    </div>

                    {# Icon Select #}
                    <div>
                        <label for="sector-icon" class="block text-sm font-medium text-gray-700 mb-2">
                            Icône
                        </label>
                        <select id="sector-icon"
                                name="icon"
                                data-activity-sector-modal-target="iconSelect"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                            <option value="fa-briefcase">Porte-documents (Affaires)</option>
                            <option value="fa-industry">Industrie</option>
                            <option value="fa-store">Commerce</option>
                            <option value="fa-laptop-code">Technologies</option>
                            <option value="fa-hospital">Santé</option>
                            <option value="fa-graduation-cap">Éducation</option>
                            <option value="fa-utensils">Restauration</option>
                            <option value="fa-building">Immobilier</option>
                            <option value="fa-truck">Transport</option>
                            <option value="fa-hammer">Construction</option>
                            <option value="fa-chart-line">Finance</option>
                            <option value="fa-leaf">Agriculture</option>
                            <option value="fa-palette">Arts & Culture</option>
                            <option value="fa-phone">Télécommunications</option>
                            <option value="fa-bolt">Énergie</option>
                            <option value="fa-seedling">Environnement</option>
                            <option value="fa-film">Média & Communication</option>
                            <option value="fa-balance-scale">Juridique</option>
                            <option value="fa-users">Services</option>
                            <option value="fa-shopping-cart">E-commerce</option>
                        </select>
                    </div>
                </div>

                {# Position and Active - Two columns #}
                <div class="grid grid-cols-2 gap-4">
                    {# Position Field #}
                    <div>
                        <label for="sector-position" class="block text-sm font-medium text-gray-700 mb-2">
                            Position
                        </label>
                        <input type="number"
                               id="sector-position"
                               name="position"
                               min="0"
                               value="0"
                               data-activity-sector-modal-target="positionInput"
                               placeholder="0"
                               class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                        <p class="mt-1 text-xs text-gray-500">Ordre d'affichage (0 = premier)</p>
                    </div>

                    {# Active Checkbox #}
                    <div class="flex items-center pt-6">
                        <input type="checkbox"
                               id="sector-active"
                               name="isActive"
                               value="1"
                               checked
                               data-activity-sector-modal-target="isActiveCheckbox"
                               class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2">
                        <label for="sector-active" class="ml-2 text-sm font-medium text-gray-900">
                            Secteur actif
                        </label>
                    </div>
                </div>

            </form>

            {# Modal Footer - Action Buttons #}
            <div class="mt-6 flex items-center justify-end gap-3">
                <button type="button"
                        data-action="click->activity-sector-modal#close"
                        class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    <i class="fas fa-times mr-2"></i>
                    Annuler
                </button>
                <button type="submit"
                        form="activity-sector-modal-form"
                        data-activity-sector-modal-target="submitButton"
                        data-action="click->activity-sector-modal#submit"
                        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    <i class="fas fa-save mr-2" data-activity-sector-modal-target="submitIcon"></i>
                    <span data-activity-sector-modal-target="submitText">Enregistrer</span>
                </button>
            </div>

        </div>
    </div>
</div>