{{ View::make('layout.header') }}
<style>
    .table thead th {
        padding: 8px 10px !important;
    }

    a.disable {
        pointer-events: none;
    }
    a#cacheButton.disabled ,a#refreshCache.disabled{
    pointer-events: none !important;
    opacity: 0.5 !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 mt-3">
                                <li class="breadcrumb-item">HR
                                </li>
                                <li class="breadcrumb-item ">Reports
                                </li>
                                <li class="breadcrumb-item active"><a
                                        href="{{ route('reports.attendance-sheet') }}">Attendance
                                        Sheet</a>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <section id="dashboard-ecommerce">
                <div class="row match-height">
                    <div class="col-md-12">
                        <div class="card">

                            <div class="card-header" style="">
                                <div class="">
                                    <button onclick="more_filter()"
                                        class="btn btn-primary waves-effect waves-float waves-light"
                                        style="">Filter</button>
                                    <div class="btn-group">
                                        <select name="" id="showAllTime" class=" form-control"
                                            style="padding-left: 10px; border-width: 0 1px 0 0px; border-radius:0px;">
                                            <option value="inOut">In and Out</option>
                                            <option value="allTime">With Break</option>
                                            <option value="present">Present</option>
                                        </select>
                                    </div>
                                </div>


                                <div class="d-flex align-items-right">
                                    <div class="btn-group btn-align-right MiniRightnav">
                 
                                    <div id="buttonreplacement" style="margin-right:15px; display:none;"><img src="http://www.willmaster.com/images/preload.gif" style="width:26px;height:26px"alt="loading..."></div>

                                         <a id="cacheButton" 
                                                    onclick="{{ $check_cache_exist ? 'uncaptureCache()' : 'captureCache()' }}" 
                                                    class="{{ $check_cache_exist ? 'text-danger' : 'text-success' }}">
                                                        <i class="fa fa-database" 
                                                        style="font-size:25px; margin-right:20px; color: {{ $check_cache_exist ? 'red' : 'green' }};"></i>
                                                        <span>{{ $check_cache_exist ? 'Unclose Cache' : 'Close Cache' }}</span>
                                                    </a>

                                               <a onclick="refreshCache()" id="refreshCache" class="text-danger" ><i class="fa fa-refresh" style="font-size:25px; margin-right:20px;"></i><span>Refresh Cache</span></a>
                                               

                                        <a onclick="exportpdf()" class="text-danger"><i
                                                class="fa fa-file-pdf-o report-download-btn"
                                                style="font-size:25px;"></i><span>Download PDF</span></a>
                                        &nbsp;&nbsp;
                                        <a onclick="exportexcel()" class="text-success"  target="_blank"><i
                                                class="fa fa-file-excel-o report-download-btn"
                                                style="font-size:25px;"></i><span>Generate Sheet</span></a>
                                        &nbsp;&nbsp;
                                        {{-- hide and show --}}
                                        <!--<div class="dropdown">-->
                                        <!--    <button class="dropbtn fa fa-gear"></button>-->
                                        <!--    <div id="myDropdown" class="dropdown-content">-->

                                        <!--    </div>-->
                                        <!--</div>-->
                                    </div>
                                </div>
                            </div>
                            <div class="card activity filter-container"
                                style="margin: 0px 15px; background-color:#e6e5e5; 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-3 filter-form-group mb-1">
                                        Department &nbsp;:&nbsp;
                                        <select name="department" id="department" class="form-control">
                                            <option value="">Department</option>
                                            @foreach ($departments as $department)
                                                <option value="{{ $department->id }}">{{ $department->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-sm-3 filter-form-group mb-1">
                                        Branch &nbsp;:&nbsp;
                                        <select name="branch" id="branch" class="form-control">
                                            <option value="">Branch</option>
                                            @foreach ($branches as $branch)
                                                <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-sm-3 filter-form-group mb-1">
                                        Category &nbsp;:&nbsp;
                                        <select name="category" id="category" class="form-control">
                                            <option value="">Category</option>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-sm-3 filter-form-group mb-1">
                                        Day Type &nbsp;:&nbsp;
                                        <select name="day_type" id="day_type" class="form-control">
                                            <option value="">Day Type</option>
                                            <option value="Work">Work</option>
                                            <option value="Rest">Rest</option>
                                            <option value="PH">PH</option>
                                        </select>
                                    </div>

                                    <div class="col-sm-3 filter-form-group mb-1">
                                        Date From &nbsp;:
                                        <input type="date" name="sdatefrom" id="sdatefrom"
                                            class="tcal form-control flatpickr-basic" placeholder="DD-MM-YYYY"
                                            data-dateformat="dd-mm-yy">
                                    </div>
                                    <div class="col-sm-3 filter-form-group mb-1">
                                        Date To &nbsp;:<span class="red">*</span>&nbsp;
                                        <input type="date" name="sdateto" id="sdateto"
                                            class="tcal form-control flatpickr-basic" placeholder="DD-MM-YYYY"
                                            data-dateformat="dd-mm-yy">
                                    </div>


                                    <div class="col-sm-6 filter-form-group" style="margin-top:19px;">
                                        <input type="button" value="Apply" onclick="getfilterdata();"
                                            class="filter-apply btn btn-info" />
                                    </div>
                                </div>
                            </div>


                            <div class="p-2">
                                <h1>Attendance Sheet</h1>
                            </div>
                            <div class="card-body" style="padding-top:0px !important; ">
                                <table width="100%">
                                    <tr>
                                        <th width=""><strong>AL</strong> = Annual</th>
                                        <th width=""><strong>MC</strong> = Medical</th>
                                        <th width=""><strong>MT</strong> = Maternity</th>
                                        <th width=""><strong>MR</strong> = Marriage </th>
                                        <th width=""><strong>CL</strong> = Compassionate </th>
                                        <th width=""><strong>HL</strong> = Hospital </th>
                                        <th width=""><strong>EX</strong> = Examination </th>
                                    </tr>
                                    <tr>
                                        <th width=""><strong>PT</strong> = Paternity</th>
                                        <th width=""><strong>AD</strong> = Advance</th>
                                        <th width=""><strong>RL</strong> = Replacement</th>
                                        <th width=""><strong>LS</strong> = Out Of Office </th>
                                        <th width=""><strong>AB</strong> = Absent </th>
                                        <th width=""><strong>NPL</strong> = NPL </th>
                                        <th width=""><strong>EL</strong> = Emergency </th>
                                    </tr>
                                </table>
                                <br>

                                <table width="100%">
                                    <tr>
                                        <th width="25%"><strong>√</strong> = Present</th>
                                        <th width="25%"><strong>AB</strong> = Absent</th>
                                        <th width="25%"><strong>R</strong> = Restday</th>
                                        <th width="25%"><strong>H</strong> = Holiday </th>
                                    </tr>
                                </table>
                                <br>

                                <h3><span id="from-date">23-05-2023</span> - <span id="to-date">28-05-2023</span>
                                </h3>

                                <div class="table-responsive " style="overflow-x: scroll !important;">
                                    <table class="table" id="reporttable" style=" font-size:12px;">
                                        <thead class="test-thead">
                                            <tr class="date-range">



                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
<!-- END: Content-->
{{ View::make('layout.footer') }}
@include('E-Attendance.edit_attendance')
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        getfilterdata();
    });

    function dateDynamic(dataRange) {
        var dynamicHeading =
            `<th style="text-transform: capitalize;">User</th>
            <th style="text-transform: capitalize;">Name</th>
            <th style="text-transform: capitalize;">Overtime</th>
            <th style="text-transform: capitalize;">Short</th>
            <th style="text-transform: capitalize;">Work</th>
            <th style="text-transform: capitalize;">Leave</th>`;

        for (var i = 0; i < dataRange.length; i++) {
            var hData = dataRange[i].split("-");
            dynamicHeading += `<th style="text-transform: capitalize;">${hData[0]}</th>`
        }

        $(".date-range").html(dynamicHeading);
    }


    function getfilterdata() {

        if ($.fn.DataTable.isDataTable('#reporttable')) {

            $('#reporttable').DataTable().destroy(true);

            $('#reporttable tbody').empty();
            $('#reporttable').dataTable().fnClearTable();
            $('#reporttable').dataTable().fnDestroy();
            $('#reporttable').DataTable().clear();
            $('#reporttable').DataTable().clear().destroy();

            $(".table-responsive").html(
                `<table class="table" id="reporttable" style=" font-size:12px;">
                    <thead class="test-thead">
                        <tr class="date-range">

                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>`
            )
        }

        var sdatefrom = $("#sdatefrom").val();
        var sdateto = $("#sdateto").val();


        var today = new Date();
        var dd = String(today.getDate());
        var mm = String(today.getMonth() + 1);
        var yyyy = today.getFullYear();

        if (!sdatefrom) {
            sdatefrom = yyyy + '-' + mm + '-' + "01";
        }

        if (!sdateto) {
            sdateto = yyyy + '-' + mm + '-' + dd;
        }
        var fDate = new Date(sdatefrom);
        fDate = fDate.getDate() + '-' + `${fDate.getMonth() + 1}` + '-' + fDate.getFullYear();

        var tDate = new Date(sdateto);
        tDate = tDate.getDate() + '-' + `${tDate.getMonth() + 1}` + '-' + tDate.getFullYear();

        $("#from-date").html(fDate);
        $("#to-date").html(tDate);

        // console.log(sdateto);
        let schedule = $("#schedule").val();
        let day_type = $("#day_type").val();
        let category = $("#category").val();
        let branch = $("#branch").val();
        let department = $("#department").val();
        let in_out_filter = $("#in_out_filter").val();
        let apploginmodel = "{{ hasEattendanceEditAccess() ? '#inlineForm' : '' }}";

        // date diff
        var date1 = new Date(sdateto).valueOf();
        var date2 = new Date(sdatefrom).valueOf();
        var dataRange = [];

        while (date2 <= date1) {

            function getMonthName(monthNumber) {
                const date = new Date();
                date.setMonth(monthNumber);

                return date.toLocaleString('en-US', {
                    month: 'long'
                });
            }

            var rangeDays = new Date(date2).getDate();
            var rangeMonth = getMonthName(new Date(date2).getMonth());
            var rangeFinal = rangeDays + "-" + rangeMonth;

            dataRange.push(rangeFinal);
            date2 += (1000 * 60 * 60 * 24);

        }
        var ff = setTimeout(() => {
            dateDynamic(dataRange);
            clearTimeout(ff);
        }, 1000);

        var dyObject = `   {
                    data: 'employee_no',
                    name: 'Employee no'
                },

                {
                    data: 'personname',
                    name: 'Employee name'
                },

                {
                    data: 'overtime',
                    name: 'Overtime'
                },

                {
                    data: 'short',
                    name: 'Short'
                },

                {
                    data: 'workday',
                    name: 'Workday'
                },

                {
                    data: 'leave',
                    name: 'Leave'
                },
            
               `;
for (var i = 0; i < dataRange.length; i++) {
    dyObject += `{
        name: '${dataRange[i]}',
        render: function(data, type, row, meta) {
            let a = '${dataRange[i]}';
            let b = '';
            if (row.att[a] && row.att[a]['time'] !== null) {
                b = row.att[a]['time'];
            }
            return b;
        }
    },`;
}


        dyObject = `[${dyObject}]`;

        dyObject = eval(dyObject);

        // console.log(dataRange);
        // console.log(dyObject);

        var finalDataOfArray = {
            "lengthMenu": [
                [20, 50, 100],
                [20, 50, 100]
            ],
            "order": [],
            "processing": true,
            "ordering": false,
            "destroy": true,
            "serverSide": true,
            "ajax": {
                "url": "{!! route('reports.attendance-sheet-data') !!}",
                "type": 'GET',
                "data": function(d){
            
                    delete d.columns;
                    d['user_type'] = 'hr';
                    d['sdatefrom'] = sdatefrom;
                    d['sdateto'] = sdateto;
                    d['schedule'] = schedule;
                    d['day_type'] = day_type;
                    d['category'] = category;
                    d['branch'] = branch;
                    d['department'] = department;
                    d['in_out_filter'] = in_out_filter;
                    
                },
                dataSrc: function(response) {
                            // Update cache button based on `cache_exist`
                            if (response.cache_exist === 1) {
                                $("a#cacheButton")
                                    .attr("onclick", "uncaptureCache()")
                                    .removeClass("text-success")
                                    .addClass("text-danger");
                                $("a#cacheButton i")
                                    .css("color", "red");
                                $("a#cacheButton span")
                                    .text("Unclose Cache");
                            } else {
                                $("a#cacheButton")
                                    .attr("onclick", "captureCache()")
                                    .removeClass("text-danger")
                                    .addClass("text-success");
                                $("a#cacheButton i")
                                    .css("color", "green");
                                $("a#cacheButton span")
                                    .text("Close Cache");
                            }
    
                            console.log(response.cache_exist);
                                return response.data; // Return data for DataTable
                            }
            },
            "deferRender": true,
            "columns": dyObject,
            'rowCallback': function(row, data, index) {
                // $('td:eq(2)', row).css('width', '120');
            },
            'columnDefs': [{
                "targets": [],
                "orderable": false
            }],
            "language": {
                "paginate": {
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                }
            },
            drawCallback: function(setting) {
                $("td").css('height', '70');
                $('.test-thead tr:nth-child(2)').hide()

                $(".td-show").css('display', 'none');
                $(".presentTick").css('display', 'none');
                $("#showAllTime").change(function() {
                    if ($(this).val() == "allTime") {
                        $(".all-time").css('display', 'block');
                        $(".td-show").css('display', 'block');
                        $(".presentTick").css('display', 'none');
                    } else if ($(this).val() == "inOut") {
                        $(".all-time").css('display', 'block');
                        $(".td-show").css('display', 'none');
                        $(".presentTick").css('display', 'none');
                    } else if ($(this).val() == "present") {
                        $(".all-time").css('display', 'none');
                        $(".presentTick").css('display', 'block');
                    }
                });
            }
        }
        console.log("Initializing DataTable...");
        var table = $('#reporttable').DataTable(finalDataOfArray);

        // show and hide columns
        var columns = table.settings().init().columns;
        for (let i = 0; i < columns.length; i++) {
            var dCol =
                `<div class="toggle-vis custom-control mt-1 ml-1 custom-control-success custom-checkbox"><input class='inp custom-control-input' data-column="${i}" key="{!! $c_key !!}" id="{!! $c_key !!}_${i}"  type="checkbox" checked><label for="{!! $c_key !!}_${i}" class="custom-control-label" style="cursor: pointer">${columns[i].name}</label></div>`;
            $("#myDropdown").append(dCol);
        }

        // show hide and show data
        var daraArr = {!! json_encode($columnHideShowData) !!}
        hidefun(table, '{!! $c_key !!}', daraArr);


    }

    // excel download option

    function exportexcel() {
        let exportdata = [];
        $('.singleSelectBox').each(function() {
            if ($(this).is(":checked")) {
                exportdata.push($(this).val());
            }
        });
        exportdata = exportdata.toString();

        let branch = $("#branch").val();
        let department = $("#department").val();
        let category = $("#category").val();
        let sdatefrom= $("#sdatefrom").val();
        let sdateto = $("#sdateto").val();
        let day_type = $("#day_type").val(); 
        let random = Math.random();

             
        var today = new Date();
        var dd = String(today.getDate());
        var mm = String(today.getMonth() + 1);
        var yyyy = today.getFullYear();

        if (!sdatefrom) {
            sdatefrom = yyyy + '-' + mm + '-' + "01";
        }

        if (!sdateto) {
            sdateto = yyyy + '-' + mm + '-' + dd;
        }
            
        // let url = "attendance-sheet-excel?branch=" + branch + "&department=" + department + "&category=" + category +
        //     "&exportdata=" + "&random="+random + "&sdatefrom=" +sdatefrom + "&sdateto="+ sdateto+"&daytype="+day_type;

        let url = "attendance-sheet-excel-close?branch=" + branch + "&department=" + department + "&category=" + category +
        "&exportdata=" + "&random="+random + "&sdatefrom=" +sdatefrom + "&sdateto="+ sdateto+"&daytype="+day_type;


        window.location.href = url;

    }

    // excel download option

    function exportpdf() {

        let exportdata = [];
        $('.singleSelectBox').each(function() {
            if ($(this).is(":checked")) {
                exportdata.push($(this).val());
            }
        });
        exportdata = exportdata.toString();
        let branch = $("#branch").val();
        let department = $("#department").val();
        let category = $("#category").val();
        let predata = $("#showAllTime").val();
        let sdatefrom= $("#sdatefrom").val();
        let sdateto = $("#sdateto").val();
        let day_type = $("#day_type").val(); 
        let random = Math.random();

        var today = new Date();
        var dd = String(today.getDate());
        var mm = String(today.getMonth() + 1);
        var yyyy = today.getFullYear();

        if (!sdatefrom) {
            sdatefrom = yyyy + '-' + mm + '-' + "01";
        }

        if (!sdateto) {
            sdateto = yyyy + '-' + mm + '-' + dd;
        }

        // let url = "attendance-sheet-pdf?branch=" + branch + "&department=" + department + "&category=" + category +
        //     "&exportdata=" + exportdata + "&predata=" + predata + "&random="+random;

        let url = "download-attendance-pdf-close?branch=" + branch + "&department=" + department + "&category=" + category +
        "&exportdata=" + exportdata + "&predata=" + predata + "&random="+random + "&sdatefrom=" +sdatefrom + "&sdateto="+ sdateto+"&daytype="+day_type;
            
        window.location.href = url;
    }

    // pdf download option



    var x = document.getElementById("empleavetoday");
    x.style.display = "none";

    function more_filter() {
        let x = document.getElementById("empleavetoday");
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }


    function captureCache() {
        
    disableButtons();

       var baseUrl = "{{ route('reports.attendance-sheet-close-cache') }}";
    // Fetch values from input/select elements

        let from = $("#sdatefrom").val() || '';  // Default to an empty string if undefined
        let to = $("#sdateto").val() || '';  // Default to an empty string if undefined
        let year = '';
        if (from) {
            // Extract the year from the provided date
            year = new Date(from).getFullYear();
        } else {
            // If 'from' is empty, use the current year
            year = new Date().getFullYear();
        }


    // Construct the URL with new fields
    let string_url = `${baseUrl}?pagetype=attendance_sheet&year=${year}&length=-1&draw=1&closeyear=1`;

    // Show the loading icon before the request starts
    $("#buttonreplacement").show();

    // AJAX request
    $.ajax({
        url: string_url,
        method: "GET", // Adjust to "POST" if required
        timeout: 1200000,
        success: function (response) {
            enableButtons();
            $("#buttonreplacement").hide();

            // Handle success
            Swal.fire({
                icon: 'success',
                title: 'Success',
                html: 'Cache for Year <strong>' + year + '</strong> closed successfully!'
            }).then(() => {
                // Refresh the page after the user clicks "OK"
                location.reload();
            });
            console.log(response);
        },
        error: function (xhr, status, error) {
            // Re-enable buttons
            enableButtons();
            $("#buttonreplacement").hide();

            // Handle error response
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Error refreshing cache: ' + error
            });
            console.error(xhr.responseText);
        }
    });
}


// Function to disable buttons
function disableButtons() {
 $("#cacheButton").addClass("disabled").attr("onclick", ""); // Remove click handler
 $("#refreshCache").addClass("disabled").attr("onclick", ""); // Remove click handler
}

// Function to enable buttons
function enableButtons() {
 $("#cacheButton").removeClass("disabled").attr("onclick", "{{ $check_cache_exist ? 'uncaptureCache()' : 'captureCache()' }}");
 $("#refreshCache").removeClass("disabled").attr("onclick", "refreshCache()");
}
            
     function uncaptureCache() {
         
        var baseUrl = "{{ route('reports.delete-attendance-sheet-cache') }}";

        let from = $("#sdatefrom").val() || '';  // Default to an empty string if undefined
        let to = $("#sdateto").val() || '';  // Default to an empty string if undefined
        if (from) {
            // Extract the year from the provided date
            year = new Date(from).getFullYear();
        } else {
            // If 'from' is empty, use the current year
            year = new Date().getFullYear();
        }
         
         // Construct the URL for deleting the cache
         var string_url = `${baseUrl}?year=` + year;  // Include the year in the query parameters
     
         // AJAX request to delete cache
         $.ajax({
             url: string_url,
             method: "GET",  // Use GET as per your route definition
             success: function (response) {
                 // Handle success
                 Swal.fire({
                     icon: 'success',
                     title: 'Success',
                     html: 'Cache of Year <strong>' + year + '</strong> unclosed successfully!'
                 }).then(() => {
                     // Optionally, refresh the page after success
                     location.reload();
                 });
                 console.log(response);
             },
             error: function (xhr, status, error) {
                 // Handle error response
                 Swal.fire({
                     icon: 'error',
                     title: 'Error',
                     text: 'Error deleting cache: ' + error
                 });
                 console.error(xhr.responseText);
             }
         });
     }
 
     function refreshCache() {

      disableButtons();

      var baseUrl = "{{ route('reports.attendance-sheet-close-cache') }}";
      // Fetch values from input/select elements

        let from = $("#sdatefrom").val() || '';  // Default to an empty string if undefined
        let to = $("#sdateto").val() || '';  // Default to an empty string if undefined

    // Get the current year
    let year = new Date().getFullYear();

    // Construct the URL with new fields
    let string_url = `${baseUrl}?pagetype=attendance_sheet&year=${year}&length=-1&draw=1&closeyear=1`;

    // Show the loading icon before the request starts
    $("#buttonreplacement").show();

    // AJAX request
    $.ajax({
        url: string_url,
        method: "GET", // Adjust to "POST" if required
        timeout: 1200000,
        success: function (response) {
            enableButtons();

            $("#buttonreplacement").hide();
            // Handle success
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: 'Cache refreshed successfully!'
            }).then(() => {
                // Refresh the page after the user clicks "OK"
                location.reload();
            });
            console.log(response);
        },
        error: function (xhr, status, error) {
            enableButtons();

            $("#buttonreplacement").hide();
            // Handle error response
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Error refreshing cache: ' + error
            });
            console.error(xhr.responseText);
        }
    });
}

</script>