<?php $__env->startSection('title', 'Calendario de Audiencias'); ?>
<?php $__env->startSection('content'); ?>
<style>
    .bg-orange { background-color:#fd7e14; }
    .bg-danger { background-color:#dc3545; }
    .bg-warning { background-color:#ffc107; }
    .bg-primary { background-color:#007bff; }
    .bg-success { background-color:#28a745; }
    .bg-secondary { background-color:#6c757d; }
    .fc-event-custom {
    font-size: 0.75rem;
    line-height: 1.2;
}

.fc-daygrid-event {
    border-radius: 6px;
    padding: 2px 4px;
}

</style>
    <div class="row ">
        <div class="col-md-12">
            <div class="card ">
                <div class="card-header text-white" style="background-color:#007bff;">
                    <i class="fa fa-gavel"></i> Calendario de Audiencias y Requerimientos
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-end">
                        <a href="<?php echo e(route('audiencias.export.excel')); ?>"
                        class="btn btn-success">
                        <i class="fas fa-file-excel"></i> Exportar Audiencias
                        </a>
                    </div>
                    

                    <div class="table-responsive">
                        <div id="calendar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('scripts'); ?>

<script>
document.addEventListener('DOMContentLoaded', function() {

    let calendarEl = document.getElementById('calendar');

    let calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'es',
        initialView: 'dayGridMonth',
        height: 'auto',

        dayMaxEvents: 3, // 👈 evita saturación
        eventDisplay: 'block',

        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,listWeek'
        },

        events: "<?php echo e(route('home.audiencias.calendar')); ?>",

        eventContent: function(arg) {
            let tipo = arg.event.extendedProps.tipo;
            let icono = tipo === 'AUDIENCIA' ? '⚖️' : '⏰';

            return {
                html: `
                    <div class="fc-event-custom">
                        <strong>${icono} ${arg.event.title}</strong><br>
                        <small>${arg.timeText}</small>
                    </div>
                `
            };
        },

        eventClick: function(info) {
            let e = info.event.extendedProps;

            let contenido = `
                <strong>Tipo:</strong> ${e.tipo}<br>
            `;

            if (e.tipo === 'AUDIENCIA') {
                contenido += `
                    <strong>Proceso:</strong> ${e.proceso}<br>
                    <strong>Tipo Proceso:</strong> ${e.tipo_proceso}<br>
                    <strong>Juzgado:</strong> ${e.juzgado}<br>
                    <strong>Sala:</strong> ${e.sala}<br>
                    <strong>Lugar:</strong> ${e.lugar}
                `;
            } else {
                contenido += `
                    <strong>Motivo:</strong> ${e.motivo}<br>
                    <strong>Fecha solicitud:</strong> ${e.fecha_inicio}
                    <strong>Plazo:</strong> ${e.plazo} días<br>
                `;
            }

            // ⚠️ Idealmente usar un modal Bootstrap
            Swal.fire({
                title: info.event.title,
                html: contenido,
                icon: 'info'
            });
        }

    });

    calendar.render();
});
</script>


<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/html/lexflow/resources/views/home.blade.php ENDPATH**/ ?>