<?php include_once "./Configs.php"; ?>
<!DOCTYPE html>
<html lang="en">
<?php
$titulo="Calendar";    
include_once "./Head.php"; ?>
    <!-- body start AQUI va el theme mode-->
<?php 
if($usuario["layout"] == 'horizontal'){
?>    
    <body class="loading" data-layout-mode="horizontal" data-layout='{"mode": "<?php echo $usuario["theme"]; ?>", "width": "fluid", "menuPosition": "fixed", "topbar": {"color": "dark"}, "showRightSidebarOnPageLoad": false}'>    
<?php 
}else{
?>    
    <body class="loading" data-layout='{"mode": "<?php echo $usuario["theme"]; ?>", "width": "fluid", "menuPosition": "fixed", "sidebar": { "color": "<?php echo $usuario["theme"]; ?>", "size": "default", "showuser": true}, "topbar": {"color": "light"}, "showRightSidebarOnPageLoad": true}'>
<?php 
}
?>    
        <div id="wrapper">
<?php  include_once "./Header.php"; ?>
<?php  include_once "./Menu.php"; ?>
            <div class="content-page">
<!--inicia contenido-->
                <div class="content">

                    <!-- Start Content-->
                    <div class="container-fluid">
                        
                        <!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box page-title-box-alt">
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Adminto</a></li>
                    <li class="breadcrumb-item"><a href="javascript: void(0);">Apps</a></li>
                    <li class="breadcrumb-item active">Calendar</li>
                </ol>
            </div>
                    <h4 class="page-title"><?php echo $titulo;?></h4>
            <p><?php if(isset($warning) ){echo $warning;} ?></p>
        </div>
    </div>
</div>     
<!-- end page title --> 

                        <div class="row">
                            <div class="col-12">
                                        <div class="row">
                                            <div class="col-lg-3">
                                                <form method="post">
                                                    <div class="form-floating mb-3">
                                                        <input type="hidden" name="idcambiar" value="<?php if(isset($_GET["edit"]) ){echo $_GET['edit'];}?>">                                                        <input type="text" class="form-control" id="floatingPassword" placeholder="Name" name="titulo" required value='<?php if(isset($row['titulo']) ){echo $row['titulo'];}?>'>
                                                        <label for="floatingPassword">Title</label>
                                                    </div>
                                                    <div class="mb-3">
                                                        <select class="form-select ori" id="floatingSelect4" aria-label="Floating label select example" name="estado">
                                                            <option value="bg-info">Blue</option>                                       <option value="bg-danger">Red</option>
                                                            <option value="bg-success">Green</option>
                                                            <option value="bg-dark">Black</option>
                                                            <option value="bg-warning">Yellow</option>
                                                        </select>
                                                    </div>                                                 
                                                    <div class="mb-3">
                                                        <select class="form-control" data-toggle="select2" data-width="100%" name="event4">
                                                            <option disabled="" selected="">----</option>
                                                            <?php echo AsignarCal();?>
                                                        </select>
                                                    </div>                                                 
                                                    <div class="form-floating mb-3">                                                     
                                                        <input type="datetime-local" class="form-control" id="floatingPassword" placeholder="Name" name="empieza" required value='<?php if(isset($row['empieza']) ){echo $row['empieza'];}?>'>
                                                        <label for="floatingPassword">Start</label>
                                                    </div>                                                 
                                                    <div class="form-floating mb-3">                                                     
                                                        <input type="datetime-local" class="form-control" id="floatingPassword" placeholder="Name" name="termina" value='<?php if(isset($row['termina']) ){echo $row['termina'];}?>' required>
                                                        <label for="floatingPassword">End</label>                                                     
                                                    </div>                                                 
                                                    <div class="form-floating mb-3">                                                          <button class="btn btn-lg font-16 btn-success w-100" id="btn-new-event666" type="submit" name="botonnuevo" value="calendario"><i class="fa fa-plus me-1"></i> Create New</button>
                                                    </div>
                                                    <div class="row mb-3 resetear">
                                                        <div class="col-md-6 col-4">
                                                            <button type="button" class="btn btn-danger" id="btnborrar" onclick="">Delete</button>
                                                        </div>
                                                        <div class="col-md-6 col-8 text-end">
                                                            <button type="button" class="btn btn-light me-1" onclick="nuevo();">Close</button>
                                                        </div>
                                                    </div>
                                                </form>
                                                <!--<div id="external-events">
                                                    <br>
                                                    <p class="text-muted">Drag and drop your event or click in the calendar</p>
                                                    <div class="external-event bg-primary" data-class="bg-success">
                                                        <i class="mdi mdi-checkbox-blank-circle me-2 vertical-middle"></i>New Theme Release
                                                    </div>
                                                    <div class="external-event bg-pink" data-class="bg-info">
                                                        <i class="mdi mdi-checkbox-blank-circle me-2 vertical-middle"></i>My Event
                                                    </div>
                                                    <div class="external-event bg-warning" data-class="bg-warning">
                                                        <i class="mdi mdi-checkbox-blank-circle me-2 vertical-middle"></i>Meet manager
                                                    </div>
                                                    <div class="external-event bg-purple" data-class="bg-danger">
                                                        <i class="mdi mdi-checkbox-blank-circle me-2 vertical-middle"></i>Create New theme
                                                    </div>
                                                </div>-->

                                                 <!-- checkbox -->
                                                 <!--<div class="form-check mt-3">
                                                    <input type="checkbox" class="form-check-input" id="drop-remove">
                                                    <label class="form-check-label" for="drop-remove">Remove after drop</label>
                                                </div>-->
    
                                            </div> <!-- end col-->

                                            <div class="col-lg-9">
                                                <div class="card">
                                                    <div class="card-body">

                                                        <div id="calendar"></div>

                                                    </div> <!-- end card body-->
                                                </div> <!-- end card -->
                                            </div> <!-- end col -->

                                        </div>  <!-- end row -->
                                   

                                <!-- Add New Event MODAL -->
                                <div class="modal fade" id="event-modal" tabindex="-1">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header py-3 px-4 border-bottom-0 d-block">
                                                <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="Close"></button>
                                                <h5 class="modal-title" id="modal-title">Event</h5>
                                            </div>
                                            <div class="modal-body px-4 pb-4 pt-0">
                                                <!--<form method="post" class="needs-validation" name="event-form" id="form-event" novalidate>
                                                    <div class="form-floating mb-3">
                                                        <input type="hidden" name="idcambiar">
                                                        <input type="text" class="form-control" id="floatingPassword" placeholder="Name" name="titulo" required>
                                                        <label for="floatingPassword">Title</label>
                                                    </div>
                                                    <div class="mb-3">
                                                        <select class="form-select" id="floatingSelect4" aria-label="Floating label select example" name="estado">
                                                            <option value="bg-info">Blue</option>                                       <option value="bg-danger">Red</option>
                                                            <option value="bg-success">Green</option>
                                                            <option value="bg-dark">Black</option>
                                                            <option value="bg-warning">Yellow</option>
                                                        </select>
                                                    </div>                                                 
                                                    <div class="mb-3">
                                                        <select class="form-control" data-width="100%" name="event5">
                                                            <option disabled="" selected="">----</option>
                                                            
                                                        </select>
                                                    </div>                                                 
                                                    <div class="form-floating mb-3">                                                     
                                                        <input type="datetime-local" class="form-control" id="floatingPassword" placeholder="Name" name="empieza" required >
                                                        <label for="floatingPassword">Start</label>
                                                    </div>                                                 
                                                    <div class="form-floating mb-3">                                                     
                                                        <input type="datetime-local" class="form-control" id="floatingPassword" placeholder="Name" name="termina"  required>
                                                        <label for="floatingPassword">End</label>                                                     
                                                    </div>                                                 
                                                    <div class="row mt-2">
                                                        <div class="col-md-6 col-4">
                                                            <button type="button" class="btn btn-danger" id="btn-delete-event666">Delete</button>
                                                        </div>
                                                        <div class="col-md-6 col-8 text-end">
                                                            <button type="button" class="btn btn-light me-1" data-bs-dismiss="modal">Close</button>
                                                            <button type="submit" class="btn btn-success" id="btn-save-event666" name="botonnuevo" value="calendario">Update</button>
                                                        </div>
                                                    </div>
                                                </form>-->
                                            </div>
                                        </div> <!-- end modal-content-->
                                    </div> <!-- end modal dialog-->
                                </div>
                                <!-- end modal-->
                            </div>
                            <!-- end col-12 -->
                        </div> <!-- end row -->
                        
                    </div> <!-- container -->

                </div> <!-- content -->
<!--termina contenido-->                
        <?php  include_once "./Footer.php"; ?>
                <style>/**/a.fc-event a {color:white !important; text-decoration: underline !important; font-weight: bold !important;}
                    .fc-daygrid-event-dot, .fc-list-event-graphic{display: none !important;}</style>                
<script>
        function nuevo(){
        $("input[name=idcambiar]").val('');    
        $("input[name=titulo]").val('');    
        $("input[name=empieza]").val('');    
        $("input[name=termina]").val(''); 
        $("select[name=estado] option[value='bg-info']").prop("selected", true);    
        $("select[name=event4] option:selected").prop("selected", false);    
        $('select[name=event4]').select2();//necesitas ejecutar esto para inicializar la libreria
        $("button[name=botonnuevo]").html('<i class="fa fa-plus me-1"></i> Create New');
        $("div.resetear").hide();
        }
    
jQuery(document).ready(function ($) {
        $("div.resetear").hide();
setInterval(function() {     
        /*Reemplaza textos /**/
        $(".fc-event-title, .fc-list-event-title a").each(function() {//o p o span etc...
            var text = $(this).html();
            text = text.replace("&gt;", ">");
            text = text.replace("&lt;", "<");
            $(this).html(text);
        });
        $(".fc-event, .fc-list-event-title a").each(function() {//hay que correrlo continuo por si cambia la vista
            $(this).removeClass("fc-event-draggable");
            $(this).removeClass("fc-event-resizable");
        });    
        $("input[name=termina]").attr("min",$("input[name=empieza]").val()); 
    

}, 500);        

setInterval(function() {  

$( ".es-evento" ).click( function() {//para que se pueda editar...
    //console.log($(this).parents("td").attr("data-date"));
    //console.log($(this).find(".fc-event-time").html());
    let elid=$(this).attr("class").match(/[\w-]*id-es-[\w-]*/g);
    let id=elid[0].toString().replace("id-es-","")*1;
    console.log("el id es: "+id);
    let tit=$(this).attr("class").match(/[\w-]*tit-es-[\w-]*/g);
    tit=tit[0].toString().replace("tit-es-","").replace("_"," ");
    console.log("el tit es: "+tit);
    let st=$(this).attr("class").match(/[\w-]*st-es-[\w-]*/g);
    st=st[0].toString().replace("st-es-","").replace("_",":");
    console.log("el start es: "+st);
    let en=$(this).attr("class").match(/[\w-]*end-es-[\w-]*/g);
    en=en[0].toString().replace("end-es-","").replace("_",":");
    console.log("el end es: "+en);
    let q=$(this).attr("class").match(/[\w-]*q-es-[\w-]*/g);
    q=q[0].toString().replace("q-es-","");
    console.log("el quien es: "+q);
    let bg=$(this).attr("class").match(/[\w-]*bg-es-[\w-]*/g);
    bg=bg[0].toString().replace("bg-es-","");
    console.log("el bg es: "+bg);
    
    setTimeout(function() {   
        $("input[name=idcambiar]").val(id);    
        $("input[name=titulo]").val(tit);    
        $("input[name=empieza]").val(st);    
        $("input[name=termina]").val(en); 
        $("select[name=estado] option[value='"+bg+"']").prop("selected", true);    
        $("select[name=event4] option[value='"+q+"']").prop("selected", true);  
        $('select[name=event4]').select2();//necesitas ejecutar esto para inicializar la libreria
        $("button[name=botonnuevo]").text("Update");
        $("#btnborrar").attr("onclick",'window.location.href = "./calendar-view.php?delete='+id+'";');
        $("div.resetear").show();        
    }, 1000);    
});

    
}, 1000);        
//ESTO ES LO QUE ESTABA EN INIT Y AQUI SACAS LAS CITAS DE LA BDD 
! function (l) {
    "use strict";

    function e() {
        this.$body = l("body"), this.$modal = l("#event-modal"), this.$calendar = l("#calendar"), this.$formEvent = l("#form-event"), this.$btnNewEvent = l("#btn-new-event"), this.$btnDeleteEvent = l("#btn-delete-event"), this.$btnSaveEvent = l("#btn-save-event"), this.$modalTitle = l("#modal-title"), this.$calendarObj = null, this.$selectedEvent = null, this.$newEventData = null
    }
    e.prototype.onEventClick = function (e) {
        this.$formEvent[0].reset(), this.$formEvent.removeClass("was-validated"), this.$newEventData = null, this.$btnDeleteEvent.show(), this.$modalTitle.text("Edit event?"), this.$modal.show(), this.$selectedEvent = e.event, l("#event-title").val(this.$selectedEvent.title), l("#event-category").val(this.$selectedEvent.classNames[0])
    }, e.prototype.onSelect = function (e) {
        this.$formEvent[0].reset(), this.$formEvent.removeClass("was-validated"), this.$selectedEvent = null, this.$newEventData = e, this.$btnDeleteEvent.hide(), this.$modalTitle.text("Add New Event"), this.$modal.show(), this.$calendarObj.unselect()
    }, e.prototype.init = function () {
        this.$modal = new bootstrap.Modal(document.getElementById("event-modal"), {
            keyboard: !1
        });
        var e = new Date(l.now());
        /*new FullCalendar.Draggable(document.getElementById("external-events"), {
            itemSelector: ".external-event",
            eventData: function (e) {
                return {
                    title: e.innerText,
                    className: l(e).data("class")
                }
            }
        });/**/
        var t = [
            <?php echo calJS();?>
            /*{
                title: "Meeting Shreyu <a href='./'  target='_blank'>linkkk",
                start: "2022-02-27 16:30",
                end: "2022-02-25 10:30",
                className: "bg-warning"
            }, {
                title: "Interview - Backend Engineer",
                start: e,
                end: e,
                className: "bg-success"
            }, {
                title: "Phone Screen - Frontend Engineer",
                start: new Date(l.now() + 168e6),
                className: "bg-info"
            }, {
                title: "Buy Design Assets",
                start: new Date(l.now() + 338e6),
                end: new Date(l.now() + 4056e5),
                className: "bg-primary"
            }/**/],
            a = this;
        a.$calendarObj = new FullCalendar.Calendar(a.$calendar[0], {
            slotDuration: "00:15:00",
            slotMinTime: "08:00:00",
            slotMaxTime: "19:00:00",
            themeSystem: "bootstrap",
            bootstrapFontAwesome: !1,
            buttonText: {
                today: "Today",
                month: "Month",
                week: "Week",
                day: "Day",
                list: "List",
                prev: "Prev",
                next: "Next"
            },
            initialView: "dayGridMonth",
            handleWindowResize: !0,
            height: l(window).height() - 200,
            headerToolbar: {
                left: "prev,next today",
                center: "title",
                right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth"
            },
            initialEvents: t,
            editable: 0,// si !0 es draggeable, etc...
            droppable: 0,
            selectable: 0,
            dateClick: function (e) {
                a.onSelect(e)
            },
            eventClick: function (e) {
                a.onEventClick(e)
            }
        }), a.$calendarObj.render(), a.$btnNewEvent.on("click", function (e) {
            a.onSelect({
                date: new Date,
                allDay: !0
            })
        }), a.$formEvent.on("submit", function (e) {
            e.preventDefault();
            var t = a.$formEvent[0];
            if (t.checkValidity()) {
                if (a.$selectedEvent) a.$selectedEvent.setProp("title", l("#event-title").val()), a.$selectedEvent.setProp("classNames", [l("#event-category").val()]);
                else {
                    var n = {
                        title: l("#event-title").val(),
                        start: a.$newEventData.date,
                        allDay: a.$newEventData.allDay,
                        className: l("#event-category").val()
                    };
                    a.$calendarObj.addEvent(n)
                }
                a.$modal.hide()
            } else e.stopPropagation(), t.classList.add("was-validated")
        }), l(a.$btnDeleteEvent.on("click", function (e) {
            a.$selectedEvent && (a.$selectedEvent.remove(), a.$selectedEvent = null, a.$modal.hide())
        }))
    }, l.CalendarApp = new e, l.CalendarApp.Constructor = e
}(window.jQuery),
function () {
    "use strict";
    window.jQuery.CalendarApp.init()
}();


    });</script>                
                
        <!-- Calendar js -->
        <script src="./assets/libs/moment/min/moment.min.js"></script>
        <script src="./assets/libs/fullcalendar/main.min.js"></script>
        <!-- Calendar init LO PASASTE DIRECTO AQUI, Y HACES EL ECHO DE LAS CITAS...-->
        <!--<script src="./assets/js/pages/calendar.init.js"></script>-->
                
        <!-- Selectize o multiple select -->
        <script src="./assets/libs/select2/js/select2.min.js"></script>
        <script>
            jQuery(document).ready(function($) {
                $('select[name=event4]').select2();//necesitas ejecutar esto para inicializar la libreria
                //$('select.sec').select2();//necesitas ejecutar esto para inicializar la libreria
                
                /*carga el select de la bdd/**/
            });
        </script>                   
            </div>
        </div>        
    </body>
</html>