<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Agenda Mensual</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <style>
        .weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            margin-bottom: 4px;
        }

        .weekday {
            text-align: center;
            font-weight: bold;
            background: #f1f1f1;
            padding: 6px 0;
            border: 1px solid #ddd;
            font-size: 13px;
        }
    </style>

    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .calendar {
            width: 100%;
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;
        }

        .day {
            border: 1px solid #ddd;
            min-height: 120px;
            padding: 4px;
            background: #fff;
            position: relative;
            font-size: 12px;
        }

        .other-month {
            background: #f3f3f3;
            color: #aaa;
        }

        .day-header-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .day-number {
            font-weight: bold;
        }

        .btn-add {
            border: none;
            background: #0d6efd;
            color: #fff;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 12px;
        }

        .events {
            margin-top: 4px;
        }

        .event-text {
            background: #e9f2ff;
            margin-bottom: 2px;
            padding: 2px 4px;
            border-radius: 3px;
            font-size: 11px;
        }
    </style>
</head>

<body>
    <!-- MODAL -->
    <div class="modal fade" id="modalNuevo" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header py-2">
                    <h5 class="modal-title">➕ Nueva Agenda</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <input type="hidden" id="fechaSeleccionada">

                    <div class="mb-2">
                        <label class="form-label mb-1">Celular</label>
                        <input type="text" id="celular" class="form-control form-control-sm" maxlength="9"
                            placeholder="999999999">
                    </div>

                    <div class="mb-2">
                        <label class="form-label mb-1">Hora</label>
                        <input type="time" id="hora" class="form-control form-control-sm">
                    </div>

                    <div class="mb-2">
                        <label class="form-label mb-1">Motivo</label>
                        <select id="motivo" class="form-select form-select-sm">
                            <option value="">-- Seleccione --</option>
                            <option value="CONSULTAR_CON_FAMILIAR">CONSULTAR CON FAMILIAR</option>
                            <option value="FALTA_DATOS">FALTA DATOS</option>
                            <option value="FALTA_FOTO_DNI">FALTA FOTO DNI</option>
                            <option value="AGENDA_PARA_LA_RESPUESTA">AGENDA PARA LA RESPUESTA</option>
                        </select>
                    </div>

                    <div class="mb-2">
                        <label class="form-label mb-1">Observación</label>
                        <textarea id="observacion" class="form-control form-control-sm" rows="3"
                            placeholder="Comentario opcional..."></textarea>
                    </div>
                </div>

                <div class="modal-footer py-2">
                    <button class="btn btn-sm btn-secondary" data-bs-dismiss="modal">
                        Cancelar
                    </button>
                    <button class="btn btn-sm btn-primary" id="btnGuardarAgenda">
                        Guardar
                    </button>
                </div>

            </div>
        </div>
    </div>


    <div class="modal fade" id="modalNuevo2" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header py-2">
                    <h5 class="modal-title">➕ Actualizar Agenda</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <input type="hidden" id="upagenda_id">

                    <div class="mb-2">
                    <label class="form-label mb-1">Celular</label>
<div class="input-group input-group-sm">
    <input type="text"
           id="upcelular"
           class="form-control"
           maxlength="9"
           placeholder="999999999">

    <button class="btn btn-outline-secondary" type="button" id="btnCopiarCelular">
        📋
    </button>
</div>
                    </div>

                    <div class="mb-2">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">Hora</span>
                            <input type="time" id="uphora" class="form-control">

                            <span class="input-group-text">Fecha</span>
                            <input type="date" id="upfechaSeleccionada" class="form-control">
                        </div>

                    </div>

                    <div class="mb-2">
                        <label class="form-label mb-1">Motivo</label>
                        <select id="upmotivo" class="form-select form-select-sm">
                            <option value="">-- Seleccione --</option>
                            <option value="CONSULTAR_CON_FAMILIAR">CONSULTAR CON FAMILIAR</option>
                            <option value="FALTA_DATOS">FALTA DATOS</option>
                            <option value="FALTA_FOTO_DNI">FALTA FOTO DNI</option>
                            <option value="AGENDA_PARA_LA_RESPUESTA">AGENDA PARA LA RESPUESTA</option>
                        </select>
                    </div>

                    <div class="mb-2">
                        <label class="form-label mb-1">Observación</label>
                        <textarea id="upobservacion" class="form-control form-control-sm" rows="3"
                            placeholder="Comentario opcional..."></textarea>
                    </div>
                </div>

                <div class="modal-footer py-2">
                    <button class="btn btn-sm btn-secondary" data-bs-dismiss="modal">
                        Cancelar
                    </button>
                    <button class="btn btn-sm btn-primary" id="btnActualizar">
                        Actualizar
                    </button>
                </div>

            </div>
        </div>
    </div>
    <div class="container-fluid mt-4">

        <div class="calendar">
            <div class="calendar-header">
                <button id="prev">◀</button>
                <h3 id="monthTitle"></h3>
                <button id="next">▶</button>
            </div>
            <div class="weekdays">
                <div class="weekday">Lunes</div>
                <div class="weekday">Martes</div>
                <div class="weekday">Miércoles</div>
                <div class="weekday">Jueves</div>
                <div class="weekday">Viernes</div>
                <div class="weekday">Sábado</div>
                <div class="weekday">Domingo</div>
            </div>

            <div class="calendar-grid" id="calendarDays"></div>
        </div>
    </div>
    <script>
        let currentDate = new Date();

        function renderCalendar() {
            const year = currentDate.getFullYear();
            const month = currentDate.getMonth();

            const monthNames = [
                'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
                'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
            ];

            $('#monthTitle').text(monthNames[month] + ' ' + year);

            const firstDay = new Date(year, month, 1);
            let startDay = firstDay.getDay();
            startDay = startDay === 0 ? 6 : startDay - 1;

            const daysInMonth = new Date(year, month + 1, 0).getDate();
            const daysPrevMonth = new Date(year, month, 0).getDate();

            let html = '';

            for (let i = startDay - 1; i >= 0; i--) {
                html += `
        <div class="day other-month">
            <div class="day-number">${daysPrevMonth - i}</div>
        </div>`;
            }

            for (let d = 1; d <= daysInMonth; d++) {
                let fecha = `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;

                html += `
        <div class="day" data-fecha="${fecha}">
            <div class="day-header-row">
                <span class="day-number">${d}</span>
                <button class="btn-add" data-fecha="${fecha}">+</button>
            </div>
            <div class="events"></div>
        </div>`;
            }

            const totalCells = startDay + daysInMonth;
            const nextDays = (7 - totalCells % 7) % 7;

            for (let i = 1; i <= nextDays; i++) {
                html += `
        <div class="day other-month">
            <div class="day-number">${i}</div>
        </div>`;
            }

            $('#calendarDays').html(html);
        }

        function cargarAgendamientos() {
            $.get('<?php echo e(url("crm/agendas/agenda-dato")); ?>', function (data) {

                $('.events').html('');

                data.forEach(item => {
                    let texto = item.hora_llamada + ' ' + item.numero_telefono;

                    let dia = $('.day[data-fecha="' + item.fecha_llamada + '"]');

                    if (dia.length) {
                        /*     dia.find('.events').append(
                                '<div class="event-text">'
                                 + texto + '</div>'
                            ); */

                        dia.find('.events').append(`
                    <div class="event-text"
                        data-id="${item.id}"
                        data-hora="${item.hora_llamada}"
                        data-telefono="${item.numero_telefono}"
                        data-motivo="${item.motivo_llamada ?? ''}"
                        data-fecha="${item.fecha_llamada ?? ''}"
                        
                        data-observacion="${item.notas_adicionales ?? ''}">
                        ${texto}
                    </div>
                `);
                    }
                });

            });
        }

        renderCalendar();
        cargarAgendamientos();

        $('#prev').click(function () {
            currentDate.setMonth(currentDate.getMonth() - 1);
            renderCalendar();
            cargarAgendamientos();
        });

        $('#next').click(function () {
            currentDate.setMonth(currentDate.getMonth() + 1);
            renderCalendar();
            cargarAgendamientos();
        });

        $(document).on('click', '.btn-add', function (e) {
            e.stopPropagation();
            // alert('Agregar agenda para: ' + $(this).data('fecha'));
            let fecha = $(this).data('fecha');

            $('#fechaSeleccionada').val(fecha);
            $('#modalNuevo').modal('show');

        });
        ////////////////////////////////////////////////////////////////////////////////////////////
        //////////////////////////////////////////////////////////////////////////////////////////////#
        $(document).on('click', '.event-text', function () {

            $('#upagenda_id').val($(this).data('id'));
            $('#uphora').val($(this).data('hora'));
            $('#upcelular').val($(this).data('telefono'));
            $('#upmotivo').val($(this).data('motivo'));
            $('#upobservacion').val($(this).data('observacion'));
            $('#upfechaSeleccionada').val($(this).data('fecha'));
            $('#modalNuevo2').modal('show');
        });


        ////////////////////////////////////////////////////////////////////////#/////#
        /////////////////////////////////////////////////////////////////////////////////
        $("#btnGuardarAgenda").click(function () {

            if (
                //  $('#nombre').val() === '' || 
                $('#celular').val() === '' ||
                $('#hora_agenda').val() === '' ||
                $('#motivo').val() === 0) {
                alert('Por favor, completa todos los campos obligatorios.');
                return; // Detener la ejecución si falta algún campo
            }
            let numeroTelefono = $('#celular').val();
            let fechaAgenda = $('#fechaSeleccionada').val();
            let horaAgenda = $('#hora').val();
            let motivoLlamada = $('#motivo').val();
            let notasAdicionales = $('#observacion').val();

            alert(fechaAgenda);

            $.ajax({
                url: "<?php echo e(url('crm/agendas/agenreg2')); ?>",
                type: 'POST',
                data: {
                    _token: '<?php echo e(csrf_token()); ?>',
                    numeroTelefono: numeroTelefono,
                    fechaLlamada: fechaAgenda,
                    horaLlamada: horaAgenda,
                    motivoLlamada: motivoLlamada,
                    notasAdicionales: notasAdicionales
                },
                success: function (response) {
                    //    alert(response.message);

                    //  location.reload()
                    //  obtenerLlamadasHoy(); // Recargar la tabla con la nueva llamada registrada


                    $('#modalNuevo').modal('hide');

                    cargarAgendamientos(); // repinta sin recargar

                    $('#numero_telefono').val('');
                    $('#hora_llamada').val('');
                    $('#observacion').val('');

                },
                error: function (xhr) {

                    alert('Hubo un error al agendar la llamada.');

                }
            });

        });

        ////////////////////////////////////////////////////////////////#////////////#
        ////////////////////////////
        $('#btnActualizar').on('click', function () {

            let datos = {
                id: $('#upagenda_id').val(),              // hidden
                fecha_llamada: $('#upfechaSeleccionada').val(),
                hora_llamada: $('#uphora').val(),
                numero_telefono: $('#upcelular').val(),
                motivo_llamada: $('#upmotivo').val(),
                notas_adicionales: $('#upobservacion').val(),
                _token: '<?php echo e(csrf_token()); ?>'
            };

            $.ajax({
                url: "<?php echo e(url('crm/agendas/agenda-update')); ?>",
                type: 'POST',
                data: datos,
                success: function (resp) {

                    $('#modalNuevo2').modal('hide');

                    cargarAgendamientos(); // refresca calendario SIN recargar

                },
                error: function (err) {
                    alert('Error al actualizar');
                    console.log(err);
                }
            });

        });
    </script>
<script>
$('#btnCopiarCelular').on('click', function () {
    let celular = $('#upcelular').val();

    if (!celular) return;

    navigator.clipboard.writeText(celular).then(() => {
        $(this).text('✔');

        setTimeout(() => {
            $(this).text('📋');
        }, 1200);
    });
});
</script>

</body>

</html><?php /**PATH C:\xampp\htdocs\example-app - copia\resources\views/view_agenda/agenda.blade.php ENDPATH**/ ?>