@extends('layouts.mainlayout')
@section('title', 'Holiday Calendar')
@section('main')
    <!-- Single item selection -->
    <div class="card">
        <div class="card-header header-elements-inline">
            <h5 class="card-title icon-calculator font-weight-bold"> Holidays</h5>
            <div class="container text-center">
                <input type="text" class="date-own form-control active ml-auto" 
                style="width: 300px;" id="year" placeholder="Select Year" value="" readonly>
            </div>
        </div>
        <div class="table-responsive" id="selectHolidayYear">    
            <table class="table datatable-select-single" id="selectYear">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($holidays as $holiday)
                        <tr>
                            <td>{{  Carbon\Carbon::parse($holiday->date)->format(config('settings.php_date_format'))  }}</td>
                            <td>{{$holiday->holiday}}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <!-- /Single item selection -->
    <script type="text/javascript">
        $(document).ready(function () {
                initializeYearFilter();
            });
            function initializeYearFilter(){
                $('#year').on('change',function(){
                    var year = $('#year').val();
                    var formData = new FormData();
                    formData.append('year', year);
                    var baseurl =  document.getElementById('baseurl').value;
                    $.ajaxSetup({
                        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
                    });
                    $.ajax({
                        type: 'POST',
                        url: baseurl+'/holidaycalendar',
                        processData:false,
                        contentType: false,
                        data: formData,
                        success: function(data) {
                            $('#selectHolidayYear').html(data);
                            $('#selectYear').DataTable({
                                buttons: {            
                            dom: {
                                button: {
                                    className: 'btn btn-light'
                                }
                            },
                            buttons: [
                                'pdfHtml5'
                            ]
                        }
                         });
                        },
                        error: function (data) {
                        }                   
                    });
                });
            }
        $('.date-own').datepicker({
        format: "yyyy",
        minViewMode: 2,
        autoclose: true,
        startDate: new Date(new Date().getFullYear(), '0', '01'),
        });
    </script>

@endsection