@extends("admin.layout.layout")
@section("styles")
    @php
        $titulo = "Agenda";
        $modulo = "Agenda";
        $vista="Calendario";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo }} {{$vista}}</title>

    <link href="assets/plugins/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />

    <style>
        .fc-title {
            color: white !important;
        }
        .fc-time {
            color: white !important;
        }
    </style>
@endsection

@section("contenido")
    <div class="card card-custom">
        <div class="card-body">
            <div id="kt_calendar"></div>
        </div>
    </div>
    <div class="modal fade none-border" id="my-event">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form id="frmCalendar">
                    <div class="modal-header">
                        <h4 class="modal-title"><strong><span id="tituloEvento"></span></strong></h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <i aria-hidden="true" class="ki ki-close"></i>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="txtId" name="txtId" /><br>
                        <input type="hidden" id="txtFecha" name="txtFecha" /><br>
                        <div class="row">
                            <div class="form-group col-8">
                                <label>Cliente<span class="text-danger">*</span></label>

                            </div>
                            <div class="form-group col-2">
                                <label>Cantidad<span class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="cantidad" name="cantidad">
                            </div>
                            <div class="form-group col-md-2">
                                <label>Color: </label>
                                <div id='colorPicker' class="fast-color-picker"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-7 col-md-8">
                                <label>Fecha Inicial<span class="text-danger">*</span></label>
                                <input type="date" id="fecha_inicial" name="fecha_inicial" class="form-control fecha_inicial" required />
                            </div>
                            <div class="form-group col-5 col-md-4">
                                <label>Hora Inicio<span class="text-danger">*</span></label>
                                <div class="input_group clockpicker" data-autoclose="true">
                                    <input type="text" id="txtHoraInicial" class="form-control " name="txtHoraInicial" value="12:30" readonly />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-12">
                                <label>Descripcion: </label>
                                <textarea id="txtDescripcion" name="txtDescripcion" class="form-control" rows="3" placeholder="Descripción del evento" style="overflow:auto;resize:none"></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group divAdjunto">
                                    <label>Adjunto</label>
                                    <input type="file" id="adjunto" name="adjunto" class="dropify inputFile">
                                </div>
                                <div class="form-group divNoAdjunto">
                                    <label>Adjunto</label><br>
                                    <a target="_blank" class="btn btn-sm btn-success pl-3 pr-2" id="verAdjunto">
                                        <i class="fas fa-file-download"></i> Descargar adjunto: <span class="nombre_adjunto"></span>
                                    </a>
                                    <button type="button" class="btn btn-sm btn-danger pl-3 pr-2" id="eliminarAdjunto" data-Toggle="tooltip" title="Eliminar adjunto">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="form-group mx-3 pt-2 float-left">
                            <div class="checkbox-inline">
                                <label class="checkbox">
                                    <input value=1 type="checkbox" id="destacar" name="destacar" />
                                    <span></span>
                                </label>
                                <option>Destacar</option>
                            </div>
                        </div>
                        <button type="button" id="btnAgregar" class="btn btn-success">Agregar</button>
                        <button type="button" id="btnModificar" class="btn btn-primary">Modificar</button>
                        <button type="button" id="btnBorrar" class="btn btn-danger">Borrar</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Atrás</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section("scripts")

    <script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
    <script src="assets/plugins/custom/fullcalendar/es.js"></script>
    <script>
        "use strict";
        var calendar;
        let KTCalendarBasic = {
            init: function() {
                let e = moment().startOf("day"),
                    t = e.format("YYYY-MM"),
                    i = e.clone().subtract(1, "day").format("YYYY-MM-DD"),
                    n = e.format("YYYY-MM-DD"),
                    r = e.clone().add(1, "day").format("YYYY-MM-DD"),
                    o = document.getElementById("kt_calendar");
                calendar = new FullCalendar.Calendar(o, {
                    plugins: ["bootstrap", "interaction", "dayGrid", "timeGrid", "list"],
                    themeSystem: "bootstrap",
                    isRTL: KTUtil.isRTL(),
                    header: {
                        left: "prev,next today",
                        center: "title",
                        right: "dayGridMonth,timeGridWeek,timeGridDay"
                    },
                    height: 800,
                    contentHeight: 780,
                    aspectRatio: 3,
                    nowIndicator: !0,
                    now: n + "T09:25:00",
                    views: {
                        dayGridMonth: {buttonText: "Mes"},
                        timeGridWeek: {buttonText: "Semana"},
                        timeGridDay: {buttonText: "Día  "}
                    },
                    defaultView: "dayGridMonth",
                    defaultDate: n,
                    disableDragging: true,
                    editable: false,
                    eventLimit: 10,
                    navLinks: !0,
                    events: "{{ route('admin::agenda.data.calendario') }}",
                    locale: "es",
                    eventRender: function(e) {
                        let t = $(e.el);
                        let destacar = e.event.extendedProps.destacar;
                        if (destacar == 1) {
                            let icon = '<i class="fas fa-star text-warning"></i>';
                            let iconPadding = '<i class="fas fa-star" style="padding-left:.75rem;padding-right:.75rem;color:#ffffff;"></i>';
                            $(e.el).removeClass("fc-start");
                            if($(e.el).find(".fc-event-dot").length > 0) {
                                $(e.el).css("border", "#f58337 3px solid");
                            } else {
                                $(e.el).css("border", "#999999 4px solid");
                            }
                            $(e.el).find(".fc-content").css("padding-left", 10).addClass('row');
                            $(e.el).find(".fc-content").prepend(iconPadding);
                            $(e.el).find(".fc-event-dot").css("background", "none").append(icon);
                        } else {
                            if($(e.el).find(".fc-event-dot").length == 0) {
                                $(e.el).css("border", e.event.backgroundColor+" 4px solid");
                            }
                        }

                        e.event.extendedProps && e.event.extendedProps.descripcion &&
                        (t.hasClass("fc-day-grid-event") ?
                            (t.data("content", e.event.extendedProps.descripcion),
                                t.data("placement", "top"), KTApp.initPopover(t)) :
                            t.hasClass("fc-time-grid-event") ?
                                t.find(".fc-title").append('<div class="fc-description">' + e.event.extendedProps.descripcion + "</div>") :
                                0 !== t.find(".fc-list-item-title").lenght &&
                                t.find(".fc-list-item-title").append('<div class="fc-description">' + e.event.extendedProps.descripcion + "</div>"))
                    }
                });
                calendar.render();
            }
        };

        let nuevoEvento;

        jQuery(document).ready((function() {

            KTCalendarBasic.init();

            let colorArray = ['#1e88e5', '#7460ee', '#26c6da', '#2f3d4a', '#e5ae0a', '#dc3545'];
            $('#colorPicker').fastColorPicker(colorArray);

            $('.clockpicker').clockpicker({
                'default': 'now',
                vibrate: true,
                placement: "left",
                align: "right",
                autoclose: true,
                twelvehour: false,
                minutestep: 5
            });



            $('#btnModificar').click(function() {
                if ($('#id_cliente').val()) {
                    RecolectarDatosGUI();
                    let id_reserva = $('#txtId').val();
                    {{--                    let url = '{{ route('control::reservas.editar', ['reserva' => ':reserva']) }}';--}}
                    //                     url = url.replace(':reserva', id_reserva);
                    //                     EnviarInformacion(url, nuevoEvento);
                } else {
                    Swal.fire({
                        icon: 'warning',
                        text: 'Seleccione un cliente!',
                        toast: true,
                        position: "top-end",
                        timer: 2000,
                        timerProgressBar: true
                    })
                }
            });



        }));

    </script>
@endsection