@extends('layouts.app2') 
@section('dynamic_css')
<link href="{!! asset('/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css') !!}" rel="stylesheet" />
<link href="{!! asset('/css/fullcalendar.min.css') !!}" rel="stylesheet" />
<link href="{!! asset('/css/fullcalendar.print.min.css') !!}" rel="stylesheet" media="print" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />
<style>
    body {
        font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
        font-size: 14px;
        background-color: #fff;
    }

    #calendar {
        max-width: 1050px;
        margin: 0 auto;
        background-color: white;
        width: 100%;
    }

    .h2,
    h2 {
        font-size: 1.5rem !important;
    }

    #calendar table .fc-head {
        background-color: #2bbbad!important;
        color: white;
    }

    .fc-day-header {
        height: 43px;
        font-size: 18px;
        padding-top: 16px !important;
    }

    .color_indegator {
        margin-left: 10px;
        margin-top: 2px;
        font-weight: 700;
    }

    .fc-scroller {
        height: auto !important;
        /* max-height: 350px !important; */
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }


    #agenda_d {
        /*   height: 300px;*/
        border: 1px solid #d4c8c8;
        /* padding: 39px; */
        /* padding-top: 10px;*/
        /*background-color: #17a2b8;*/
    }

    .row_pading {
        padding-right: 0px;
        padding-left: 0px;
    }

    .row_margin {
        margin-right: 0px;
        margin-left: 0px;
    }

    .card_header {
        padding: 0rem 0rem;
    }


    .dtp-btn-ok {
        background-color: #007bff;
        opacity: .7;
    }

    .dtp-btn-cancel {
        background-color: #dc3545;
        opacity: .7;
    }

    .dtp-btn-clear {
        background-color: #ffc107;
        opacity: .7;
    }




    /* fallback */

    @font-face {
        font-family: 'Material Icons';
        font-style: normal;
        font-weight: 400;
        src: url(https://fonts.gstatic.com/s/materialicons/v38/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
    }

    .material-icons {
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
    }



    .docs-tab-content {
        position: relative;
        border: 1px solid rgba(0, 0, 0, .15);
        padding: 0;
    }

    .docs-tabs .nav-link {
        border-width: 1px 1px 0 1px;
        border-color: rgba(0, 0, 0, .15);
        border-style: solid;
        border-radius: 5px 5px 0 0;
        margin-right: 8px;
        margin-bottom: -1px;
        color: #212529;
    }


    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 26px;
    }

    .switch input {display:none;}

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

    input:checked + .slider {
        background-color: #2196F3;
    }

    input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }


    .df{
        display: flex;
    }

    .slider_label{
        font-size: 18px;
        margin-left: 5px;
        margin-right: 5px;
    }    


    .border_bottom{
        border-bottom: 1px solid #e7e1e1;
        border-left: 3px solid #28a745;;
    }
    .border_left_red{
        border-left: 3px solid red;
    }   

    .show{
        border-bottom: 1px solid #e7e1e1;
    }

    .over_flow{
        overflow: hidden;
        text-align: left;
        text-decoration: none;
    }




</style>
@endsection 
@section('badcome')
<!--  <div class="badecome_div mb10">
    <div class="pb10 pt10">
         <a href="{{ url('home') }}" class="badge badge-theam p7">Home </a> <span class="badcome_line"> | </span> <a href="{{ route('meetingmanagement')}}" class="badge badge-theam p7"> Dashboard </a>
      </div>
    </div>-->
@endsection 
@section('content')
<div class="container">
    <div class="row">
        @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif
    </div>
    <div class="row justify-content-center">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered" id="leave_list_table">
                <thead>
                    <tr>
                        <th>SL No.</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)
                    @php
                    $fdate = $value['start_date'];
                    $tdate = $value['end_date'];
                    $datetime1 = new DateTime($fdate);
                    $datetime2 = new DateTime($tdate);
                    $interval = $datetime1->diff($datetime2);
                    $days = $interval->format('%a')

                    @endphp

                    <tr>
                        <td>{{$i++}}</td>
                        <td class="employee-code-data">{{$value['employee_code']}}</td>
                        <td>{{$value['name']}}</td>
                        <td>{{$value['designation_name']}}</td>
                        <td>{{$value['district_name']}}</td><td>{{$value['block_name']}} </td><td>{{$value['gram_panchyat_name']}}</td>
                        <td><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>
<!-- 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">
                <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('plugins/bootstrap-select/js/bootstrap-select.js') }}"></script>
<script src="{{ asset('js/lib/moment.min.js') }}"></script>
<script src="{{ asset('plugins/bootstrap-material-datetimepicker/js/bootstrap-material-datetimepicker.js') }}"></script>
<script src="{{ asset('js/lib/fullcalendar.min.js') }}"></script>
<script src="{{ asset('js/custom/calender_minutes.js') }}"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.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("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();
});

</script>

@endsection