@extends('layouts.app')

@section('head')
<style>
    .bg-cancelada {
        background-color: tomato !important;
    }
    .bg-pendiente {
        background-color: blue !important;
    }
    .bg-finalizada {
        background-color: purple !important;
    }
    .bg-pagada{
        background-color: green !important;
    }
</style>
@endsection

@section('preloader')
@endsection

@section('navbar')
@include('admin.shared.navbar')
@endsection

@section('aside')
@include('admin.shared.aside')
@endsection

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">
                        Citas
                        <a class="text-primary" style="cursor: pointer;" href="{{ url('/clientes/nuevo') }}" title="Nuevo Cita">
                            <i class="fas fa-plus-circle"></i>
                        </a>
                    </h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ url('/home') }}">Inicio</a></li>
                        <li class="breadcrumb-item active">Citas</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        @if (Session::has('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <strong>¡Felicitaciones!</strong> {{ Session::get('success') }}
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        @endif
                    </div>
                    <div class="col-md-12">
                        @if($horarios == null || $horarios->count() == 0)
                        <form action="{{ url('/citas/consultor') }}" method="POST">
                            <div class="row">
                                @csrf
                                <div class="col-md-1">Desde</div>
                                <div class="col-md-2">
                                    <input type="time" class="form-control form-control-sm" name="hora_inicio" required>

                                </div>
                                <div class="col-md-1">Hasta</div>
                                <div class="col-md-2">
                                    <input type="time" class="form-control form-control-sm" name="hora_fin" required>
                                </div>
                                <div class="col-md-2">
                                    <button type="submit" class="btn btn-primary btn-sm btn-block">Guardar</button>
                                </div>
                            </div>
                        </form>
                        @else
                        @foreach($horarios as $horario)
                        <form action="{{ url('/citas/consultor/' . $horario->id) }}" method="POST">
                            <div class="row">
                                @csrf
                                @method('put')
                                <div class="col-md-1">Desde</div>
                                <div class="col-md-2">
                                    <input type="time" class="form-control form-control-sm" id="hora_inicio" name="hora_inicio" value="{{ $horario->hora_inicio}}" required>
                                </div>
                                <div class="col-md-1">Hasta</div>
                                <div class="col-md-2">
                                    <input type="time" class="form-control form-control-sm" id="hora_fin" name="hora_fin" value="{{ $horario->hora_fin}}" required>
                                </div>
                                <div class="col-md-1">
                                    <button type="submit" class="btn btn-primary btn-sm btn-block">Guardar</button>
                                </div>
                            </div>
                        </form>
                        @endforeach
                        @endif
                    </div>
                    <div class="col-md-12">
                        <!-- /.col -->
                        <div class="card card-primary mt-3">
                            <div class="card-body p-0">
                                <!-- THE CALENDAR -->
                                @if($horarios != null)
                                <div class="p-4">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <label>Estatus de las citas:</label>
                                        </div>
                                        <div class="col-md-4">
                                            <div id="estatus-colores"></div>
                                        </div>
                                    </div>
                                </div>
                                <div id="calendar"></div>
                                @endif
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                </div>
                <!-- /.row (main row) -->
            </div>

            <div class="modal" id="cita-modal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <form id="formulario-detalle" method="POST" action="{{ url('citas/estatus') }}">
                            @csrf
                            <div class="modal-header bg-dark">
                                <h5 class="modal-title" id="citaModalLabel">Detalle de la Cita</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="dissmised()">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="">Clente</label>
                                    <input name="cliente_editar"
                                        id="cliente_editar"
                                        class="form-control form-control-sm"
                                        readonly
                                        />

                                    <input name="cita_id"
                                        id="cita_id"
                                        class="form-control form-control-sm"
                                        type="hidden"
                                        />
                                </div>
                                <div class="form-group">
                                    <label>Cambiar estatus a:</label>
                                    <select name="estatus" id="estatus"  class="form-control form-control-sm">
                                        <option value="pendiente">Pendiente</option>
                                        <option value="cancelada">Cancelada</option>
                                        <option value="finalizada">Finalizada</option>
                                    </select>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button id="btn-submit-formulario-detalle" type="submit" class="btn     btn-sm btn-primary">
                                    Guardar
                                </button>
                                <button type="button" class="btn btn-sm btn-danger" onclick="dissmised()">
                                    Cancelar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Modal -->
            <div class="modal fade" id="nueva-cita-modal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header bg-dark">
                            <h5 class="modal-title" id="nuevaCitaModalLAbel">Solicitar Cita</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="dissmised()">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form id="formulario-nueva-cita" method="POST" action="{{ url('citas') }}">
                            @csrf
                        <div class="modal-body">
                            <label for="">Seleccione Cliente</label>
                            <select name="cliente" id="cliente" class="form-control form-control-sm" required>
                                <option value="">...</option>
                                @if($clientes->count() > 0)
                                    @foreach($clientes as $cliente)
                                        <option value="{{ $cliente->id }}">{{ $cliente->nombre_completo }}</option>
                                    @endforeach
                                @endif
                            </select>
                            <label for="">Fecha:</label>
                            <input type="text" class="form-control form-control-sm" id="fecha" readonly>
                            <label for="">Hora</label>
                            <input type="text" class="form-control form-control-sm" id="hora" readonly>
                            <input type="hidden" readonly='' id="fecha_inicio" name="fecha_inicio">
                            <input type="hidden" readonly='' id="fecha_fin" name="fecha_fin">
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-sm btn-primary">
                                Guardar
                            </button>
                            <button type="button" class="btn btn-sm btn-danger" onclick="dissmised()">
                                Cancelar
                            </button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-backdrop fade show" id="backdrop" style="display: none;"></div>
        </section>
    </div>
</div>
@endsection

@section('scripts')
<script>
    const config = {
        'coloresEstatus': JSON.parse('{!! json_encode($coloresEstatus) !!}'),
        'estatusEventos': JSON.parse('{!! json_encode($estatusEventos) !!}'),
    };

    if (config.coloresEstatus) {
        htmlEstatus = '<ul class="list-inline">';
        htmlEstatus += '<li class="list-inline-item">';
        htmlEstatus += '<b><h4 class="badge bg-pendiente text-white">Pendiente:</h4></b>';
        htmlEstatus += '</li>'
        htmlEstatus += '<li class="list-inline-item">';;
        htmlEstatus += '<b><h4 class="badge bg-finalizada text-white">Finalizada</h4></b>';
        htmlEstatus += '</li>';
        htmlEstatus += '<li class="list-inline-item">';
        htmlEstatus += '<b><h4 class="badge bg-pagada text-white">Pagada</h4></b>';
        htmlEstatus += '</li>';
        htmlEstatus += '<li class="list-inline-item">';
        htmlEstatus += '<b><h4 class="badge bg-cancelada text-white">Cancelada</h4></b>';
        htmlEstatus += '</li>';
        htmlEstatus += '</ul>';

        document.getElementById("estatus-colores").innerHTML = htmlEstatus;
    }

    document.addEventListener('DOMContentLoaded', function() {

        // let eventos = @json($citas);
        // let horarios = @json($horarios);
        let eventos = JSON.parse('{!! json_encode($citas) !!}');
        const eventosSource = JSON.parse('{!! json_encode($citas) !!}');
        let horarios = JSON.parse('{!! json_encode($horarios) !!}');

        let horaInicio = '07:00:00';
        let horaFin = '24:00:00';

        if (horarios) {
            horaInicio = document.getElementById("hora_inicio").value;
            horaFin = document.getElementById("hora_fin").value;
        }

        eventos = eventos.map(evento => {
            if (evento.status == config.estatusEventos.cancelada) {
                return {
                    id: evento.id,
                    title: evento.nombre_completo,
                    start: evento.fecha_inicio,
                    end: evento.fecha_fin,
                    color: config.coloresEstatus.cancelada,
                };
            }

            if (evento.status == config.estatusEventos.finalizada) {
                return {
                    id: evento.id,
                    title: evento.nombre_completo,
                    start: evento.fecha_inicio,
                    end: evento.fecha_fin,
                    color: config.coloresEstatus.finalizada,
                };
            }

            if (evento.status == config.estatusEventos.pagada) {
                return {
                    id: evento.id,
                    title: evento.nombre_completo,
                    start: evento.fecha_inicio,
                    end: evento.fecha_fin,
                    color: config.coloresEstatus.pagada,
                };
            }

            return {
                id: evento.id,
                title: evento.nombre_completo,
                start: evento.fecha_inicio,
                end: evento.fecha_fin,
            };
        });

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

        var calendar = new FullCalendar.Calendar(calendarEl, {
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay',
            },
            initialView: 'timeGridDay',
            locale: 'es',
            initialDate: moment().format(),
            slotMinTime: horaInicio,
            slotMaxTime: horaFin,
            scrollTime: horaInicio,
            slotDuration: '01:00:00',
            navLinks: true, // can click day/week names to navigate views
            selectable: true,
            selectMirror: true,
            select: function(arg) {
                let HF = '';1
                let fechaInicio = arg.startStr.split('T');
                let fechaSeleccionada = moment(fechaInicio[0]).format('YYYY-MM-DD');
                let fechaDelDia = moment().format('YYYY-MM-DD');

                // Primero tengo que verificar que la fecha de inicio que llega en el arg
                // no sea anterior a la fecha en la que se está realizando la acción
                if (fechaSeleccionada < fechaDelDia) {
                    alert('No puede solicitar una cita en días anteriores');

                    return;
                }

                document.getElementById("backdrop").style.display = "block";
                document.getElementById("nueva-cita-modal").style.display = "block";
                document.getElementById("nueva-cita-modal").classList.add("show");

                let hora = ('01:00:00').split(':');

                let fecha0 = arg.startStr.split('T');
                let fecha = arg.endStr.split('T');

                let hora0 = fecha0[1].split(":");
                let hora1 = fecha[1].split(":");

                HI = parseFloat(hora[0]);
                HA = parseFloat(hora0[0]);

                let horaFinal = HI + HA;

                if (horaFinal > 0 && horaFinal < 10) {
                    HF = '0' + horaFinal + ":00:00";
                } else {
                    HF = horaFinal + ":00:00";
                }

                let nuevaFecha = new Date();
                let y = nuevaFecha.getFullYear();
                let m = nuevaFecha.getMonth() + 1;
                let d = nuevaFecha.getDay();

                if (m < 10) {
                    let monthStr = '0' + m;

                    if (d < 10) {
                        let dayStr = '0' + d;
                        diaActual = y + "-" + monthStr + "-" + dayStr;
                    } else {
                        diaActual = y + "-" + monthStr + "-" + d;
                    }
                } else {
                    diaActual = y + "-" + m + "-" + d;
                }

                document.getElementById("fecha").value = fecha[0];
                document.getElementById("hora").value = hora0[0] + ':00:00';
                document.getElementById("fecha_inicio").value = fecha[0] + " " + hora0[0] + ':00:00';
                document.getElementById("fecha_fin").value = fecha[0] + " " +HF;
                /*  console.log(arg);
                var title = prompt('Event Title:');
                if (title) {
                    calendar.addEvent({
                        title: title,
                        start: arg.start,
                        end: arg.end,
                        allDay: arg.allDay
                    })
                }
                calendar.unselect() */
            },
            eventClick: function(arg) {
                let evento = arg.event._def;
                let id = evento.publicId;

                let eventoSourceEncontrado = eventosSource.find(ev => {
                    if (parseInt(ev.id) === parseInt(id)) {
                        return ev;
                    }
                });

                if (
                    eventoSourceEncontrado.status == 'cancelada' ||
                    eventoSourceEncontrado.status == 'finalizada' ||
                    eventoSourceEncontrado.status == 'pagada'
                ) {
                    document.getElementById('btn-submit-formulario-detalle').hidden = true;
                    document.getElementById('estatus').setAttribute('disabled', true);
                } else {
                    document.getElementById('btn-submit-formulario-detalle').hidden = false;
                    document.getElementById('estatus').removeAttribute('disabled');
                }

                document.getElementById('cliente_editar').value = evento.title;
                document.getElementById('cita_id').value = id;
                document.getElementById("backdrop").style.display = "block";
                document.getElementById("cita-modal").style.display = "block";
                document.getElementById("cita-modal").classList.add("show");
            },
            editable: false,
            dayMaxEvents: true, // allow "more" link when too many events
            events: eventos
        });

        calendar.render();

        function closeModal() {
            document.getElementById("backdrop").style.display = "none"
            document.getElementById("cita-modal").style.display = "none"
            document.getElementById("cita-modal").classList.remove("show")

            document.getElementById("nueva-cita-modal").style.display = "none"
            document.getElementById("nueva-cita-modal").classList.remove("show")
        }
        // Get the modal
        var modal = document.getElementById('cita-modal');
        var modal2 = document.getElementById('nueva-cita-modal');
        var closeModalButton = document.getElementsByClassName('close-modal');

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal || event.target == modal2) {
                closeModal()
            }
        }
    });

    function dissmised() {
        document.getElementById("backdrop").style.display = "none";
        document.getElementById("cita-modal").style.display = "none";
        document.getElementById("cita-modal").classList.remove("show");

        document.getElementById("nueva-cita-modal").style.display = "none";
        document.getElementById("nueva-cita-modal").classList.remove("show");

        document.getElementById("formulario-detalle").reset();
        document.getElementById("formulario-nueva-cita").reset();
    }
</script>
@endsection