@php
    $appointmentTags = \App\Models\AppointmentTag::where('active', true)
                                         ->orderBy('order')
                                         ->get();
    
    // Si estamos editando una cita, obtenemos las etiquetas ya seleccionadas
    $selectedTags = [];
    if (isset($appointment) && $appointment) {
        $selectedTags = $appointment->tags->pluck('id')->toArray();
    }
@endphp

<div class="section-container">
    <h4><i class="bi bi-tags me-2"></i>{{ __('appointment-tags.appointment_tags') }}</h4>
    
    <div class="row">
        <div class="col-12">
            <label class="form-label">{{ __('appointment-tags.select_tags') }}</label>
            <div class="tags-container">
                @if($appointmentTags->count() > 0)
                    @foreach($appointmentTags as $tag)
                        <div class="form-check form-check-inline mb-3">
                            <input class="form-check-input tag-input" 
                                   type="checkbox" 
                                   name="appointment_tags[]" 
                                   id="tag-{{ $tag->id }}" 
                                   value="{{ $tag->id }}"
                                   {{ in_array($tag->id, $selectedTags) ? 'checked' : '' }}>
                            <label class="form-check-label" for="tag-{{ $tag->id }}">
                                <span class="tag-bubble" style="background-color: {{ $tag->color }}">
                                    {{ $tag->name }}
                                </span>
                            </label>
                        </div>
                    @endforeach
                @else 
                    <div class="alert alert-info">
                        {{ __('No hay marcas disponibles. Puede configurarlas en la sección de administración.') }}
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<style>
    .tags-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .tag-bubble {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 30px;
        color: white;
        font-weight: 500;
        font-size: 0.9rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: all 0.2s ease;
    }
    
    .form-check-input:checked + .form-check-label .tag-bubble {
        box-shadow: 0 3px 8px rgba(0,0,0,0.2);
        transform: translateY(-2px);
    }
    .form-check-input:checked + .form-check-label .tag-bubble::after {
        content: "";
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid rgba(0,0,0,0.4);
        transform: translateY(-2px);
        z-index: 1;
        top: 100%;
        left: 50%;
    }
    
    .form-check-input {
        display: none;
    }
    
    .form-check-label {
        cursor: pointer;
    }
    
    .form-check-input:not(:checked) + .form-check-label .tag-bubble {
        opacity: 0.7;
    }
</style>

@if(!App\Models\Settings::getMultipleAppointmentTagsMode())
<script>
    $(document).ready(function() {
        $('.tag-input').change(function() {
            if ($(this).is(':checked')) {
                let tags = document.querySelectorAll('.tag-input');
                for(let tag of tags) {
                    if(tag != this) {
                        tag.checked = false;
                    }
                }
            } 
        });
    });
</script>
@endif


