
<div class="wrapper">
    <div class="container">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-10 pull-left">
                <h4 class="page-title">Mark Holidays: <?php echo $business[0]['business_name']; ?></h4>
            </div>
            <div class="col-sm-2">
                <div class="pull-right m-t-15">
                     <div class="btn-group">
                        
                    </div>
                </div>
            </div>
        </div>

        <div class="row" id="divselection">
            <div class="col-sm-12">
                <div class="card-box ">
                    
                    <div class="form">
                        
                        <div class="row">
                            <form method="post" action="<?php echo base_url(); ?>/mark_holidays">

                                <div class="col-md-3  m-t-40">
                                    <div class="form-group">                                    
                                        <label class="form-label">Date:</label>
                                        <input class="form-control" id="txtDate" name="txtDate" required>
                                    </div>
                                    <div class="form-group">                                    
                                        <label class="form-label">Holiday Name:</label>
                                        <input class="form-control" id="txtHolidyName" name="txtHolidyName" required>
                                    </div>
                                    <div class="form-group pull-right">                                    

                                        <button type="submit" class="btn btn-pink btn-sm">Add <i class="zmdi zmdi-arrow-right"></i></button>
                                    </div>
                                </div>
                            </form>
                            <div class="col-md-9" style="border-left:1px solid #808080;">
                                
                                    <div id="calendar" style=""></div>
                                
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
     <div id="removemodal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="removemodal" aria-hidden="true" style="display: none;">
        <div class="modal-dialog"  >
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="custom-width-modalLabel">Remove Holiday?</h4>
                </div>
                <div class="modal-body">
                    <div class='row'>
                        
                        <input class="form-control hidden" id="removeEventID">
                        
                        <div class="col-md-12 form-group">
                            <input class="form-control" id="removeHolidayDate">
                        </div>    
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">No</button>
                    <button onclick="removeHoliday();" id="btndispatchnow" type="button" class="btn btn-danger waves-effect waves-light">Remove</button>
                </div>
            </div>
        </div>
    </div>
    <style>
        .calendar {
            float: left;
            margin-bottom: 0px;
          }
          .fc-view {
            margin-top: 30px;
          }
          .none-border .modal-footer {
            border-top: none;
          }
          .fc-toolbar {
            margin-bottom: 5px;
            margin-top: 15px;
          }
          .fc-toolbar h2 {
            font-size: 18px;
            font-weight: 600;
            line-height: 30px;
            text-transform: uppercase;
          }
          .fc-day {
            background: #ffffff;
          }
          .fc-toolbar .fc-state-active,
          .fc-toolbar .ui-state-active,
          .fc-toolbar button:focus,
          .fc-toolbar button:hover,
          .fc-toolbar .ui-state-hover {
            z-index: 0;
          }
          .fc-widget-header {
            border: 1px solid #ebeff2;
          }
          .fc-widget-content {
            border: 1px solid #ebeff2;
          }
          .fc th.fc-widget-header {
            background: #ebeff2 ;            
            font-size: 12px;
            line-height: 20px;
            padding: 10px 0px;
            text-transform: uppercase;
          }
          .fc-button {
            background: #59a9f8;
            border: 1px solid #ebeff2;
            color: #fff;
            text-transform: capitalize;
          }
          .fc-text-arrow {
            font-family: inherit;
            font-size: 16px;
          }
          .fc-state-hover {
            background: #f3f3f3;
          }
          .fc-state-highlight {
            background: #f0f0f0;
          }
          .fc-cell-overlay {
            background: #f0f0f0;
          }
          .fc-unthemed .fc-today {
            background: #ffffff;
          }
          .fc-event {
            border-radius: 2px;
            border: none;
            cursor: move;
            font-size: 10px;
            margin: 5px 7px;
            padding: 5px 5px;
            text-align: center;
            word-wrap: break-word;
            color:#000;
          }
          .external-event {
            color: #ffffff;
            cursor: move;
            margin: 10px 0;
            padding: 6px 10px;
          }
          .fc-basic-view td.fc-week-number span {
            padding-right: 5px;
          }
          .fc-basic-view td.fc-day-number {
            padding-right: 5px;
          }
        
        </style>
    <script>
     $(document).ready(function(){      
        $('#txtDate').datepicker({
            autoclose: true,
                todayHighlight: true,
                format: 'yyyy-mm-dd'
        });
        
        var e = <?php print_r($holidays); ?>;

        var calendar = $('#calendar').fullCalendar({
            schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
            duration:"days",            
            bootstrapFontAwesome: !1,
            buttonText: {
                today: "Today",
                month: "Month",
                week: "Week",
                day: "Day",
                list: "List",
                prev: "Prev",
                next: "Next"
            },
            initialView: "dayGridMonth",
            handleWindowResize: !0,
            headerToolbar: {
                start: "prev,next today",
                center: "title",
                end: "dayGridMonth,timeGridWeek,timeGridDay,listMonth"
            },
            
            editable: !1,
            droppable: !1,
            selectable: !1,
            allDaySlot: true,
            events: e,
             eventClick: function(calEvent, jsEvent, view) {   
                var event_id= calEvent.id;
                
                $("#removeEventID").val(event_id);
                $("#removeHolidayDate").val(calEvent.start);
                $("#removemodal").modal('show');               
            }
        });
    });
    
    function removeHoliday(){
        
        var event_id = $("#removeEventID").val();
        
        $.ajax({
            url: '<?php echo base_url().'attendance_controller/delete_holiday'; ?>',
            type: 'POST',
            data:{event_id:event_id},            
            success: function(data){
                console.log(data);
                if(data == 'success'){
                    toastr.success('Holiday Removed', 'Success');
                    $("#removemodal").modal('hide');  
                    location.href = "<?php echo base_url();?>/mark_holidays";

                    
                }else{
                    toastr.success('Something Went Wrong', 'error');
                    $("#removemodal").modal('hide');  
                }
                
            }
        });
        
    }
    
    </script>