@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_wfh_data))
        <div class="topbar_content mt-3">
            <h2>WFH List</h2>
            <div class="viewAll mr-4">
                <a href="/admin_dashboard" class="viewAllBtn">
                    <button class="btn btn-danger">
                        <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>
            </div>
        </div>
        <div class="layout-px-spacing admin-work-from-home">
            <div class="row layout-top-spacing justify-content-center">
                <div class="popup_modal" id="popup">
                </div>
                <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
                    <div class="modal-footer"></div>
                    <div class="widget-content widget-content-area br-6 p-3">
                        <div class="table-responsive">
                            @if(count($employee_wfh_data)>0)
                            <table id="zero-config" class="table dt-table-hover table-striped" style="width:100%">
                                <thead>
                                    <tr class="text-center">
                                        <th>Sr No</th>
                                        <th>Employee Id</th>
                                        <th>Employee Name</th>
                                        <th>WFH Type</th>
                                        <th>Session</th>
                                        <th>From</th>
                                        <th>To</th>
                                        <th>No OF Days</th>
                                        <th>Deduction Days</th>
                                        <th>Reason</th>
                                        <th>Status</th>
                                        <th class="no-content ml-5">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $i = 0; @endphp
                                    @foreach($employee_wfh_data as $key => $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
                                        <td> {{++$key}} </td>
                                        <td>{{$leave_datas->emp_id}}</td>
                                        <td>{{$leave_datas->employee_name}}</td>
                                        <td>{{$leave_datas->wfh_type ? $leave_datas->wfh_type : '-'}}</td>
                                        <td>{{$leave_datas->session}}</td>
                                        <td>{{$s_Date}}</td>
                                        <td>{{$d_Date}}</td>
                                        <td>{{$leave_datas->days}}</td>
                                        @if($leave_datas->deduction == '')
                                            <td>-</td>

                                        @else
                                        <td>{{$leave_datas->deduction}}</td>
                                        @endif
                                        <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-center">
                                               <!--  <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}}">
                                                    <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);" data-target="#reject_reason"
                                                    data-value="{{$leave_datas->reject_reason}}" class="eye_btn"
                                                    data-toggle="modal" data-bs-placement="top">
                                                <img src="design/img/preview.svg" style="width:24px; height:24px;" />

                                            </a>
                                        </div>
                                    </td>
                                    @else
                                    <td>-</td>
                                    @endif
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        @else
                        <p class="text-center">No record found</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- MODAL FOR ACCEPT LEAVE -->
        <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 WFH?</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form action="/employee_accept_workfromhome" 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">
                        <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">Submit</button>
                                <button type="button" class="btn btn-primary col-3" 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">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Reject Reason</h5>
                        <button type="button" class="close" id="model-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form action="/employee_reject_workfromhome" method="post" class="form-group">
                            {{csrf_field()}}
                            <input type="hidden" id="hidden_dbid" name="hidden_dbid">
                            <textarea class="form-control" style="resize: none;"
                            placeholder="Enter reject reason" name="reject_reason" rows="5" id="reason_txt"></textarea>
                            <p class="text-danger ml-5" id="error_txt"></p>
                            <div>
                                <div class="text-end">
                                    <input type="submit" name="wish" value="Submit" id="submit_reason"
                                    class="btn btn-success">
                                    <input type="reset" value="Reset" class="btn btn-primary ml-2 mr-0">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="layout-px-spacing">
            <div class="row layout-top-spacing justify-content-center">
                <div class="popup_modal" id="popup">
                </div>
                <div class="align-items-center d-flex flex-wrap justify-content-center justify-content-md-between">
                    <h2 class="mr-4"> WFH List</h2>
                    <div class="mt-md-0 mt-2 viewAll">
                        <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="/workfromhome" class="btn pmd-ripple-effect btn-primary pmd-btn-raised mr-2" type="submit" name="add_employee" id="save_data">Apply WFH</a>
                        <button data-target="#leave_balance" data-toggle="modal" class="btn pmd-ripple-effect btn-primary" name="reset" type="button">WFH Balance</button>
                    </div>
                </div>
            </div>
            <div class="row layout-top-spacing">
                <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
                    <div class="modal-footer"></div>
                    <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>Type</th>
                                    <th>Session</th>
                                    <th>From</th>
                                    <th>To</th>
                                    <th>No. of Days</th>
                                    <th>Deduction Days</th>
                                    <th>Reason</th>
                                    <th>Status</th>
                                    <th class="no-content">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->wfh_type}}</td>
                                    <td>{{$leave_datas->session}}</td>
                                    <td>{{$s_date}}</td>
                                    <td>{{$e_date}}</td>
                                    <td class="pl-5">{{$leave_datas->days}}</td>
                                    <td>{{$leave_datas->deduction}}</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 href="javascript:void(0);" class="edit ml-3 grey-color update_cancel"
                                                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>
                                    @elseif($leave_datas->status == 'Reject')
                                    <td>
                                        <div class="leave-action">
                                            <a href="javascript:void(0);" data-target="#reject_reason"
                                                data-value="{{$leave_datas->reject_reason}}" class="eye_btn grey-color"
                                                data-toggle="modal" data-bs-placement="top">
                                                <img src="{{asset('design/img/preview.svg')}}" />
                                            </a>
                                        </div>
                                    </td>
                                    @else
                                    <td>-</td>
                                    @endif
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- MODAL FOR WFH BALANCE -->
        <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">WFH 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="mb-0 table table-bordered">
                            <thead class="table-primary">
                                <tr>
                                    <td>Work Type</td>
                                    <td>WFH balance</td>
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($leave_balance->leave_type))
                                <tr>
                                    <td>{{$leave_balance->leave_type}}</td>
                                    <td>{{$leave_balance->leave_balance}}</td>
                                </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <div class="modal-footer justify-content-center">
                        <button class="btn col-3 btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </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">Do You Want To Delete This WFH?</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form action="/delete_workfromhome" 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>        
    @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>
                    <div class="modal-body ml-3 mt-1">
                        <form class="form-group">
                            <textarea class="reason form-control p-2 text-dark" cols="50" rows="4" style="resize: none;"
                            readonly></textarea>
                        </form>
                    </div>
                </div>
            </div>
        </div>
@include('components/ufooter')

@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>
@endif
<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'); // get current row 1st TD value
    $(".db_id").val(col1);
});
$(".edit").on('click', function() {
    var col10 = $(this).data('id');
    $("#popup").slideToggle();
    $.ajax({
        type: "get",
        url: "{{ url('get_WFH')}}",
        data: {
            db_id: col10
        },
        success: function(html) {
            $("#popup").html(html);
        }
    });
});
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();
});


$(".approve").on('click', function() {
    var col1 = $(this).data('value');
    var col9 = $(this).data('id');
    $(".emp_id").val(col1);
    $(".db_id").val(col9);
});
$(".reject").on('click', function() {
    var col1 = $(this).data('id');
    $("#hidden_dbid").val(col1);
});
</script>