@extends('layouts.callendar')

@section('head')
<style>
    .fc .fc-toolbar-title {
        text-transform: uppercase;
    }

    body {
        margin: 40px 10px;
        padding: 0;
        font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
        font-size: 14px;
    }

    #calendar {
        max-width: 1100px;
        margin: 0 auto;
    }

    .mh-200 {
        min-height: 200px;
    }

    .p-1 {
        padding: 1rem;
    }

    .p-2 {
        padding: 2rem;
    }

    .p-3 {
        padding: 3rem;
    }

    .header {
        border-radius: 3px 0px;
    }

    .bg-dark {
        background-color: #000;
    }

    .font-24 {
        font-size: 24px;
    }

    .close-modal {
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        padding: 8px;
        background-color: transparent;
    }

    .text-danger {
        color: red !important;
    }

    .pull-right {
        float: right;
    }

    .ml-2 {
        margin-left: 2rem;
    }

    .mt-1 {
        margin-top: 1rem;
    }
</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-10">
                        @if($horarios == null)
                        <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-1">
                                    <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 -->
                                <div id="calendar"></div>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                </div>
                <!-- /.row (main row) -->
            </div>

            <div class="modal" id="cita-modal">
                <div class="modal-dialog p-1">
                    <div class="modal-content mh-200">
                        <div class="header bg-dark">
                            <h2 class="font-24 p-2 ml-2 mt-1">
                                Detalle de la Cita
                                <a role="button" class="close-modal text-danger pull-right" onclick="dissmised()">X</a>
                            </h2>
                            <div class="body p-3">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal" id="nueva-cita-modal">
                <div class="modal-dialog p-1">
                    <div class="modal-content mh-200">
                        <div class="header bg-dark">
                            <h3 class="font-24 p-2 ml-2 mt-1">
                                Solicitar Cita
                                <a role="button" class="close-modal text-danger pull-right" onclick="dissmised()">X</a>
                            </h3>
                        </div>
                        <div class="body p-3">
                            <label for="">Seleccione Cliente</label>
                            <select name="cliente" id="cliente" class="form-control form-control-sm">
                                <option value="">...</option>
                            </select>
                            <label for="">Fecha:</label>
                            <input type="text" class="form-control form-control-sm" id="fecha">
                            <label for="">Hora</label>
                            <input type="text" class="form-control form-control-sm" id="hora">
                            <input type="hidden" readonly='' id="fecha_inicio" name="fecha_inicio">
                            <input type="hidden" readonly='' id="fecha_fin" name="fecha_fin">
                            <hr>
                            <div class="row">
                                <div class="col-md-6">
                                    <button type="submit" class="btn btn-sm btn-block btn-primary">
                                        Guardar
                                    </button>
                                </div>
                                <div class="col-md-6">
                                    <button type="button" class="btn btn-sm btn-block btn-danger">
                                        Cancelar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-backdrop fade show" id="backdrop" style="display: none;"></div>
        </section>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ global_asset('assets/plugins/fullcalendar-6.0/dist/index.global.js') }}"></script>
<script src="{{ global_asset('assets/plugins/fullcalendar-6.0/locales/es.js') }}"></script>
<script src="{{ global_asset('assets/plugins/moment/moment.min.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let calendarEl = document.getElementById('calendar');
        let horaInicio = document.getElementById("hora_inicio").value;
        let horaFin = document.getElementById("hora_fin").value;

        var calendar = new FullCalendar.Calendar(calendarEl, {
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            locale: 'es',
            initialDate: moment().format(),
            slotMinTime: horaInicio,
            slotMaxTime: horaFin,
            scrollTime: horaInicio,
            navLinks: true, // can click day/week names to navigate views
            selectable: true,
            selectMirror: true,
            select: function(arg) {
                let date = new Date();
                let HF = '';

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

                let fecha = arg.startStr;
                console.log(fecha);return;
                let hora = ('01:00:00').split(':');

                fecha = fecha.split('T');

                console.log(fecha);return;
                let hora1 = fecha[1].split(":");

                HI = parseFloat(hora[0]);
                HA = parseFloat(hora1[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;
                }

                if (diaActual <= fecha[0]) {

                }

                document.getElementById("fecha").value = fecha[0];
                document.getElementById("hora").value = hora1[0] + ':00:00';
                /*  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) {
                document.getElementById("backdrop").style.display = "block";
                document.getElementById("cita-modal").style.display = "block";
                document.getElementById("cita-modal").classList.add("show");
            },
            editable: true,
            dayMaxEvents: true, // allow "more" link when too many events
            events: [{
                    title: 'All Day Event',
                    start: '2022-12-01'
                },
                {
                    title: 'Long Event',
                    start: '2022-12-07',
                    end: '2022-12-10'
                },
                {
                    groupId: 999,
                    title: 'Repeating Event',
                    start: '2022-12-09T16:00:00'
                },
                {
                    groupId: 999,
                    title: 'Repeating Event',
                    start: '2022-12-16T16:00:00'
                },
                {
                    title: 'Conference',
                    start: '2022-12-11',
                    end: '2022-12-13'
                },
                {
                    title: 'Meeting',
                    start: '2022-12-12T10:30:00',
                    end: '2022-12-12T12:30:00'
                },
                {
                    title: 'Lunch',
                    start: '2022-12-12T12:00:00'
                },
                {
                    title: 'Meeting',
                    start: '2022-12-12T14:30:00'
                },
                {
                    title: 'Happy Hour',
                    start: '2022-12-12T17:30:00'
                },
                {
                    title: 'Dinner',
                    start: '2022-12-12T20:00:00'
                },
                {
                    title: 'Birthday Party',
                    start: '2022-12-13T07:00:00'
                },
                {
                    title: 'Click for Google',
                    url: 'http://google.com/',
                    start: '2022-12-28'
                }
            ]
        });

        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");
    }
</script>
@endsection