@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> Leave 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>
            <a href="{{ route('admin.employee_balance') }}" class="viewAllBtn">
                <button class="btn btn-primary">
                     Employee Balance
                </button>
            </a>
        </div>
    </div>
    <div class="layout-px-spacing layout-top-spacing">
        <div class="modal-footer">
        </div>
        <div class="row ">
            <div class="popup_modal p-3" id="popup">
            </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 leave?</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form action="/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="/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>
                            </form>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                <div class="widget-content widget-content-area p-3 br-6">
                    <div class="table-responsive">
                        <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>Leave Type</th>
                                    <th>Session</th>
                                    <th>From</th>
                                    <th>To</th>
                                    <th>No Of Days</th>
                                    <th>Verify By</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->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>{{$e_Date}}</td>
                                        <td>{{$leave_datas->days}}</td>
                                        <td>{{$leave_datas->approved_by}}</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>
                                            @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-start d-flex">
                                                @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>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal For SHOW 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>
            <form action="" class="form-group">
                <div class="modal-body mt-2">
                    <textarea class="reason p-2 form-control text-dark" 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="leave_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>
@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>
$("#cancel").on('click', function() {
    $("#approve_modal").hide();
});
$("#reject_cancel").on('click', function() {
    $("#reject_modal").hide();
});
$(".eye").on('click', function() {
    var col9 = $(this).data('id');
    $("#popup").slideToggle();
    $.ajax({
        type: "get",
        url: "{{ url('get_leave')}}",
        data: {
            "db_id": col9
        },
        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 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);
});
$(".close").click(function(){
    $(".reset_form").trigger("reset");
})
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);
    });
    $("#reject_submit").on('click', function(event) {
        if ($("#reason_txt").val().trim().length < 1) {
    $("#error_msg").text('This field is required*');
        event.preventDefault();
    }
});

    $('#startDate').datepicker({});
    $('#endDate').datepicker({});
</script>