@include('components/header')
@include('components/sidebar')
<!--  Begin CONTENT AREA  -->
<style>
.ui-datepicker-week-end {
  background: #ddd !important;
  pointer-events: none !important;
}
.ui-datepicker-week-end  a{
  background: #ddd !important;
  pointer-events: none !important;
}
</style>
<div id="content" class="main-content">
    <div class="topbar_content mt-3">
        <h2> Leave List
        </h2>
        <div class="viewAll mr-4">
            <a href="/admin_dashboard" class="viewAllBtn">
                <button class="btn btn-danger">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="feather feather-arrow-left">
                    <line x1="19" y1="12" x2="5" y2="12"></line>
                    <polyline points="12 19 5 12 12 5"></polyline>
                    </svg> Back
                </button>
            </a>
        </div>
    </div>
<div class="layout-px-spacing layout-top-spacing">
    <div class="modal-footer">
    </div>
    <div class="row ">
        <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
            <div class="card">
                <div class="card-body search-filter p-3">
                    <div class="d-flex">
                        <div class="col-2">
                            <select class="form-control" onchange="exportTable(this.value)">
                                <option>Select Export Format</option>
                                <option value="excel">Excel</option>
                                <option value="pdf">PDF</option>
                            </select>
                        </div>
                        <div class="col-10">
                            <form action="{{ route('admin.employee_balance_post') }}" method="post" class="form-group">
                                {{csrf_field()}}
                                <div class="row emp-filter-area pr-0 pl-2 justify-content-end">
                                    <div class="col-3">
                                        <select class="form-control" name="month">
                                            <option>Select Month</option>
                                            @for ($i = 1; $i <= 12; $i++)
                                                @php
                                                    $time = mktime(0, 0, 0, $i); 
                                                    $label = date('F', $time);  
                                                    $value = date('m', $time);
                                                    if(Session::get('month') == $value) {
                                                        echo "<option selected value='$value'>$label</option>";
                                                    } else {
                                                        echo "<option value='$value'>$label</option>";
                                                    }
                                                @endphp
                                            @endfor
                                        </select>
                                    </div>
                                    <div class="col-3 form-group date-col">
                                        <select class="form-control" name="year">
                                            <option>Select Year</option>
                                            @foreach (range(2024, date("Y")) as $value) 
                                                @if(Session::get('year') == $value)
                                                    <option selected value="{{$value}}">{{$value}}</option>
                                                @else
                                                    <option value="{{$value}}">{{$value}}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-2">
                                        <div class="form-group p-0"> 
                                            <button class="btn btn-primary btn-block searchBtn" value="joining_list" name="joining_list" type="submit">Search</button>
                                        </div>
                                    </div>
                                    <div class="col-1 listfilter d-flex justify-content-center">
                                        @if(Session::get('month') != null || Session::get('year') != null)
                                            <div class="clear-filter-icon form-group mb-0">
                                                <a href="{{ route('admin.employee_balance') }}"><img src="{{asset('design/img/clearfiltericon.svg')}}"></a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="zero-config" class="table dt-table-hover table-striped" style="width:100%">
                            <thead>
                                <tr class="text-center">
                                    <th>Sr No</th>
                                    <th>Employee Id</th>
                                    <th>Employee Name</th>
                                    @foreach($leave_managment as $lm)
                                        <th>{{ $lm->leave_name }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @php $i = 0; @endphp
                                @foreach($custom_array as $key => $array)
                                    <tr class="text-center">
                                        <td>{{++$i}}</td>
                                        <td>{{explode(',',$key)[0]}}</td>
                                        <td>{{explode(',',$key)[1]}}</td>
                                        @foreach($leave_managment as $leave_datas)
                                            <td>{{isset($array[$leave_datas->leave_name]) ? $array[$leave_datas->leave_name] : '-'}}</td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@if(session('done'))
    <script type="text/javascript">
    swal.fire({
        title: '@php echo session("done")@endphp',
        type: 'success',
        padding: '2em'
    })
    </script>
@elseif(session('edit'))
    <script type="text/javascript">
    swal.fire({
        title: '@php echo session("edit")@endphp',
        type: 'success',
        padding: '2em'
    })
    </script>
@elseif(session('delete'))
    <script type="text/javascript">
    swal.fire({
        title: '@php echo session("delete")@endphp',
        type: 'success',
        padding: '2em'
    })
    </script>
@elseif(session('error'))
    <script type="text/javascript">
    swal.fire({
        title: '@php echo session("error")@endphp',
        type: 'warning',
        padding: '2em'
    })
    </script>
@endif
@include('components/footer')
</script>
<script>
    function exportTable(format) {
        const table = document.getElementById('zero-config');
        var tabledata = new DataTable('#zero-config');
        tabledata.destroy();
        const clonedTable = table.cloneNode(true);
        const rows = clonedTable.getElementsByTagName('tr');

        const data = $(".topbar_content").find('h2').text();
        if (format === 'pdf') {
            const options = {
              margin: 10,
              filename: 'EmployeeList.pdf',
              image: { type: 'jpeg', quality: 0.98 },
              html2canvas: { scale: 2 },
              jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }
            };
            const tableHTML = clonedTable.outerHTML; 
            const combinedHTML = `<div>${data}</div><div>${tableHTML}</div>`;

            html2pdf()
              .set(options)
              .from(combinedHTML)
              .save();
        } else if (format === 'csv') {
            let csv = [];

            clonedTable.querySelectorAll('tr').forEach(function(row) {
                let rowData = [];
                row.querySelectorAll('th, td').forEach(function(cell) {
                    console.log(cell);
                rowData.push(cell.innerText);
                });
                csv.push(rowData.join(','));
            });
            const csvContent = 'data:text/csv;charset=utf-8,' + csv.join(',');
            const encodedUri = encodeURI(csvContent);
            const link = document.createElement('a');
            link.setAttribute('href', encodedUri);
            link.setAttribute('download', 'table.csv');
            document.body.appendChild(link);
            link.click();
        } else if (format === 'excel') {
            var filename = "{{ Session::get('type') }}";
            var downloadLink;
            var dataType = 'application/vnd.ms-excel';
            var tableSelect = clonedTable;
            var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
            
            filename = filename?filename+'.xls':'excel_data.xls';
            downloadLink = document.createElement("a");
            
            document.body.appendChild(downloadLink);
            
            if(navigator.msSaveOrOpenBlob){
                var blob = new Blob(['\ufeff', tableHTML], {
                    type: dataType
                });
                navigator.msSaveOrOpenBlob( blob, filename);
            }else{
                downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
                downloadLink.download = filename;
                downloadLink.click();
            }
            window.location.reload(true);
        }
    }

</script>