{{ 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%;
    }
</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="#">Edit Leave</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 card-user-timeline">
                            <div class="card-header">
                                <div class="d-flex align-items-center">
                                    <h4 class="card-title">Staff Leave Details</h4>
                                </div>
                                <div class="btn-group">
                                    <input type="text" id="staff_name" name="staff_name" class="form-control"
                                        placeholder="Staff name"
                                        style="padding-left: 10px; border-width: 0 1px 0 0px; border-radius:0px;"
                                        onkeyup="search()"
                                        value="{{ request()->get('name') ? request()->get('name') : '' }}">
                                    &nbsp;&nbsp;&nbsp;
                                    <div class="">
                                        <button onclick="more_filter()"
                                            class="btn btn-primary waves-effect waves-float waves-light"
                                            style="">Filter</button>
                                    </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-6 filter-form-group mb-1">
                                        Category &nbsp;:<span class="red">*</span>&nbsp;
                                        <select class="select form-control" id="category_id" name="category_id">
                                            <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-6 filter-form-group mb-1">
                                        Department &nbsp;:<span class="red">*</span>&nbsp;
                                        <select class="select form-control" id="department_id" name="department_id">
                                            <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-6 filter-form-group mb-1">
                                        Branch &nbsp;:<span class="red">*</span>&nbsp;
                                        <select class="select form-control" id="branch_id" name="branch_id">
                                            <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-6 filter-form-group mb-1">
                                        Employee Name &nbsp;:
                                        <input type="text" name="name" id="name" placeholder="Enter Name"
                                            class="tcal form-control datepicker" data-dateformat="dd-mm-yy">
                                    </div>
                                    <div class="col-sm-6 filter-form-group mb-1">
                                        Employee No. &nbsp;:
                                        <input type="text" name="empno" id="empno"
                                            placeholder="Enter Employee No." class="tcal form-control">
                                    </div>
                                    <div class="col-sm-6 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-6 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 mb-1">
                                        Leave Type &nbsp;:<span class="red">*</span>&nbsp;
                                        <select class="select form-control" id="leavetype" name="leavetype">
                                            <option value="">All</option>
                                            @foreach ($leaveTypes as $type)
                                                <option value="{{ $type->type }}"
                                                    {{ request()->get('type') && request()->get('type') == $type->name ? 'selected' : '' }}>
                                                    {{ $type->name }}</option>
                                            @endforeach

                                        </select>
                                    </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%">Leave Type</th>
                                                    <th style="text-transform: capitalize; border: none;"
                                                        width="10%">Date</th>
                                                    <!-- <th style="text-transform: capitalize;" width="10%">Applied On</th> -->
                                                    <th style="text-transform: capitalize;white-space: nowrap; border: none;"
                                                        width="2%">Days</th>
                                                    <!-- <th style="text-transform: capitalize;" width="3%">Cancellation Reason</th> -->

                                                    <th style="text-transform: capitalize; border: none;"
                                                        width="22%">Reason</th>
                                                    <th style="text-transform: capitalize; border: none;"
                                                        width="20%">Status</th>
                                                    <th style="text-transform:capitalize; text-align:center;white-space: nowrap; border: none;"
                                                        width="6%"><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 cancel the 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.editleave-modal')
@include('inc.pastleave-modal')
@include('inc.timline-model')
<script>
    var resObj;
    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";
        }
    }

    function getLeaveListForAdmin() {
        var url = '{{ route('getLeaveListForAdminFromTo') }}';
        $.ajax({
            url: url,
            type: 'get',
            data: {
                val: "normal",
            },
            success: function(data) {
                resObj = data;
            },
            error: function(w) {}
        });
    }

      function deleteRecords() {
    var promises = [];

    $('.leave-checkbox').each(function() {
        if ($(this).is(":checked")) {
            var url = $(this).data('val') == 0 ? '{{ route('cancelLeave') }}' : '{{ route('deletePastLeave') }}';
            var data = {
                '_token': "{{ csrf_token() }}",
                'id': $(this).val()
            };

            var promise = new Promise(function(resolve, reject) {
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: data,
                    success: function(response) {
                        resolve(response);
                    },
                    error: function(error) {
                        reject(error);
                    }
                });
            });

            promises.push(promise);
        }
    });

    return Promise.all(promises);
}

$(document).on('click', '.reject-btn', function() {
    deleteRecords().then(function() {
        // Reload the page or perform other actions if needed
        window.location.reload();
    }).catch(function(error) {
        console.error('An error occurred:', error);
    });
});

    $(document).ready(function() {
        var url = '{{ route('getLeaveListForAdminFromTo') }}';
        $.ajax({
            url: url,
            type: 'get',
            data: {
                val: "normal",
            },
            success: function(data) {
                resObj = data;
            },
            error: function(w) {}
        });
        $('#reporttable').DataTable({
            "lengthMenu": [
                [20, 50, 100],
                [20, 50, 100]
            ],
            "order": [],
            "processing": true,
            "destroy": true,
            "serverSide": true,
            "searching": false,
            "ajax": "{!! route('getLeaveListForAdminFromTo') !!}",

            "columns": [


                {
                    data: 'employee_no',
                    name: 'employee_no'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'leave_type',
                    name: 'leave_type',
                    "render": function(data, type, row, meta) {
                        var ltype = '';
                        var ids = row.id;
                        if (row.filename != '') {
                            ltype += '<a href="' + base_url + '/view-file/' + row.leave_id +
                                '" style="color:blue;">';
                            ltype += row.leave_type;
                            ltype += '</a>';
                        } else {
                            ltype += row.leave_type;
                        }
                        return ltype;
                    }
                },
                {
                    data: 'sdate',
                    name: 'sdate',
                    "render": function(data, type, row, meta) {
                        var ldate =
                            '<a class="appDialog-model" data-toggle="modal" data-target="#inlineForm" data-id="' +
                            row.id + '" style="color:#3192F4;">' + row.start_date + '</a>';


                        return ldate;
                    }
                },
                {
                    data: 'no_days',
                    name: 'no_days',
                    "render": function(data, type, row, meta) {
                        if (row.is_hourly != 0) {
                            var nodays = parseFloat(row.no_of_hours).toFixed(2) + ' Hour(s)';
                        } else {
                            var nodays = row.no_days + '&nbsp;' + row.half_day_type + ' Day(s)';
                        }
                        return nodays;
                    }
                },
                {
                    data: 'reason',
                    name: 'reason'
                },
                {
                    data: 'leave_status',
                    name: 'leave_status',
                    "render": function(data, type, row, meta) {
                        var colorData = row.back_color;
                        var leave = `<div class="status-fd" style="color: ${colorData}"> ⦿ ` +
                            row.leave_status + `</div>`;
                        return leave;
                    }
                },
                {
                    data: 'leave_type',
                    name: 'leave_type',
                    "render": function(data, type, row, meta) {
                        if (row.isPast == 1) {
                            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;';

                        } else {
                            var edit =
                                '<a class="appDialog-model13" data-toggle="modal" data-target="#inlineForm13" data-id="' +
                                row.leave_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;';
                        }
                        edit +=
                            '<input class="leave-checkbox" type="checkbox" name="inlineRadioOptions"id="amark' +
                            row.i + '" value="' + row.id + '" data-val="' + row.isPast +
                            '"/>';

                        return edit;
                    }
                },

            ],

            "language": {
                "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                }
            },
            'columnDefs': [{
                "targets": [7],
                "orderable": false
            }],
            'rowCallback': function(row, data, index) {
                $(row).find('td:eq(6)').css('color', data.back_color);
                $(row).find('td:eq(6)').css('width', "20%");
                $(row).find('td:eq(5)').css('word-break', "break-all");
                $(row).find('td:eq(7)').css('display', "flex");
                $(row).find('td:eq(7)').css('align-items', "center");
                $(row).find('td:eq(6)').css('font-weight', 'bold');

            }


        });
    });

    function search() {
        var branch = $("#branch_id").val();
        var department = $("#department_id").val();
        var category = $("#category_id").val();
        var from = document.getElementById("sdatefrom").value;
        var to = document.getElementById("sdateto").value;
        var name = document.getElementById("name").value;
        var sname = document.getElementById("staff_name").value;
        var empno = document.getElementById("empno").value;
        var type = document.getElementById("leavetype").value;
        var string_url = "getLeaveListForAdminFromTo?branch_id=" + branch + "&department_id=" + department +
            "&category_id=" + category + "&from=" + from + "&to=" + to + "&name=" + name + "&sname=" + sname +
            "&empno=" + empno + "&type=" + type;
        $.ajax({
            url: string_url,
            type: 'get',
            data: {
                val: "normal",
            },
            success: function(data) {
                resObj = data;
            },
            error: function(w) {}
        });
        $('#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: 'leave_type',
                    name: 'leave_type',
                    "render": function(data, type, row, meta) {
                        var ltype = '';
                        var ids = row.id;
                        if (row.filename != '') {
                            ltype += '<a href="' + base_url + '/view-file/' + row.leave_id +
                                '" style="color:blue;">';
                            ltype += row.leave_type;
                            ltype += '</a>';
                        } else {
                            ltype += row.leave_type;
                        }
                        return ltype;
                    }
                },
                {
                    data: 'sdate',
                    name: 'sdate',
                    "render": function(data, type, row, meta) {
                        var ldate =
                            '<a class="appDialog-model" data-toggle="modal" data-target="#inlineForm" data-id="' +
                            row.id + '" style="color:#3192F4;">' + row.start_date + '</a>';


                        return ldate;
                    }
                },
                {
                    data: 'no_days',
                    name: 'no_days',
                    "render": function(data, type, row, meta) {
                        if (row.is_hourly != 0) {
                            var nodays = parseFloat(row.no_of_hours).toFixed(2) + ' Hour(s)';
                        } else {
                            var nodays = row.no_days + '&nbsp;' + row.half_day_type + ' Day(s)';
                        }
                        return nodays;
                    }
                },
                {
                    data: 'reason',
                    name: 'reason'
                },
                {
                    data: 'leave_status',
                    name: 'leave_status',
                    "render": function(data, type, row, meta) {
                        var colorData = row.back_color;
                        var leave = `<div class="status-fd" style="color: ${colorData}"> ⦿ ` + row
                            .leave_status + `</div>`;
                        return leave;
                    }
                },
                {
                    data: 'leave_type',
                    name: 'leave_type',
                    "render": function(data, type, row, meta) {
                        if (row.isPast == 1) {
                            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;';

                        } else {
                            var edit =
                                '<a class="appDialog-model13" data-toggle="modal" data-target="#inlineForm13" data-id="' +
                                row.leave_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;';
                        }
                        edit +=
                            '<input class="leave-checkbox" type="checkbox" name="inlineRadioOptions"id="amark' +
                            row.i +
                            '" value="' + row.id + '" data-val="' + row.isPast + '"/>';

                        return edit;
                    }
                },
            ],

            "language": {
                "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                }
            },
            'columnDefs': [{
                "targets": [7],
                "orderable": false
            }],
            'rowCallback': function(row, data, index) {
                $(row).find('td:eq(6)').css('color', data.back_color);
                $(row).find('td:eq(6)').css('width', "20%");
                $(row).find('td:eq(5)').css('word-break', "break-all");
                $(row).find('td:eq(7)').css('display', "flex");
                $(row).find('td:eq(7)').css('align-items', "center");
                $(row).find('td:eq(6)').css('font-weight', 'bold');

            }


        });
    }

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