@extends('layouts.dashboardnew')

@section('content')


{{-- ===================== HEADER ===================== --}}
<div class="card border-0 shadow-sm rounded-4 mb-3 overflow-hidden">
    <div class="card-body p-4 bg-primary bg-gradient text-white position-relative">
        <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
            <div class="d-flex align-items-center gap-3">
                <div class="bg-white bg-opacity-25 rounded-3 d-inline-flex align-items-center justify-content-center border border-light border-opacity-25"
                     style="width:52px;height:52px;">
                    <i class="fa-solid fa-calendar-days fs-4"></i>
                </div>
                <div>
                    <h4 class="fw-bold mb-1 text-white">Calendario de eventos</h4>
                    <p class="mb-0 small text-white text-opacity-75">
                        Agenda, organiza y consulta los eventos. Haz clic en un día para crear un evento o sobre uno existente para verlo.
                    </p>
                </div>
            </div>

            <div class="d-flex flex-column flex-sm-row gap-2 align-self-start align-self-md-center">
                <span class="badge bg-white text-primary rounded-pill fw-semibold px-3 py-2 align-self-start">
                    <i class="fa-solid fa-calendar-check me-1"></i> {{ count($calendarios) }} eventos
                </span>
                <button type="button"
                        class="btn bg-white fw-semibold rounded-pill px-3 py-1 text-primary shadow-sm align-self-start d-inline-flex align-items-center gap-2"
                        data-bs-toggle="modal" data-bs-target="#agregar">
                    <i class="fa-solid fa-plus"></i> Nuevo evento
                </button>
            </div>
        </div>
    </div>
</div>


{{-- ===================== LEYENDA DE COLORES ===================== --}}
<div class="card border-0 shadow-sm rounded-4 mb-3">
    <div class="card-body p-3">
        <div class="d-flex flex-wrap align-items-center gap-3">
            <span class="fw-semibold text-secondary small text-uppercase" style="letter-spacing:.06em;font-size:.7rem;">
                <i class="fa-solid fa-palette me-1 text-primary"></i> Colores
            </span>

            <div class="d-flex flex-wrap gap-3 small text-secondary">
                <span class="d-inline-flex align-items-center gap-1">
                    <span class="rounded-circle d-inline-block" style="width:10px;height:10px;background:#00acd6;"></span> Azul
                </span>
                <span class="d-inline-flex align-items-center gap-1">
                    <span class="rounded-circle d-inline-block" style="width:10px;height:10px;background:#ffc107;"></span> Amarillo
                </span>
                <span class="d-inline-flex align-items-center gap-1">
                    <span class="rounded-circle d-inline-block" style="width:10px;height:10px;background:#28a745;"></span> Verde
                </span>
                <span class="d-inline-flex align-items-center gap-1">
                    <span class="rounded-circle d-inline-block" style="width:10px;height:10px;background:#dc3545;"></span> Rojo
                </span>
                <span class="d-inline-flex align-items-center gap-1">
                    <span class="rounded-circle d-inline-block" style="width:10px;height:10px;background:#6c757d;"></span> Gris
                </span>
                <span class="d-inline-flex align-items-center gap-1">
                    <span class="rounded-circle d-inline-block" style="width:10px;height:10px;background:#343a40;"></span> Negro
                </span>
            </div>
        </div>
    </div>
</div>


{{-- ===================== CALENDARIO ===================== --}}
<div class="row">
    <div class="col-12">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-3 p-md-4">
                <div id="calendario"></div>
            </div>
        </div>
    </div>
</div>


@include('calendario.modal.agregar')
@include('calendario.modal.editar')

@endsection


@push('script')
<script type="text/javascript">

    $(document).ready(function(){

        $('#calendario').fullCalendar({
            header:{
                left  : 'prev,next,today',
                center: 'title',
                right : 'month, basicWeek, basicDay'
            },

            events: [
                @foreach($calendarios as $calendario)
                {
                    id            : '{{$calendario['id']}}',
                    iduser        : '{{$calendario['iduser']}}',
                    title         : '{{$calendario['titulo']}}',
                    contenido     : '{{$calendario['contenido']}}',
                    lugar         : '{{$calendario['lugar']}}',
                    color         : '{{$calendario['color']}}',
                    tipo          : '{{$calendario['tipo']}}',
                    especifico    : '{{$calendario['especifico']}}',
                    start         : '{{$calendario['inicio']}}',
                    end           : '{{$calendario['vence']}}',
                    backgroundColor: '{{$calendario['color']}}',
                    borderColor   : '{{$calendario['color']}}',
                    textColor     : '#fff',
                },
                @endforeach
            ],

            // ── Click en un día → modal de agregar ──
            dayClick:function(date, jsEvent, view){
                $('.fechainicio').val(date.format("YYYY-MM-DD[T]HH:mm:ss"));
                $('#agregar').modal('show');
            },

            // ── Click en un evento → modal de detalle/editar ──
            eventClick:function(calEvent, jsEvent, view){

                // Título del header del modal de editar
                $('.exampleModalLabel').text(calEvent.title);

                // Cargar valores en los campos de texto/select/hidden
                $('.titulo').val(calEvent.title);
                $('.contenido').val(calEvent.contenido);
                $('.lugar').val(calEvent.lugar);
                $('.id').val(calEvent.id);
                $('.tipo').val(calEvent.tipo);
                $('.especifico').val(calEvent.especifico);
                $('.iduser').val(calEvent.iduser);
                $('.inicio').val(calEvent.start.format());
                $('.vence').val(calEvent.end.format());

                // ── Color picker: marcar el radio que coincide con el color ──
                $('#editar .color').prop('checked', false);
                $('#editar .color[value="' + calEvent.color + '"]').prop('checked', true);

                // Mostrar/ocultar el campo del ID específico
                if(calEvent.tipo == 5){
                    $('#editar .subcategoria').show();
                }else{
                    $('#editar .subcategoria').hide();
                }

                // Permisos: solo el dueño del evento puede editar/eliminar
                if('{{Auth::user()->ID}}' == calEvent.iduser){
                    $('#editar .ocultar-boton').show();
                    $('#editar .disabled').attr('disabled', false);
                }else{
                    $('#editar .ocultar-boton').hide();
                    $('#editar .disabled').attr('disabled', true);
                }

                $('#editar').modal('show');
            }
        });
    });


    // Mostrar/ocultar el campo "ID del usuario" cuando se elige "Afiliado específico" (tipo 5)
    function seleccionar(){
        $('.opcion').each(function(){
            var $sel = $(this);
            var op = $sel.val();
            var $sub = $sel.closest('.modal-body').find('.subcategoria');
            if(op == "5"){
                $sub.show();
            }else{
                $sub.hide();
            }
        });
    }

</script>
@endpush