@extends('layouts.app2') 
@section('dynamic_css_excpt')
<link href="{!! asset('css/dataTables.bootstrap4.min.css') !!}" media="all" rel="stylesheet" type="text/css"/>
@endsection
@section('dynamic_css')
<style>
.table td {
    padding: .5rem 1rem .5rem 1rem;
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
}
</style>
@endsection 

@section('content')
<div class="container">
    <div class="row justify-content-center container_layout">
        @if ($errors->any())
        <div class="col-md-12 alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        <div class="col-md-12 pl10 pr10">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ route('adminhome')}}">
                            <i class="material-icons">home</i>
                        </a>
                    </li>
                    <li class="breadcrumb-item active"><a href="{{url('/approve_leave')}}">Applied leaves</a></li>
                </ol>
            </nav>
        </div>
        <!--<div class="col-md-12">-->
          <div class="col-md-12 bg-white pt10 pb20">
             <div id="no-more-tables">
                <table class="table table-responsive table-striped table-bordered table-condensed cf" id="leave_list_table">
                <thead class="cf">
                    <tr>
                        <th>#</th>
                        <th>Employee Code</th>
                        <th>Employee Name</th>
                        <th>Designation</th>
                        <th>District</th>
                        <th>Block</th>
                        <th>Gram Panchayat</th>
                        <th>Leave Details</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                    $i = 1;
                    @endphp
                    @foreach($applies as $value)
                    <tr>
                        <td data-title="Sl No">{{$i++}}</td>
                        <td data-title="Employee Code" class="employee-code-data">{{$value['employee_code']}}</td>
                        <td data-title="Employee Name">{{$value['name']}}</td>
                        <td data-title="Designation">{{$value['designation_name']}}</td>
                        <td data-title="District">{{$value['district_name']}}</td>
                        <td data-title="Block">{{$value['block_name']}} </td>
                        <td data-title="Gram Panchayat">{{$value['gram_panchyat_name']}}</td>
                        <td data-title="Leave Details"><a href="{{route('applied_leave_list',$value['employee_code'])}}" class="employee-leave-link"><i class="fa fa-clipboard" style="color: #0056b3;font-size: 1.5em; margin-left: 1.5em;"></i></a></td>
                    </tr>
                    @endforeach
                    
                </tbody>
            </table>
             </div>
          </div>
        <!--</div>-->
    </div>
</div>
<!-- Leave History Modal -->
<div class="modal fade" id="myLeaveHistoryModal" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Leave Approval</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>

            </div>
            <div class="modal-body bg-white">
                <form method="post" action="{{url('/approve_leave')}}" class="form-horizontal" id="leave-approval-form">
                    @csrf
                    <table class="table table-responsive table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>SL No.</th>
                                <th>Leave Type</th>
                                <th>Leave Start Date</th>
                                <th>Leave End Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="leave-table-body">

                        </tbody>
                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection 
@section('dynamic_js')
<script src="{{ asset('js/lib/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/lib/dataTables.bootstrap4.min.js') }}"></script>
<script>
$(document).on('click', '.reject', function () {
    $('#leave_action').val("2");
});
$(document).on('click', '.approve', function () {
    $('#leave_action').val("1");
});
$(document).on('click', '.employee-leave-link', function () {
    var employee_code = $(this).closest("tr")   // Finds the closest row <tr> 
            .find(".employee-code-data")     // Gets a descendent with class="nr"
            .text();
    $.get("{{url('leave_details')}}", {
        employee: employee_code
    }, function (j) {
        var tr = "";
        for (var i = 1; i < j.length; i++) {
            tr += "<tr><td>" + i + "</td><td>" + j[i].leave_type + "</td><td>" + j[i].start_date + "</td><td>" + j[i].end_date + "<input type='hidden' name='leave_apply[]' value='" + j[i].leave_apply_id + "' required='required'></td><td><a href=''><i class='fa fa-download'></i></a>&emsp;<a href=''>Leave History</a></td></tr><tr><td colspan='6'></td></tr><tr><td colspan='2'><button type='button' class='btn btn-primary btn-sm btn-approve' >APPROVE</button></td><td colspan='2'><button type='button' class='btn btn-danger btn-sm btn-reject'>REJECT</button></td><td colspan='2'><button type='button' class='btn btn-info btn-sm btn-return'>RETURN</button></td></tr>";
        }
        $('#leave-table-body').html(tr);

    });
});
$(document).on('click', '#btn-approve', function () {
    process_leave();

});
function process_leave() {
    swal({
        title: "Are sure to perform the leave operations?",
        text: "",
        icon: "warning",
        buttons: true,
        dangerMode: true,
    })
            .then((willApprove) => {
                if (willApprove) {
                    $('#leave-approval-form').attr("href", "{{url('/approve_leave')}}");
                    $('#leave-approval-form').submit();
                } else {
                    swal("You have not performed the leave approval task!");
                }
            });
}

$(document).ready(function () {
    $('#leave_list_table').DataTable({
            paging: true,
            pagingType: "full_numbers",
            pageLength: 5,
            stateSave: true,
            lengthMenu: [[5 ,10, 25, 50, -1], [5 ,10, 25, 50, "All"]],
    });
});

</script>

@endsection