@php
    $idx = isset($index) ? intval($index) : 0;
    $defaultStart = $idx === 0 ? '08:00' : '';
    $defaultEnd = $idx === 0 ? '17:00' : '';
@endphp
<div class="slot-row slot-card" data-slot-index="{{ $idx }}">
    <div class="slot-card-header" data-i18n="slot-header">
        <div class="slot-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['schedules']['time_slot'] ?? 'Créneau' }} #<span class="slot-index">{{ $idx + 1 }}</span></div>
        @if($idx > 0)
            <button type="button" class="slot-remove-btn" aria-label="{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['schedules']['remove_slot'] ?? 'Supprimer' }}">- {{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['schedules']['remove_slot'] ?? 'Supprimer' }}</button>
        @endif
    </div>
    <div class="slot-card-body">
        <div class="slot-type-title subsection-title spaced" data-i18n="slot-type-title">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['schedules']['slot_type_title'] ?? 'Type de créneau' }}</div>
        <div class="slot-type-toggle" role="group" aria-label="{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['schedules']['slot_type_title'] ?? 'Type de créneau' }}">
            @php $defaultType = 'travaux'; @endphp
            <button type="button" class="toggle-btn {{ $defaultType === 'travaux' ? 'active' : '' }}" data-value="travaux">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['schedules']['type_travaux'] ?? 'Travaux' }}</button>
            <button type="button" class="toggle-btn {{ $defaultType === 'intervention' ? 'active' : '' }}" data-value="intervention">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['schedules']['type_intervention'] ?? 'Intervention' }}</button>
            <input type="hidden" name="slot_type[]" value="{{ $defaultType }}">
        </div>
        <div class="form-row slot-times-row">
            <div class="horaires-form-group">
                <label for="start-time-{{ $idx }}">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['schedules']['start_time'] ?? 'Heure de début' }}</label>
                <input type="time" id="start-time-{{ $idx }}" name="start_time[]" value="{{ $defaultStart }}" required>
            </div>
            <div class="horaires-form-group">
                <label for="end-time-{{ $idx }}">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['schedules']['end_time'] ?? 'Heure de fin' }}</label>
                <input type="time" id="end-time-{{ $idx }}" name="end_time[]" value="{{ $defaultEnd }}" required>
            </div>
        </div>
        <div class="slot-error-text" style="display:none;">
            {{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['schedules']['slot_overlap_error'] ?? 'Ce créneau est invalide ou chevauche un autre.' }}
        </div>
        <div class="form-row">
            <div class="horaires-form-group slot-address-group" style="grid-column: 1 / -1;">
                <label for="address-{{ $idx }}">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['schedules']['select_address'] ?? 'Adresse' }}</label>
                
                <!-- Custom select pour mobile -->
                <div class="custom-address-select" data-slot-index="{{ $idx }}">
                    <button type="button" class="custom-select-trigger" data-slot-index="{{ $idx }}">
                        <span class="custom-select-value">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['schedules']['select_address_placeholder'] ?? 'Sélectionner une adresse' }}</span>
                        <i class="fas fa-chevron-down custom-select-arrow"></i>
                    </button>
                </div>
                
                <!-- Dropdown plein écran (en dehors pour positionnement fixed) -->
                <div class="custom-select-dropdown" data-slot-index="{{ $idx }}">
                    <div class="custom-select-search">
                        <i class="fas fa-search"></i>
                        <input type="text" placeholder="Rechercher..." class="custom-select-search-input">
                        <button type="button" class="custom-select-close" data-slot-index="{{ $idx }}">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="custom-select-options">
                        @foreach(($addresses ?? []) as $address)
                            @php
                                $label = $address->short_address ?? ($address->full_address ?? ($address->adresse ?? ''));
                                $client = $address->client ?? null;
                                $hasLogo = $client && $client->has_custom_logo && $client->client_logo && $client->client_logo !== 'null';
                                $initials = $client ? ($client->initials ?? strtoupper(substr($client->client_name ?? 'C', 0, 2))) : 'C';
                                $colors = ['#007bff', '#28a745', '#dc3545', '#ffc107', '#17a2b8', '#6f42c1', '#e83e8c', '#fd7e14', '#20c997', '#6c757d'];
                                $color = $client ? $colors[abs(crc32($client->client_id ?? '0')) % count($colors)] : '#6c757d';
                            @endphp
                            <div class="custom-select-option" data-value="{{ $address->id }}" data-slot-index="{{ $idx }}">
                                <div class="option-client-logo">
                                    @if($hasLogo)
                                        <img src="{{ $client->client_logo }}" alt="{{ $client->client_name ?? '' }}" class="client-logo-img">
                                    @else
                                        <div class="client-initials" style="background-color: {{ $color }};">
                                            {{ $initials }}
                                        </div>
                                    @endif
                                </div>
                                <div class="option-content">
                                    <div class="option-client-name">{{ $client->client_name ?? 'Client inconnu' }}</div>
                                    <div class="option-address">{{ $label }}</div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                
                <!-- Select natif caché (pour la soumission du formulaire) -->
                <select id="address-{{ $idx }}" name="address_id[]" required class="hidden-native-select">
                    <option value="">{{ \App\Helpers\TranslationHelper::getUserTranslations()['translations']['schedules']['select_address_placeholder'] ?? 'Sélectionner une adresse' }}</option>
                    @foreach(($addresses ?? []) as $address)
                        @php
                            $label = $address->short_address ?? ($address->full_address ?? ($address->adresse ?? ''));
                        @endphp
                        <option value="{{ $address->id }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
</div>