@include('components/header')
@include('components/sidebar')
<!--  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">
    <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($leave_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>Verify By</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($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->emp_id}}</td>
                                <td>{{$leave_datas->employee_name}}</td>
                                <td>{{$leave_datas->wfh_type}}</td>
                                <td>{{$leave_datas->session}}</td>
                                <td>{{$s_Date}}</td>
                                <td>{{$e_Date}}</td>
                                <td>{{$leave_datas->days}}</td>
                                <td>{{$leave_datas->approved_by}}</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>
                                    @elseif($leave_datas->status == 'Rollback')
                                    <span class="badge badge-primary text-white">
                                        {{$leave_datas->status}}
                                    </span>
                                    @else
                                    <span class="badge text-white" style="background-color: #bc1a25;">
                                        {{$leave_datas->status}}
                                    </span>
                                    @endif
                                </td>
                                <td>
                                    <div class="leave-action text-center">
                                        @if($leave_datas->status == 'Pending')
                                            <a href="javascript:void(0);" class="eye" data-toggle="modal"
                                                data-id="{{$leave_datas->id}}" data-target="#preview">
                                                <img src="{{ asset('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="{{ asset('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="{{ asset('design/img/reject.svg') }}" style="width:24px; height:24px;" />
                                            </a>
                                        @elseif($leave_datas->status == 'Approved')
                                            <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-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="{{ asset('design/img/rollback.svg') }}" style="width:24px; height:24px;" />
                                            </a>
                                        @endif
                                        <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-rollback="{{ $leave_datas->rollback }}" data-target="#preview"
                                            data-toggle="modal" >
                                            <img src="{{ asset('design/img/preview.svg') }}" style="width:24px; height:24px;" />
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                @else
                <p class="text-center">No record found</p>
                @endif
            </div>
        </div>
    </div>
</div>
</div>
<!-- MODAL FOR REJECT REEASON -->
<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>
            <form action="" class="form-group">
                <div class="modal-body mt-2">
                    <textarea class="reason p-2 text-dark form-control" cols="50" rows="4" style="resize: none;"
                    readonly></textarea>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade bd-example-modal-lg" id="rollback" 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">Roll Back Leave</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('admin.leave_rollback') }}" method="post" class="form-group">
                @csrf
                <input type="hidden" name="type" value="wfh_rollback">
                <div class="modal-body mt-2">
                    <div class="row">
                        <input type="hidden" name="id" class="rollback_id">
                        <div class="col-6 p-3">
                            <b>Start Date : </b>
                            <span class="rollback_s_date"></span>
                        </div>
                        <div class="col-6 p-3">
                            <b>End Date : </b>
                            <span class="rollback_e_date"></span>
                        </div>
                        <div class="col-6 p-3">
                            <b>Session : </b>
                            <span class="rollback_session"></span>
                        </div>
                        <div class="col-6 p-3">
                            <b>Days </b>
                            <span class="rollback_days"></span>                        
                        </div>
                    </div>
                    <div style="max-height: 250px; overflow: auto;" >
                        <table id="dateSessionTable" class="table table-striped">
                            <thead>
                                <th>Date</th>
                                <th>Session</th>
                                <th>Action</th>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Submit</button>
                    <button type="button" class="btn btn-primary">Cancel</button>
                </div>
            </form>
        </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 form-field-data"></div>
                </div>
            </form>
        </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="/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="/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>
@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('delete'))
    <script type="text/javascript">
    swal.fire({
        title: '@php echo session("delete")@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
@include('components/footer')
<script>
$(".eye").on('click', function() {
    var col8 = $(this).data('id'); // get current row 1st TD value
    $("#db_id").val(col8);
    $("#popup").slideToggle();
    $.ajax({
        type: "get",
        url: "{{ url('get_WFH')}}",
        data: {
        db_id: col8
        },
        success: function(html) {
            $("#popup").html(html);
        }
    });
});

$('.rollback').on('click',function() {
    var s_date = $(this).data('s_date');
    var e_date = $(this).data('e_date');
    var session = $(this).data('session');
    var days = $(this).data('days');
    var id = $(this).data('id');

    $('.rollback_s_date').text(s_date);
    $('.rollback_e_date').text(e_date);
    $('.rollback_days').text(days);
    $('.rollback_session').text(session);
    $('.rollback_id').val(id);

    // Parse date strings into Date objects
    const startDate = new Date(s_date);
    const endDate = new Date(e_date);

    const tableBody = $('#dateSessionTable tbody');
    tableBody.html(' ');
    const sessionOptions = ["Full Day", "First Half", "Second Half"];

    let currentDate = new Date(startDate);
    while (currentDate <= endDate) {
        const dateString = currentDate.toISOString().split('T')[0];

        const row = $("<tr>");
        row.html(`
            <td>${dateString}</td>
            <td><select class="form-control" name="session[${dateString}]">${sessionOptions.map(option => `<option ${option === session ? "selected" : ""} value="${option}">${option}</option>`).join("")}</select></td>
            <td><input type="checkbox" name="checkbox[${dateString}]"></td>
        `);
        tableBody.append(row);

        currentDate.setDate(currentDate.getDate() + 1);
    }
});

$('.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');
    console.log(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) {
    }
})


$(".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);
});
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);
    }
}
$(".eye_btn").on('click', function() {
    var id = $(this).data('value');
    $(".reason").text(id);
});
$("#submit_reason").on('click', function(event) {
    if ($("#reason_txt").val() == '') {
    event.preventDefault();
    $("#error_txt").text('This field is required*');
    }
});
$("#model-close").on('click',function() {
    $("#error_txt").text('');
})
</script>