@props([
    'name',
    'label',
    'value' => null,
    'required' => false,
    'help' => null,
    'options' => [],
    'multiple' => false,
    'placeholder' => 'Choose an option',
])

@php
    $safeValue = is_string($value) ? $value : (is_array($value) ? $value : (string)($value ?? ''));
    $isMultiple = $multiple === true || $multiple === 'true';
    $selectId = $name . '_' . uniqid();
@endphp

<div class="form-group input-with-label">
    <label for="{{ $selectId }}" class="form-label fw-semibold">
        {{ $label }}
        @if($required)
            <span class="text-danger ms-1">*</span>
        @endif
        @if($help)
            <i class="fas fa-info-circle ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $help }}"></i>
        @endif
    </label>

    <div class="select-wrapper position-relative">
        <select
            id="{{ $selectId }}"
            name="{{ $name }}{{ $isMultiple ? '[]' : '' }}"
            class="form-select w-full @error($name) is-invalid @enderror"
            {{ $required ? 'required' : '' }}
            {{ $isMultiple ? 'multiple' : '' }}
            {{ $isMultiple ? 'size=5' : '' }}
        >
            @if(!$isMultiple && !$required)
                <option value="">{{ $placeholder }}</option>
            @endif

            @foreach($options as $optionValue => $optionLabel)
                @if($isMultiple)
                    <option value="{{ $optionValue }}"
                            {{ (is_array($safeValue) && in_array($optionValue, $safeValue)) ||
                               (is_string($safeValue) && strpos($safeValue . ',', $optionValue . ',') !== false) ? 'selected' : '' }}>
                        {{ $optionLabel }}
                    </option>
                @else
                    <option value="{{ $optionValue }}"
                            {{ old($name, $safeValue) == $optionValue ? 'selected' : '' }}>
                        {{ $optionLabel }}
                    </option>
                @endif
            @endforeach
        </select>
    </div>

    @if($isMultiple)
        <div class="select-info mt-2">
            <small class="text-muted">
                <i class="fas fa-info-circle me-1"></i>
                Hold Ctrl (Cmd on Mac) to select multiple options
            </small>
        </div>
    @endif

    @error($name)
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror

    @if($help && !$errors->has($name))
        <div class="form-text text-muted">{{ $help }}</div>
    @endif
</div>

<style>
.select-wrapper {
    position: relative;
}

.form-select[multiple] {
    padding-right: 0.75rem;
    background-image: none;
}

.form-select[multiple]:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6c757d;
    transition: color 0.15s ease-in-out;
    z-index: 2;
}

.form-select:focus + .select-arrow {
    color: var(--bs-primary);
}

.form-select.is-invalid {
    border-color: var(--bs-danger);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    padding-right: calc(1.5em + 0.75rem);
}

.form-select.is-invalid:focus {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

.form-select.is-invalid + .select-arrow {
    right: calc(1.5em + 0.75rem);
}

.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--bs-danger);
}

.form-text {
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: var(--bs-gray-600);
}

.select-info {
    font-style: italic;
}

/* Multi-select styling */
.form-select[multiple] option {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

.form-select[multiple] option:last-child {
    border-bottom: none;
}

.form-select[multiple] option:checked {
    background-color: var(--bs-primary);
    color: white;
}

.form-select[multiple] option:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}


/* Responsive adjustments */
@media (max-width: 576px) {
    .form-select {
        font-size: 0.9rem;
    }

    .form-select[multiple] {
        font-size: 0.85rem;
    }
}

/* Animation for dropdown */
.form-select {
    transition: all 0.2s ease;
}

.form-select:hover:not(:disabled):not([readonly]) {
    border-color: #adb5bd;
}

/* Enhanced focus styles */
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
    transform: translateY(-1px);
}

/* Loading state (if needed) */
.form-select.loading {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12'%3e%3ccircle cx='6' cy='6' r='4.5' fill='none' stroke='%236c757d' stroke-width='1'/%3e%3cpath d='M6 1.5A4.5 4.5 0 0 1 10.5 6' stroke='%23007bff' stroke-width='1' stroke-linecap='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { background-position-x: right 12px; }
    to { background-position-x: right 12px; }
}
</style>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectElements = document.querySelectorAll('.form-select');

    selectElements.forEach(select => {
        // Add custom change event handling if needed
        select.addEventListener('change', function() {
            // Custom validation or processing can go here
            if (this.value) {
                this.classList.remove('is-invalid');
                this.classList.add('is-valid');
            }
        });

        // Enhanced keyboard navigation for multi-select
        if (select.hasAttribute('multiple')) {
            select.addEventListener('keydown', function(e) {
                // Allow Ctrl+A to select all in multi-select
                if (e.ctrlKey && e.key === 'a') {
                    e.preventDefault();
                    for (let option of this.options) {
                        option.selected = true;
                    }
                    // Trigger change event
                    this.dispatchEvent(new Event('change'));
                }

                // Allow Ctrl+D to deselect all
                if (e.ctrlKey && e.key === 'd') {
                    e.preventDefault();
                    for (let option of this.options) {
                        option.selected = false;
                    }
                    // Trigger change event
                    this.dispatchEvent(new Event('change'));
                }
            });
        }

        // Add accessibility improvements
        select.addEventListener('focus', function() {
            this.setAttribute('aria-expanded', 'true');
        });

        select.addEventListener('blur', function() {
            this.setAttribute('aria-expanded', 'false');
        });
    });

    // Initialize tooltips if Bootstrap is available
    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    }
});
</script>
@endpush