@include('components/uheader')
@include('components/usidebar')

<!--  Begin CONTENT AREA  -->
<style>
.ui-datepicker-week-end {
  background: #ddd !important;
  pointer-events: none !important;
}
.ui-datepicker-week-end  a{
  background: #ddd !important;
  pointer-events: none !important;
}
</style>
        <div id="content" class="main-content">
            @if(isset($employee_leave_data))
                <div class="topbar_content mt-4">
                    <h2>Employee Leaves</h2>
                    <div class="viewAll mr-4">
                        <a href="/employee_dashboard" class="viewAllBtn">
                            <button class="btn btn-danger mr-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg> Back</button>
                        </a>
                        <a href="/employee_leaves" class="btn btn-primary " type="submit" name="add_employee" id="save_data">Apply Leave</a>
                        <button data-target="#leave_balance" data-toggle="modal" class="btn btn-primary " name="reset" type="button">Leave Balance</button>
                    </div>
                </div>
                <div class="layout-px-spacing layout-top-spacing justify-content-center">
                    <div class="modal-footer"> </div>
                    <div class="popup_modal" id="popup">
                    </div>
                    <div class="row">
                        <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                            <div class="widget-content widget-content-area br-6">
                                <table id="zero-config" class="table dt-table-striped dt-table-hover" style="width:100%">
                                    <thead>
                                        <tr class="text-center">
                                            <th>Sr No</th>
                                            <th>Employee ID</th>
                                            <th>Employee Name</th>
                                            <th>Leave Type</th>
                                            <th>Session</th>
                                            <th>From</th>
                                            <th>To</th>
                                            <th>No. of Days</th>
                                            <th>Reason</th>
                                            <th>Status</th>
                                            <th>Actions</th>
                                        </tr>
                                        
                                    </thead>
                                    <tbody>
                                        @php $i = 0; @endphp
                                        @foreach($employee_leave_data as $leave_datas)
                                        @php
                                            $s_Date = date("d-m-Y",strtotime($leave_datas->start_date));
                                            $d_Date = date("d-m-Y",strtotime($leave_datas->end_date));
                                        @endphp
                                        <tr class="text-center">
                                            @php $i = $i+1;@endphp
                                            @for($i=$i;$i<=count($employee_leave_data);)
                                                <td>{{$i}}  </td>
                                                @break
                                            @endfor
                                         
                                            <td>{{$leave_datas->emp_id}}</td>
                                            <td>{{$leave_datas->employee_name}}</td>
                                            <td>{{$leave_datas->leave_type}}</td>
                                            <td>{{$leave_datas->session}}</td>
                                            <td>{{$s_Date}}</td>
                                            <td>{{$d_Date}}</td>
                                            <td class="pl-5">{{$leave_datas->days}}</td>
                                            <td class="reason">{{ $leave_datas->reason }}</td>
                                            <td>
                                                @if($leave_datas->status == 'Pending')
                                                <span class="badge badge-warning">
                                                    {{$leave_datas->status}}
                                                </span>
                                                @elseif($leave_datas->status == 'Approved')
                                                <span class="badge badge-success">
                                                    {{$leave_datas->status}}
                                                </span>
                                                @else
                                                <span class="badge text-white" style="background-color: #bc1a25;">
                                                    {{$leave_datas->status}}
                                                </span>
                                                @endif
                                            </td>
                                            @if($leave_datas->status == 'Pending')
                                                <td>
                                                    <div class="leave-action text-start d-flex">
                                                        <!-- <a href="javascript:void(0);" class="eye" data-toggle="modal"
                                                            data-id="{{$leave_datas->id}}" data-target="#preview">
                                                            <img src="design/img/edit.svg" style="width:24px; height:24px;" />
                                                        </a> -->
                                                        <a href="javascript:void(0);" data-target="#accept" data-toggle="modal" class="approve ml-2" data-id="{{$leave_datas->id}}" data-value="{{$leave_datas->emp_id}}" data-day="{{$leave_datas->days}}" data-type="{{$leave_datas->leave_type}}">
                                                            <img src="design/img/approved.svg" style="width:24px; height:24px;" />
                                                        </a>
                                                        <a href="javascript:void(0);" class="reject ml-2" data-target="#reject"
                                                            data-toggle="modal" data-id="{{$leave_datas->id}}">
                                                            <img src="design/img/reject.svg" style="width:24px; height:24px;" />
                                                        </a>
                                                    </div>
                                                </td>
                                            @elseif($leave_datas->status == 'Reject')
                                                <td>
                                                    <div class="leave-action">
                                                        <a href="javascript:void(0);" class="preview_leave ml-2" data-id="{{ $leave_datas->id }}" data-e_id="{{ $leave_datas->emp_id }}" data-name="{{ $leave_datas->employee_name }}" data-s_date="{{ $s_Date }}" data-e_date="{{ $e_Date }}" data-reason="{{ $leave_datas->reason }}" data-days="{{ $leave_datas->days }}" data-leave_type="{{ $leave_datas->leave_type }}" data-session="{{ $leave_datas->session }}" data-status="{{ $leave_datas->status }}" data-reject_reason="{{ $leave_datas->reject_reason }}" data-reason="{{ $leave_datas->reason }}" data-target="#preview" data-toggle="modal">
                                                            <img src="design/img/preview.svg" style="width:24px; height:24px;" />
                                                        </a>
                                                    </div>
                                                </td>
                                            @elseif($leave_datas->status == 'Rollback')
                                                <td>
                                                    <div class="leave-action">
                                                        <a href="javascript:void(0);" class="rollback ml-2" data-target="#rollback"
                                                        data-toggle="modal" data-id="{{ $leave_datas->id }}" data-session="{{ $leave_datas->session }}" data-rollback="{{ $leave_datas->rollback }}" data-s_date="{{ $leave_datas->start_date }}" data-days="{{ $leave_datas->days }}" data-e_date="{{ $leave_datas->end_date }}" data-id="{{$leave_datas->id}}">
                                                            <img src="design/img/preview.svg" style="width:24px; height:24px;" />
                                                        </a>
                                                    </div>
                                                </td>
                                            @else
                                                <td>-</td>
                                            @endif
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="accept" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLongTitle">Do you want to approve this leave?</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <form action="/employee_accept_leave" method="post" class="form-group">
                                {{csrf_field()}}
                                <input type="hidden" class="db_id" name="db_id">
                                <input type="hidden" class="emp_id" name="emp_id">
                                <input type="hidden" class="ttl_day" name="ttl_day">
                                <input type="hidden" name="leave_type" class="leave_type">
                                <div class="modal-footer">
                                    <div class="text-end">
                                        <button class="btn btn-success" type="submit"
                                        name="add_leave">Submit</button>
                                        <button type="button" class="btn btn-primary ml-2 mr-0"
                                        data-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- MODAL FOR REJECT LEAVE -->
                <div class="modal fade" id="reject" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
                    aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <form action="/employee_reject_leave" method="post" class="form-group reset_form">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLongTitle">Reject Reason</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    {{csrf_field()}}
                                    <input type="hidden" id="hidden_dbid" name="hidden_dbid">
                                    <textarea class="form-control" id="reason_txt" style="resize: none;"
                                    placeholder="Enter reject reason" name="reject_reason" rows="5"></textarea>
                                    <p class="text-danger ml-5" id="error_msg"></p>
                                    <div class="mt-3 text-end">
                                        <input type="submit" name="wish" value="Submit" id="reject_submit"
                                        class="btn btn-success">
                                        <input type="reset" value="Reset" class="btn btn-primary ml-2 mr-0">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            @else
                <div class="topbar_content mt-4">
                    <h2>My Leaves</h2>
                    <div class="viewAll mr-4">
                        <a href="/employee_dashboard" class="viewAllBtn">
                            <button class="btn btn-danger mr-2">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg> Back</button>
                        </a>
                        <a href="/employee_leaves" class="btn btn-primary " type="submit" name="add_employee" id="save_data">Apply Leave</a>
                        <button data-target="#leave_balance" data-toggle="modal" class="btn btn-primary " name="reset" type="button">Leave Balance</button>
                    </div>
                </div>
                <div class="layout-px-spacing layout-top-spacing justify-content-center">
                    <div class="modal-footer"> </div>
                    <div class="popup_modal" id="popup">
                    </div>
                    <div class="row">
                        <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                            <div class="widget-content widget-content-area br-6">
                                <table id="zero-config" class="table dt-table-striped dt-table-hover" style="width:100%">
                                    <thead>
                                        <tr class="text-center">
                                            <th>Sr No</th>
                                            <th>Leave Type</th>
                                            <th>Session</th>
                                            <th>From</th>
                                            <th>To</th>
                                            <th>No. of Days</th>
                                            <th>Reason</th>
                                            <th>Status</th>
                                            <th>Actions</th>
                                        </tr>
                                        
                                    </thead>
                                    <tbody>
                                        @php $i = 0; @endphp
                                        @foreach($leave_data as $leave_datas)
                                            @php
                                                $s_Date = date("d-m-Y",strtotime($leave_datas->start_date));
                                                $e_Date = date("d-m-Y",strtotime($leave_datas->end_date));

                                            @endphp
                                            <tr class="text-center">
                                                @php $i = $i+1;@endphp
                                                @for($i=$i;$i<=count($leave_data);)
                                                    <td>{{$i}}  </td>
                                                    @break
                                                @endfor
                                                <td>{{$leave_datas->leave_type}}</td>
                                                <td>{{$leave_datas->session}}</td>
                                                <td>{{$s_Date}}</td>
                                                <td>{{$e_Date}}</td>
                                                <td class="pl-5">{{$leave_datas->days}}</td>
                                                <td class="reason">{{ $leave_datas->reason }}</td>
                                                <td>
                                                    @if($leave_datas->status == 'Pending')
                                                    <span class="badge badge-warning">
                                                        {{$leave_datas->status}}
                                                    </span>
                                                    @elseif($leave_datas->status == 'Approved')
                                                    <span class="badge badge-success">
                                                        {{$leave_datas->status}}
                                                    </span>
                                                    @else
                                                    <span class="badge text-white" style="background-color: #bc1a25;">
                                                        {{$leave_datas->status}}
                                                    </span>
                                                    @endif
                                                </td>
                                                @if($leave_datas->status == 'Pending')
                                                    <td>
                                                        <div class="leave-action">
                                                            <a data-toggle="modal" data-target="#popup"  href="javascript:void(0);" class="edit grey-color"  
                                                                data-bs-toggle="tooltip" data-bs-placement="top" title=""
                                                                data-bs-original-title="Edit" data-id="{{$leave_datas->id}}">
                                                                <img src="{{asset('design/img/edit.svg')}}" />
                                                            </a>
                                                            
                                                            <a href="javascript:void(0);" class="delete ml-3 grey-color"
                                                                data-target="#delete" data-toggle="modal" data-id="{{$leave_datas->id}}">
                                                                <img src="{{asset('design/img/delete.svg')}}" />

                                                            </a>
                                                        </div>
                                                    </td>
                                                @else
                                                    <td>
                                                        <div class="leave-action">
                                                            <a href="javascript:void(0);" class="preview_leave ml-2" data-id="{{ $leave_datas->id }}" data-e_id="{{ $leave_datas->emp_id }}" data-name="{{ $leave_datas->employee_name }}" data-rollback="{{ $leave_datas->rollback }}" data-s_date="{{ $s_Date }}" data-e_date="{{ $e_Date }}" data-reason="{{ $leave_datas->reason }}" data-days="{{ $leave_datas->days }}" data-leave_type="{{ $leave_datas->leave_type }}" data-session="{{ $leave_datas->session }}" data-status="{{ $leave_datas->status }}" data-reject_reason="{{ $leave_datas->reject_reason }}" data-reason="{{ $leave_datas->reason }}" data-target="#preview" data-toggle="modal">
                                                                <img src="design/img/preview.svg" style="width:24px; height:24px;" />
                                                            </a>
                                                        </div>
                                                    </td>
                                                @endif
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="leave_balance" tabindex="5" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLongTitle">Leave Balance</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <table class="table table-striped">
                                    <thead class="table-primary">
                                        <tr>
                                            <td class="text-center">Leave Type</td>
                                            <td class="text-center">Remaining Leave</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($leave_balance as $leave_count)
                                        <tr>
                                            <td class="text-center">{{$leave_count->leave_type}}</td>
                                            <td class="text-center">{{$leave_count->leave_balance}} </td>
                                        </tr>
                                        @endforeach
                                   </tbody>
                                </table>
                            </div>
                            <div class="row justify-content-around ">
                                <button class="btn col-3 mb-4 btn-primary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
             <!-- Modal For Reject Reason -->
            <div class="modal fade" id="reject_reason" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLongTitle">Reject Reason</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        {{csrf_field()}}
                        <div class="modal-body mt-1">
                            <textarea class="form-control reason p-2 text-dark" cols="50" rows="4" style="resize: none;" readonly></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade bd-example-modal-lg" id="preview" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLongTitle">Preview Leave</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form action="" class="form-group">
                            <div class="modal-body mt-2">
                                <div class="row">
                                    <div class="col-6 p-3">
                                        <b>Employee Id : </b>
                                        <span class="preview_e_id"></span>
                                    </div>
                                    <div class="col-6 p-3">
                                        <b>Employee Name : </b>
                                        <span class="preview_e_name"> </span>
                                    </div>
                                    <div class="col-6 p-3">
                                        <b>Start Date : </b>
                                        <span class="preview_s_date"></span>
                          
                                    </div>
                                    <div class="col-6 p-3">
                                        <b>End Date : </b>
                                        <span class="preview_e_date"></span>
                                    </div>
                                    <div class="col-6 p-3">
                                        <b>Session : </b>
                                        <span class="preview_session"></span>
                                    </div>
                                    <div class="col-6 p-3">
                                        <b>Session : </b>
                                        <span class="preview_type"></span>
                                    </div>

                                    <div class="col-6 p-3">
                                        <b>Days : </b>
                                        <span class="preview_days"></span>
                                    </div>
                                    <div class="col-6 p-3">
                                        <b>Status : </b>
                                        <span class="preview_status"></span>
                                    </div>
                                    <div class="col-12">
                                        <b>Reason : </b>
                                        <textarea class="preview_reason p-2 form-control text-dark" cols="50" rows="4" style="resize: none;" readonly></textarea>                
                                    </div>
                                </div>
                                <div class="row rollback-field-data"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- MODAL FOR DELETE LEAVE -->
            <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLongTitle">Are you sure you want to delete this leave?</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form action="/emp_delete_leave" method="post" class="form-group">
                            {{csrf_field()}}
                            <input type="hidden" class="db_id" name="db_id">
                            <div class="modal-foote"> 
                                <div class="row justify-content-end mr-3 mt-4">
                                    <button class="btn btn-success col-3 mr-3" type="submit" name="add_leave">Delete</button>
                                    <button type="button" class="btn btn-primary col-3" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        @if(session('done'))
            <script type="text/javascript">
                swal.fire({
                title: '@php echo session("done")@endphp',
                type: 'success',
                padding: '2em'
                })
            </script> 
        @elseif(session('edit'))
            <script type="text/javascript">
                swal.fire({
                title: '@php echo session("edit")@endphp',
                type: 'success',
                padding: '2em'
                })
            </script>
        @elseif(session('message'))
            <script type="text/javascript">
                swal.fire({
                title: '@php echo session("message")@endphp',
                type: 'success',
                padding: '2em'
                })
            </script>
        @elseif(session('error'))
            <script type="text/javascript">
                swal.fire({
                title: '@php echo session("error")@endphp',
                type: 'warning',
                padding: '2em'
            })
            </script>
        @elseif(session('delete'))
            <script type="text/javascript">
                swal.fire({
                title: '@php echo session("delete")@endphp',
                type: 'success',
                padding: '2em'
            })
            </script>
        @endif
    @include('components/ufooter')
    <script>
    $('#update_cancel').on('click',function(){
        $("#edit_popup").hide();
    });
    $('#delete_btn').on('click',function(){
        $("#delete_modal").hide();
    });
    $(".delete").on('click',function(){
        var col1=$(this).data('id');
        $(".db_id").val(col1);
    });

    $(".edit").on('click',function(){
        var col11=$(this).data('id');
        $(".db_id").val(col11);
        $("#popup").slideToggle();
         $.ajax({
                type : "get",
                url  : "{{ url('get_leave')}}",
                data : {"db_id":col11},
                success : function(html){
                $("#popup").html(html);
            }
        });
    });

    $('.preview_leave').on('click',function() {

        var type = $(this).data('leave_type');
        var session = $(this).data('session');
        var days = $(this).data('days');
        var reject_reason = $(this).data('reject_reason');
        var s_date = $(this).data('s_date');
        var e_date = $(this).data('e_date');
        var reason = $(this).data('reason');
        var status = $(this).data('status');
        var e_id = $(this).data('e_id');
        var e_name = $(this).data('e_name');
        var rollback = $(this).data('rollback');

        $('.preview_s_date').text(s_date);
        $('.preview_e_date').text(e_date);
        $('.preview_days').text(days);
        $('.preview_session').text(session);
        $('.preview_reject_reason').val(reject_reason);
        $('.preview_status').text(status);
        $('.preview_reason').val(reason);
        $('.preview_type').text(type);
        $('.preview_e_id').text(e_id);
        $('.preview_e_name').text(e_name);

        if(rollback != null) {
            // $('.rollback-field-data')
        }
    })

    $(".approve").on('click', function() {
        var currentRow = $(this).closest("tr");
        var col1 = $(this).data('value');
        var col7 = $(this).data('day');
        var col9 = $(this).data('id');
        var col3 = $(this).data('type');
        $(".emp_id").val(col1);
        $(".ttl_day").val(col7);
        $(".db_id").val(col9);
        $(".leave_type").val(col3);
    });
    $(".reject").on('click', function() {
    // get the current row
        var col1 = $(this).data('id');
        $("#hidden_dbid").val(col1);
    });

    $("#cancel").on('click', function() {
        $("#approve_modal").hide();
    });
    $("#reject_cancel").on('click', function() {
        $("#reject_modal").hide();
    });

    function getDays(){
        let date1 = $('#e_date').val();
        let date2 = $('#s_date').val();
        var dt1 = new Date(date1)
        var dt2 = new Date(date2)
        var time = dt1.getTime() - dt2.getTime();
        var day = time / (1000 * 3600 * 24);
        
        if(day>=0){
          $("#ttl_day").val(day + 1);
        }else{        
            $("#ttl_day").val(0);
        }
    }
    $('#myModal').on('shown.bs.modal', function () {
        $('#myInput').trigger('focus');
    });


    $(".eye_btn").on('click',function(){
        var id = $(this).data('value');
        $(".reason").text(id);
    });


    $("#hide_popup").on('click',function(){
        $('.sidebar-wrapper').css("filter","blur(0px)");
        $('.layout-px-spacing').css("filter","blur(0px)");
        $('.viewAll').css("filter","blur(0px)");
        $('#approve_modal').hide();
    });

   
</script>