@extends('app-new')
@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
    
    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <!-- END: Page CSS-->
    
@endpush 

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Leave Report</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="home">Home</a>
                    </li>
                    <li class="breadcrumb-item active">Leave Report
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush
@section('content')
    <!-- Column Search -->
    <section id="column-search-datatable">
        <div class="row" id="table-responsive">
            <div class="col-12">
                <div class="card">
                    <div class="table-responsive">
                         <table class="table mb-0" id="organization">
                            <thead>
                                <tr>
                                    <th scope="col" class="text-nowrap">Department</th>
                                    <th scope="col" class="text-nowrap">Designation</th>
                                    <th scope="col" class="text-nowrap">Employee Name</th>
                                    <th scope="col" class="text-nowrap">Employee Code</th>
                                    <th scope="col" class="text-nowrap">Type of Leave</th>
                                    <th scope="col" class="text-nowrap">Total Leave</th>
                                    <th scope="col" class="text-nowrap">Applied Leave </th>
                                    <th scope="col" class="text-nowrap">Approved Leave </th>
                                    <th scope="col" class="text-nowrap">Pending Leave</th>
                                    <th scope="col" class="text-nowrap">Balance Leave </th>
                                </tr>
                            </thead>
                        <tbody>
                            @foreach($dataArr as $value)
                                @foreach($value['leaves'] as $leave)
                                    <tr>
                                        <td class="text-nowrap"><strong>{{$value['department_name']}}</strong></td>
                                        <td class="text-nowrap"><strong>{{$value['designation_name']}}</strong></td>
                                        <td class="text-nowrap">{{$value['employee_name']}}</td>
                                        <td class="text-nowrap">{{$value['employee_code']}}</td>
                                        <td class="text-nowrap">{{$leave['name']}}</td>
                                        <td class="text-nowrap">{{$leave['total']}}</td>
                                        <td class="text-nowrap">{{$leave['applied']}}</td>
                                        <td class="text-nowrap">{{$leave['approved']}}</td>
                                        <td class="text-nowrap">{{$leave['pending']}}</td>
                                        <td class="text-nowrap">{{$leave['balance']}}</td>   
                                    </tr>
                                @endforeach
                            @endforeach
                        </tbody>
                    </table>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <!--/ Column Search -->
@endsection 
@push('footer-script') 
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
    <!-- END: Page Vendor JS-->
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>
    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/tables/table-datatables-basic.js"></script>
    <script src="/app-assets/js/scripts/tables/table-datatables-advanced.js"></script>
    <!-- END: Page JS-->
<script>
$(document).ready(function() {
    $('#organization').DataTable({ 
    language: { search: "" },
    // 'aoColumnDefs': [{
    //     'bSortable': false,
    //     'aTargets': [-1],
    // }],
        dom: 'fBitp',
    buttons: [
        { 
            extend: 'excel',
            filename: '{{$organization->name}} Leave Report, {{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
            title: '{{$organization->name}} Leave Report',
            text: ' Export to Excel',
            className: 'btn btn-primary waves-effect waves-float waves-light',
        }
    ],
    "language": {
        search: '', searchPlaceholder: "Search...",
    },
    'olanguage': { 'sSearch': '', 'sSearchPlaceholder': "Search" },
    "ordering": true,
    "info":     true, 
    }); 

    });

    $(document).ready(function () { 
            $("#searchbox").hide(); 
            $(".filterbutton").click(function() {
                $("#searchbox").slideToggle('slow'); 
            });     
    });

</script>
<style type="text/css">
.dt-buttons 
    {
    padding-left: 10px;
    }
div.dataTables_wrapper div.dataTables_filter input 
   {
    margin-left: -13.25rem;
   }
div.dataTables_wrapper .dataTables_info 
   {
    padding-left: 10px;
   }
</style>

@endpush