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

<div id="content" class="main-content">
    @if(isset($employee_timesheet_data))
        <div class="topbar_content mt-4">
            <h2>Employee Timesheet</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>
            </div>
        </div>
        <div class="layout-px-spacing layout-top-spacing justify-content-center">
            <div class="modal-footer"> </div>
            <div class="row">
                <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
                    <div class="card">
                        <div class="card-body search-filter p-3">
                            <form action="{{route('employee_timesheet_filter')}}" method="post" class="form-group">
                                {{csrf_field()}}
                                <div class="row emp-filter-area justify-content-end">
                                    <div class="col-2 form-group date-col">
                                        <select class="form-control basic" name="employee_id">
                                            <option>Select Employee</option>
                                            @foreach($employee as $e)
                                                <option value="{{ $e->id }}">{{ $e->first_name }} {{ $e->last_name }}</option>
                                            @endforeach
                                            
                                        </select>
                                    </div>
                                    <div class="col-2 form-group date-col">
                                        <select class="form-control basic" name="project_id">
                                            <option>Select Project</option>
                                            @foreach($project as $p)
                                                <option value="{{ $p->project_id }}">{{ $p->project_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-2 form-group date-col">
                                        <input type="text" name="start_date" placeholder="Select Start Date" class="form-control" id="start_date">
                                    </div>
                                    <div class="col-2 form-group date-col">
                                        <input type="text" name="end_date" placeholder="Select End Date" id="end_date" class="form-control">
                                    </div>
                                    <div class="col-2">
                                        <div class="row">
                                            <div class="col-xl-9">
                                                <div class="form-group p-0"> 
                                                    <button class="btn btn-primary btn-block searchBtn" type="submit">Search</button>
                                                </div>
                                            </div>
                                            <div class="col-xl-3 listfilter d-flex justify-content-center">
                                                <div class="clear-filter-icon form-group mb-0">
                                                    <a href="{{route('prc_list')}}"><img src="{{asset('design/img/clearfiltericon.svg')}}"></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </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>Employee ID</th>
                                    <th>Date</th>
                                    <th>Project ID</th>
                                    <th>Task Name</th>
                                    <th>Hours</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $i = 0; @endphp
                                @foreach($employee_timesheet_data as $key => $timesheet_data)
                                    <tr class="text-center">
                                        <td>{{++$key}}</td>
                                        <td>{{$timesheet_data->emp_id}}</td>
                                        <td>{{$timesheet_data->date}}</td>
                                        <td>{{$timesheet_data->project_id}}</td>
                                        <td>{{$timesheet_data->task->task_name}}</td>
                                        <td>{{$timesheet_data->time}}</td>
                                        @if($timesheet_data->status == 'Pending')
                                            <td>
                                                <div class="leave-action text-start d-flex">
                                                    <a href="javascript:void(0);" data-target="#accept" data-toggle="modal" class="approve ml-2" data-id="{{$timesheet_data->id}}" data-value="{{$timesheet_data->emp_id}}" data-day="{{$timesheet_data->days}}" data-type="{{$timesheet_data->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="{{$timesheet_data->id}}">
                                                        <img src="design/img/reject.svg" style="width:24px; height:24px;" />
                                                    </a>
                                                </div>
                                            </td>
                                        @elseif($timesheet_data->status == 'Reject')
                                            <td>
                                                <div class="leave-action">
                                                    <a href="javascript:void(0);" data-target="#reject_reason"
                                                        data-value="{{$timesheet_data->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>
                    </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 Timesheet?</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>
    @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>

    <!-- 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>
    $("#start_date").datepicker();
    $("#end_date").datepicker();

    $('#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);
            }
        });
    });

    $(".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>