{{View::make('layout.header')}}

<style>
   

    .select-filter{
        font-size: 1rem !important;
        width: 150px;
    }

    .select-filter:focus{
        border-color: #d8d6de !important;
    }

    table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before,
    table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after {
        display : none;
    }
    
    table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting {
    padding-right: 8px;
    }
    .flatpickr-calendar {
        width:100%;
        box-shadow: unset;
    }
    #barcontent1 .col-md-3{
        padding-right: 4%;
    }
    .MiniRightnav span {
        bottom: 28px !important;
    }
</style>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.4.0/dist/chartjs-plugin-datalabels.min.js"></script> 
    <!-- 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">
                            <h2 class="content-header-title float-left mb-0">E-Leave</h2>
                            <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="#">Leave Replacement</a>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
               

            </div>
            <div class="content-body">
                <section id="dashboard-ecommerce">
                    <div class="row match-height">
                        
                        <div class="col-xl-12 col-md-12 col-12">
                            <div class="card">
                                <div class="card-header">
                                    <div class="d-flex align-items-center">
                                        <h4 class="card-title">Leave Replacement</h4>
                                    </div>
                                </div>
                                <div class="card-body" style="padding-top:0px">
                                    <div class="row">
                                        <div class="col-sm-4">
                                            <div class="form-group">
                                                <label>Branch &nbsp;:<span class="red">*</span>&nbsp;</label>
                                                <select class="select form-control" id="branch_id" name="branch_id" onchange="empselect()">
                                                    <option value="">All</option>
                                                    
                                                    @foreach($branches as $branch)
                                                        <option value="{{ $branch->id }}" {{request()->get('branch_id') && request()->get('branch_id') == $dept->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                                                    @endforeach

                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-sm-4">
                                            <div class="form-group">
                                                <label>Department &nbsp;:<span class="red">*</span>&nbsp;</label>
                                                <select class="select form-control" id="department_id" name="department_id"  onchange="empselect()">
                                                    <option value="">All</option>
                                                    @foreach($departments as $dept)
                                                    <option value="{{ $dept->id }}" {{request()->get('department_id') && request()->get('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                                                    @endforeach

                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-sm-4">
                                            <div class="form-group">
                                                <label>Category &nbsp;:<span class="red">*</span>&nbsp;</label>
                                                <select class="select form-control" id="category_id" name="category_id"  onchange="empselect()">
                                                    <option value="">All</option>
                                                    @foreach($categories as $cat)
                                                        <option value="{{ $cat->id }}" {{request()->get('category_id') && request()->get('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        
                                        
                                        <div class="col-sm-4">
                                            <div class="form-group">
                                                <label>Search Employees &nbsp;:</label>
                                                <input type="text" name="name" id="name" placeholder="Search Name" class="tcal form-control " onkeyup="empselect()" >
                                            </div>
                                        </div>

                                        <div class="col-sm-4">
                                            <div class="form-group">
                                                <label>Select Employees &nbsp;:<span class="red">*</span>&nbsp;</label>
                                                <select class="select form-control" id="emplylist" name="emplylist">
                                                    <option value="">Click to Choose one</option>
                                                    
                                                </select>
                                            </div>
                                        </div>
                                        
                                        <div class="col-sm-4">
                                            <div class="form-group">
                                                <label>Work Date &nbsp;:</label>
                                                <input type="date" name="work_date" id="work_date" value="" class="emp-required form-control flatpickr-basic"  placeholder="DD-MM-YYYY" data-dateformat="dd-mm-yy" />
                                            </div>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="form-group">
                                                <label>No. Of Leave Granted &nbsp;:<span class="red">*</span>&nbsp;</label>
                                                <select class="select form-control" id="no_granted" name="no_granted">
                                                    <option value="0.5">0.5</option>
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                    <option value="4">4</option>
                                                    <option value="5">5</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-8">
                                            <div class="form-group">  
                                                <label>Reason &nbsp;:</label>
                                                <input type="text" name="reason" id="reason" placeholder="Enter Reason" class="tcal form-control" >
                                            </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-info mr-1" id="apply">Apply</button>
                                                
                                                
                                            </div>
                                            <div id="msg" style="margin-top:15px;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card ">
                                <div class="card-header">
                                    <div class="d-flex align-items-center">
                                        <h4 class="card-title">Replacement Leave List</h4>
                                    </div>
                                    <div class="btn-group MiniRightnav" style="align-items: center; display: flex;">
                                   
                                        <div class="">
                                                <button onclick="more_filter()" class="btn btn-primary waves-effect waves-float waves-light" style="">Filter</button>
                                            </div>&nbsp;
                                                                                        &nbsp;&nbsp;&nbsp;
                                            <div>
                                                <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;
                                                <a onclick="exportexcel()" class="text-success"><i class="fa fa-file-excel-o report-download-btn" style="font-size:25px;"></i><span>Download Excel</span></a>
                                            </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-4 filter-form-group mb-1">
                                                    Category &nbsp;:<span class="red">*</span>&nbsp;
                                                    <select class="select form-control" id="category_id1" name="category_id1">
                                                        <option value="">All</option>
                                                        @foreach($categories as $cat)
                                                            <option value="{{ $cat->id }}" {{request()->get('category_id') && request()->get('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            <div class="col-sm-4 filter-form-group mb-1">
                                                Department &nbsp;:<span class="red">*</span>&nbsp;
                                                <select class="select form-control" id="department_id1" name="department_id1">
                                                                <option value="">All</option>
                                                                @foreach($departments as $dept)
                                                                <option value="{{ $dept->id }}" {{request()->get('department_id') && request()->get('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                                                                @endforeach
    
                                                                </select>
                                            </div>
                                            <div class="col-sm-4 filter-form-group mb-1">
                                                Branch &nbsp;:<span class="red">*</span>&nbsp;
                                                <select class="select form-control" id="branch_id1" name="branch_id1">
                                                    <option value="">All</option>
                                                    
                                                    @foreach($branches as $branch)
                                                        <option value="{{ $branch->id }}" {{request()->get('branch_id') && request()->get('branch_id') == $dept->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                                                    @endforeach
    
                                                </select>
                                            </div>
                                            <div class="col-sm-4 filter-form-group mb-1">
                                                Employee Name / Employee No.&nbsp;:
                                                <input type="text" name="name1" id="name1" placeholder="Enter Employee Name / Employee No." class="tcal form-control" >
                                            </div>
                                            
                                            <div class="col-sm-4 filter-form-group mb-1">
                                                Date From  &nbsp;:
                                                <input type="text" name="sdatefrom" id="sdatefrom" placeholder="DD-MM-YYYY" class="tcal form-control flatpickr-basic" data-dateformat="dd-mm-yy">
                                            </div>
                                            <div class="col-sm-4 filter-form-group mb-1">
                                                Date To &nbsp;:<span class="red">*</span>&nbsp;
                                                <input type="text" name="sdateto" id="sdateto" placeholder="DD-MM-YYYY" class="tcal form-control flatpickr-basic" data-dateformat="dd-mm-yy">
                                            </div>
                                            <div class="col-sm-6 filter-form-group" style="">
                                                <input type="button" value="Apply" onclick="search();" class="filter-apply btn btn-info" />
                                            </div>
                                        </div>
                                    </div>
                                
                                <div class="card-body" style="padding-top:0px;">
                                    <div class="table-responsive" style="overflow-x: unset !important;">
                                    <div class="table-responsive" style="overflow-x: unset !important;">
                                        <table class="table table-striped" id="reporttable" style=" font-size:12px;">
                                            <thead>
                                                <tr>
                                                    <th style="text-transform: capitalize; border: none;" width="10%">Emp No.</th>
                                                    <th style="text-transform: capitalize; border: none;" width="20%">Name</th>
                                                    
                                                    <th style="text-transform: capitalize; border: none;" width="10%">Department</th>
                                                    <th style="text-transform: capitalize; border: none;" width="10%">Branch</th>
                                                    <th style="text-transform: capitalize; border: none;" width="10%">Category</th>
                                                    <th style="text-transform: capitalize; border: none;" width="10%">Date</th>
                                                    <th style="text-transform: capitalize;white-space: nowrap; border: none;" width="5%">Days Granted</th>
                                                    <!-- <th style="text-transform: capitalize;" width="3%">Cancellation Reason</th> -->

                                                    <th style="text-transform: capitalize; border: none;"  width="18%">Reason</th>
                                                    <th style="text-transform: capitalize; border: none;" width="5%">Edit</th>
                                                    <th style="text-transform:capitalize; text-align:center;white-space: nowrap; border: none;" 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="rejectModal" tabindex="-1" role="dialog" aria-labelledby="rejectModalLabel" 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 want delete this replacement leave(s)?</h5>
                        </div>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-danger reject-btn">OK</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.leavereplacement-modal')

<script>
    var base_url = $('body').attr('data-baseurl')+'/e-leave';
    var x = document.getElementById("empleavetoday");
    x.style.display = "none";


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

    $(document).on('click', '.reject-btn', function() {
            $.each($('input[name="inlineRadioOptions"]:checked'), function(){
                var str =$(this).val();
                var url = '{{route('deleteLeaveAdjustment')}}';
                    $.ajax({
                        url:url,
                        type:'POST',
                        data:{
                            '_token' : "{{ csrf_token() }}",
                            'id' : str,
                        },
                        success:function(e){
                        
                        },
                        error:function(w){
                        }
                    });
              });
           
            window.location.reload();
        });
    $(document).ready(function(){   
        empselect();
        $('#reporttable').DataTable({
                "lengthMenu": [[20, 50, 100, -1], [20, 50,100, "All"]],
                "order": [],
		        "processing": true,
                "destroy": true,
		        "serverSide": true,
		        "ajax": "{!! route('getLeaveAdjustmentList') !!}",

                "columns": [


                    { data: 'employee_no', name: 'employee_no' },
                    { data: 'name', name: 'name' },
                    { data: 'department', name: 'department' },
                    { data: 'branch', name: 'branch' },
                    { data: 'category', name: 'category' },
                    { data: 'start_date', name: 'start_date',
                        "render": function (data,type,row,meta){
                            var ldate =  row.start_date.split("-").reverse().join("-");
                   
                        return ldate;
                    } },
                    { data: 'no_granted', name: 'no_granted' },
                    { data: 'reason', name: 'reason' },
                    { data: 'leave_type', name: 'leave_type',
		            "render": function (data,type,row,meta){
                        var edit = '<a class="appDialog-model" data-toggle="modal" data-target="#inlineForm11" data-id="'+row.id+'" style="color:#3192F4;"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><circle cx="12" cy="12" r="3"></circle><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg></a>&nbsp;';
                        
                        return edit;
                   } },
                    { "render": function (data,type,row,meta){
                        
                        var dlt = '<input type="checkbox" name="inlineRadioOptions"id="inlineRadio'+row.id+'" value="'+row.id+'"/>';
                          
                        return dlt;
                   } },
                   



                ],

                "language": {
                    "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                    }
                },
                'columnDefs': [{
                    "targets": [9],
                    "orderable": false
                }],
                'rowCallback': function(row, data, index){
                   $(row).find('td:eq(7)').css('word-break', "break-all");
                   $(row).find('td:eq(6)').css('text-align', "center");
                   $(row).find('td:eq(8)').css('text-align', "center");
                   $(row).find('td:eq(9)').css('text-align', "center");

                }


		});
    });

    function search(){
        var branch = $("#branch_id1").val();
        var department = $("#department_id1").val();
        var category = $("#category_id1").val();
        var from = $("#sdatefrom").val();
        var to = $("#sdateto").val();
        var sname = document.getElementById("name1").value;
        var string_url = "getLeaveAdjustmentList?branch_id="+ branch +"&department_id="+ department +"&category_id="+ category+"&sname="+sname+"&from="+from+"&to="+to;

        $('#reporttable').DataTable({
            "lengthMenu": [[20, 50, 100, -1], [20, 50,100, "All"]],
            "order": [],
            "processing": true,
            "destroy": true,
            "serverSide": true,
            "ajax": string_url,

            "columns": [


                    { data: 'employee_no', name: 'employee_no' },
                    { data: 'name', name: 'name' },
                    { data: 'department', name: 'department' },
                    { data: 'branch', name: 'branch' },
                    { data: 'category', name: 'category' },
                    { data: 'start_date', name: 'start_date',
                        "render": function (data,type,row,meta){
                            var ldate =  row.start_date.split("-").reverse().join("-");
                   
                        return ldate;
                    } },
                    { data: 'no_granted', name: 'no_granted' },
                    { data: 'reason', name: 'reason' },
                    { data: 'leave_type', name: 'leave_type',
		            "render": function (data,type,row,meta){
                        var edit = '<a class="appDialog-model" data-toggle="modal" data-target="#inlineForm11" data-id="'+row.id+'" style="color:#3192F4;"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><circle cx="12" cy="12" r="3"></circle><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg></a>&nbsp;';
                        
                        return edit;
                   } },
                    { "render": function (data,type,row,meta){
                        
                        var dlt = '<input type="checkbox" name="inlineRadioOptions"id="inlineRadio'+row.id+'" value="'+row.id+'"/>';
                          
                        return dlt;
                   } },
                   



                ],

                "language": {
                    "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                    }
                },
                'columnDefs': [{
                    "targets": [9],
                    "orderable": false
                }],
                'rowCallback': function(row, data, index){
                   $(row).find('td:eq(7)').css('word-break', "break-all");
                   $(row).find('td:eq(6)').css('text-align', "center");
                   $(row).find('td:eq(8)').css('text-align', "center");
                   $(row).find('td:eq(9)').css('text-align', "center");

                }


        });
    }

    function update(){
        $.ajax({
            type:'post',
            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/leave_replacement.blade.php:494
Stack trace:
#0 {main}
  thrown in <b>/home/ecoleave/public_html/backup/v6/resources/views/hr/setup/leave_replacement.blade.php</b> on line <b>494</b><br />