{{View::make('layout.header')}}
<style>
.fc-right .fc-state:hover{
     background-color:#fff !important;
    
}
.fc-right .fc-button{
     padding: 0.438rem 0.5rem !important;
     background:#fff !important;
    border-color: #7367f0 !important;
    color: #7367f0;
    height: 100%;
}
.fc-right .fc-state-active {
    background-color: rgba(115, 103, 240, 0.2) !important;
    border-color: #7367f0 !important;
    color: #7367f0;
    z-index: 1 !important;
}
.fc-next-button, .fc-prev-button{
    background: #fff !important;
}
.fc-month-button, .fc-agendaWeek-button{
border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    }
    .fc-agendaWeek-button, .fc-agendaDay-button{
        border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;

    }
.fc-icon-left-single-arrow:after, .fc-icon-right-single-arrow:after {
    top:-10% !important;
}
.fc-icon-left-single-arrow:after{
    font-size: 135% !important;
    font-weight: inherit !important;
    content: "\e900" !important;
}
.fc-icon-right-single-arrow:after {
    font-size: 135% !important;
    font-weight: inherit !important;
    content: "\e901" !important;
}
.fc-state-default {
    box-shadow: none !important;
}
.fc-content .fc-title{
    color:#fff;
    font-size:11px;
       white-space: break-spaces !important;
}

.fc-right .fc-button-group{
    width: 60% !important;
    float: right !important;
}
@media only screen and (min-width: 768px) {
.fc-left, .fc-right{
    width:50% !important;
}
.app-calendar .fc-popover { left:50% !important;  top : 30% !important;}
}
@media only screen and (max-width: 768px) {
.fc-left, .fc-right{
    width:100% !important;
}
.app-calendar .fc-popover { left:20% !important;  top : 40% !important;}
}

</style>
    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">HR
                                    </li>
                                    <li class="breadcrumb-item"><a href="{{route('setup')}}">Setup</a>
                                    </li>
                                    <li class="breadcrumb-item active"><a href="#">Add / Edit Holiday</a>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <!-- Dashboard Ecommerce Starts -->
                <section id="multiple-column-form">
                    
                <div class="row">
                <!-- <div class="col-12 col-md-4">
                    <div class="card">
                      <div class="card-header ptitle" style="padding:1rem;  color:#fff;">
                        <h4 class="card-title" style="color:#fff;">Add Holiday</h4>
                      </div>
                      <div class="col-md-12">
                        @if (\Session::has('statusMsg'))
                        
                        <div class="alert alert-success alert-dismissible" style="margin-top:18px;">
                            <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
                            <strong>Success!</strong> {{ Session::get('statusMsg') }}
                        </div>
                        
                        @endif
                    </div>
                      <div class="card-body">
                          
                          <form  id="all-filter11"  enctype="multipart/form-data">
                            <div class="row">
                                <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                                <div class="col-md-12 col-12">
                                    <div class="form-group">
                                        <label class="form-label" for="payment-date">Employee Type :*</label>
                                            <input type="text" name="employee_type" id="employee_type" class="form-control"  style="padding-left: 10px;" value="" placeholder="">
                                        
                                    </div>
                                </div>
                              
                                <div class="col-md-12 col-12">
                                    <div class="form-group d-flex flex-wrap mb-0">
                                        <button type="button" onclick="saveDetails()" class="btn btn-primary mr-1" id="apply">Add</button>
                                        
                                        
                                    </div>
                                    <div id="msg" style="margin-top:15px;"></div>
                                </div>
                            </div>
                          </form>
                      </div>
                    </div>
                </div> -->
                <div class="col-12 col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="d-flex align-items-center">
                                <h4 class="card-title">Public Holidays</h4>
                            </div>
                            <div class="btn-group">
                                <div class="">
                                    <button onclick="more_filter()" class="btn btn-primary waves-effect waves-float waves-light" style="">Filter</button>
                                </div>&nbsp;&nbsp;&nbsp;
                                <select name="perpage" id="perpage" style="border-width: 0 0px 0 1px; border-radius:0px;" class="form-control select-filter" onchange="select()">
                                    <option value="pre">Previous</option>
                                    <option selected value="cur">Current</option>
                                    <option value="nxt">Next</option>
                                            
                                </select>
                            </div>
                        </div>
                        <div class="card activity filter-container" style="margin: 0px 15px; padding:10px 20px 20px 20px; display:none !important;" id="empleavetoday">
                            <div class="row">
                                <div class="col-md-12" style="padding:0px;">
                                    <button id="spanclose" onclick="more_filter()" style="float:right;border:0px;background-color:transparent;color:white;padding: 3px 8px 5px;"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x cursor-pointer font-large-1" data-repeater-delete=""><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 filter-form-group mb-1">
                                    Date From  &nbsp;:&nbsp;
                                    <input type="date" name="sdatefrom" id="sdatefrom"  class="tcal form-control flatpickr-basic"  placeholder="DD-MM-YYYY">
                                </div>
                                <div class="col-sm-6 filter-form-group mb-1">
                                    Date To &nbsp;:&nbsp;
                                    <input type="date" name="sdateto" id="sdateto" class="tcal form-control flatpickr-basic"  placeholder="DD-MM-YYYY">
                                </div>
                                <div class="col-sm-6 filter-form-group mb-1">
                                    Country &nbsp;:&nbsp;
                                    <select class="select form-control" id="country" name="country">
                                        <option value="">All</option>
                                        @foreach($countries as $country)
                                                <option value="{{ $country->country_code}}">{{  $country->country }}</option>
                                        @endforeach

                                    </select>
                                </div>
                                <div class="col-sm-6 filter-form-group mb-1">
                                    State &nbsp;:&nbsp;
                                    <select class="select form-control" id="state" name="state">
                                        <option value="">All</option>
                                        @foreach($states as $state)
                                                <option value="{{ $state->state}}">{{ $state->state }}</option>
                                        @endforeach 

                                    </select>
                                </div>
                                <div class="col-sm-6 filter-form-group" style="margin-top:0px;">
                                    <input type="button" value="Apply" onclick="search();" class="filter-apply btn btn-info" />
                                </div>
                            </div>
                        </div>
                        <div class="card-body" style="padding:0px; ">
                        <div class="col-12"><span id="message1"></span></div>
                            <div class="col-md-12">
                                <div class="table-responsive" style="padding: 0 15px 15px 15px;">
                                    <table class="table table-striped  my-leave-summary-entitle" id="example11" style="font-size:12px;" >
                                        <thead>
                                            <tr style="height:50px;">
                                                <th width="20%" style="text-transform: capitalize;">Date</th>
                                                
                                                <th width="30%" style="text-transform: capitalize;">Description</th>
                                                <th width="39%" style="text-transform: capitalize;">State</th>
                                                <th width="11%" style="text-align:center;text-transform: capitalize;white-space: nowrap;">Action</th>
                                                <!-- <th style="text-transform: capitalize;" style="text-align:center;"  width="2%"><input type="checkbox" id="checkAll" ></th>           -->
                                            </tr>
                                        </thead>
                                        <tbody>
                                                    
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                          
                        </div>
                    </div>
                  </div>
                </div>
              </section>

              <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                        <h5 class="modal-title" id="exampleModalLabel">Are you sure to delete this employee type ?</h5>
                        <div id="delete-modal">
                        </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary yes-btn">Yes</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Content-->
    {{View::make('layout.footer')}}
    @include('inc.employeetype-model')
    <script>
        var currentCountry = "";
        var currentsState = "";
        var currentYear = (new Date).getFullYear();
        
        $(document).ready(function() {
            showList();
        });
        function more_filter() {
            var x = document.getElementById("empleavetoday");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }

        function select(){	
	        if($("#perpage").val() == "cur")
		        showList();
	        else if($("#perpage").val() == "pre")
		        showListcountpre();
	        else
		        showListcount();
        }

        function showListcountpre(){ 
            var year = currentYear - 1;
            var string_url = "getPublicHolidaysWithStates?country=" + currentCountry + "&state="+ currentsState + "&year="+ year;
            $('#example11').DataTable({
             "lengthMenu": [[20, 50, 100, -1], [20, 50,100, "All"]],
             "order": [],
		        "processing": true,
                "destroy": true,
		        "serverSide": true,
		        "ajax": string_url,
               
                "columns": [
                    
                    { data: 'date', name: 'date',
                        "render": function (data,type,row,meta){
                           return row.date.split("-").reverse().join("-");
                        }
                    },
                    { data: 'description', name: 'description' },
                    { data: 'state', name: 'state' },
                    { data: 'id', name: 'id',
                        "render": function (data,type,row,meta){ 
                            if(row.subscriber_allow==true){
                                var subscribe = '<a class="btn appDialog-model btn-success"  href="javascript:subscribe(\''+ row.id + '\');">Subscribe</a>';
                            }
                            else{
                                var subscribe = '<a class="btn appDialog-model btn-danger"  href="javascript:unsubscribe(\''+ row.id + '\');" >Unsubscribe</a>';
                            }
                           
                            return subscribe;                   
                   } },
                  
     
                ],
                'rowCallback': function(row, data, index){
                    
                    $(row).find('td:eq(1)').css('word-break', 'all');
                    $(row).find('td:eq(2)').css('word-break', 'all');
                    
                },
                "language": {
                    "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                    }
                },
            });
        } 

        function showList(){
            $('#example11').DataTable({
                "lengthMenu": [[20, 50, 100, -1], [20, 50,100, "All"]],
                "order": [],
                    "processing": true,
                    "destroy": true,
                    "serverSide": true,
                    "ajax": "{!! route('getPublicHolidaysWithStates') !!}",
                
                    "columns": [
                        
                        { data: 'date', name: 'date',
                            "render": function (data,type,row,meta){
                            return row.date.split("-").reverse().join("-");
                            }
                        },
                        { data: 'description', name: 'description' },
                        { data: 'state', name: 'state' },
                        { data: 'id', name: 'id',
                        "render": function (data,type,row,meta){ 
                            if(row.subscriber_allow==true){
                                var subscribe = '<a class="btn appDialog-model btn-success"  href="javascript:subscribe(\''+ row.id + '\');">Subscribe</a>';
                            }
                            else{
                                var subscribe = '<a class="btn appDialog-model btn-danger"  href="javascript:unsubscribe(\''+ row.id + '\');" >Unsubscribe</a>';
                            }
                           
                            return subscribe;                     
                        } },
        
                    ],
                    'rowCallback': function(row, data, index){
                        
                        $(row).find('td:eq(1)').css('word-break', 'all');
                        $(row).find('td:eq(2)').css('word-break', 'all');
                        
                    },
                "language": {
                        "paginate": {
                        // remove previous & next text from pagination
                        "previous": '&nbsp;',
                        "next": '&nbsp;'
                        }
                    },
            });
        }

        function subscribe(id){
            $.ajax({
                type:'post',
                url:'{{ route('holidaySubscribe')}}',
                data:{
                    _token: '<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function csrf_token() in /home/ecoleave/public_html/backup/v6/resources/views/hr/setup/holiday.blade.php:382
Stack trace:
#0 {main}
  thrown in <b>/home/ecoleave/public_html/backup/v6/resources/views/hr/setup/holiday.blade.php</b> on line <b>382</b><br />