@include('components/header')
@include('components/sidebar')
<!--  Begin CONTENT AREA  -->
<div id="content" class="main-content">
    <style>
    @media(max-width:40em) {
    .custom-row .form-group {
    flex: 0 0 100% !important;
    }
    }
    .custom-row {
    flex-wrap: wrap;
    }
    .custom-row .form-group {
    flex: 0 0 50%;
    padding: 0px 15px;
    }
    .form-control.custom-select {
    width: 100% !important;
    }
    @media(min-width:992px) {
    .custom-row {
    flex-wrap: wrap;
    justify-content: space-between;
    }
    .custom-row .form-group {
    flex: unset;
    padding: 0px;
    }
    .form-control.custom-select {
    width: 175px !important;
    }
    }
    </style>
    <div>
        <div class="topbar_content mt-3">
            <h2>Job sheet 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 layout-top-spacing">
    <div class="modal-footer"></div>
    <!-- <div class="mb-3"> <h3 style="position: relative;">| Job sheet list</h3> </div> -->
    <div class="">
        <div class="widget-content widget-content-area br-6">
            <div class="table-responsive">
                <table id="zero-config" class="table table-striped table-responsive dt-table-hover">
                    <thead>
                        <tr class="text-center">
                            <th>Sr No</th>
                            <th>Employee ID</th>
                            <th>Employee Name</th>
                            <th>Department Name</th>
                            <th>Domain Name</th>
                            <th>Date</th>
                            <th>Start time</th>
                            <th>End time</th>
                            <th>Total time</th>
                            <th>Work type</th>
                            <th>Project name</th>
                            <th>Task name</th>
                            <th>Task description</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php $i = 0; @endphp
                        @foreach($jobSheet_data as $data)
                        <tr class="text-center">
                            @php
                            $date = date('d-m-Y',strtotime($data->date));
                            $start_time = date('H:t',strtotime($data->start_time));
                            $end_time = date('H:t',strtotime($data->end_time));
                            @endphp
                                @php $i = $i+1 @endphp
                            @for($i=$i;$i<=count($jobSheet_data);)
                                <td>{{$i}}</td>
                            @break
                            @endfor
                            <td>{{$data->emp_id}}</td>
                            <td>{{$data->emp_name}}</td>
                            <td>{{$data->departments->department}}</td>
                            <td>{{$data->domains->domain}}</td>
                            <td>{{$date}}</td>
                            <td>{{$start_time}}</td>
                            <td>{{$end_time}}</td>
                            <td class="pl-5">{{$data->ttl_hours}}</td>
                            <td>{{$data->work_type}}</td>
                            <td>{{$data->project_name}}</td>
                            <td>{{$data->task_name}}</td>
                            <td class="reason">{{$data->task_description}}</td>
                            <td>
                                @if($data->status == 'Pending')
                                    <span class="badge badge-warning">
                                        {{$data->status}}
                                    </span>
                                @elseif($data->status == 'Approved')
                                    <span class="badge badge-success">
                                        {{$data->status}}
                                    </span>
                                @else
                                    <span class="badge text-white" style="background-color: #bc1a25;">
                                        {{$data->status}}
                                    </span>
                                @endif
                            </td>
                            @if($data->status == 'Pending')
                            <td>
                                <div class="leave-action text-start">
                                    <a href="javascript:void(0);" data-target="#accept" data-toggle="modal"
                                        class="approve ml-1" data-id="{{$data->id}}"
                                        data-value="{{$data->emp_id}}" data-time="{{$data->ttl_hours}}">
                                        <img src="design/img/approved.svg" style="width:24px; height:24px;" />
                                    </a>
                                    <a href="javascript:void(0);" class="reject ml-2" data-target="#cnfrm_reject"
                                        data-toggle="modal" data-id="{{$data->id}}">
                                        <img src="design/img/reject.svg" style="width:24px; height:24px;" />
                                    </a>
                                </div>
                            </td>
                            @elseif($data->status == 'Reject')
                            <td>
                                <div class="leave-action">
                                    <a href="javascript:void(0);" data-target="#reject_reason"
                                        data-value="{{$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>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-
                            </td>
                            @endif
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </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>
<!-- 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 Job Sheet?</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <form action="{{ route('accept_jobSheet') }}" method="post" class="form-group">
            {{csrf_field()}}
            <input type="hidden" class="approve_db_id" name="db_id">
            <input type="hidden" class="approve_days" name="hours">
            <input type="hidden" class="approve_emp_id" name="emp_id">
            <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>
<!-- MODEL FOR CONFIRMATION REJECT OT -->
<div class="modal fade" id="cnfrm_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">Do you want to reject this  Job Sheet?</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <form action="" method="post" class="form-group">
            <!-- {{csrf_field()}} -->
            <input type="hidden" name="db_id" id="confrm_reject">
            <div class="modal-footer">
                <div class="text-end">
                    <button class="btn btn-success" data-toggle="modal" data-target="#reject"
                    data-dismiss="modal" type="button" name="add_leave" id="confrm_reject_btn">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">
        <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="{{ route('reject_jobSheet') }}" method="post" class="form-group">
            {{csrf_field()}}
            <input type="hidden" id="hidden_dbid" name="hidden_dbid">
            <textarea class="mt-3 ml-5 form-control" style="resize: none; width: 400px;"
            placeholder="Enter reject reason" id="reason_txt" name="reject_reason" rows="5"></textarea>
            <p class="text-danger ml-5" id="error_msg"></p>
            <div class="mt-3 mr-5">
                <div class="row float-right">
                    <div class="col-6">
                        <input type="submit" id="reject_submit" value="Submit" class="btn btn-success">
                    </div>
                    <div class="col-6">
                        <input type="reset" id="cancel" data-dismiss="modal" value="Cancel"
                        class="btn btn-primary">
                    </div>
                </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: 'success',
            padding: '2em'
        });
    </script>
@endif
@include('components/footer')
<script>
$(".approve").on('click', function() {
    var col1 = $(this).data('id');
    var col3 = $(this).data('value');
    var col2 = $(this).data('time')
    $(".approve_db_id").val(col1);
    $(".approve_emp_id").val(col3);
    $(".approve_days").val(col2);
});

$(".reject").on('click', function() {
var col1 = $(this).data('id');
    $("#confrm_reject").val(col1);
});

$("#reject_submit").on('click', function(event) {
    if ($("#reason_txt").val().trim().length < 1) {
        $("#error_msg").text('This field is required*');
        event.preventDefault();
    }
});

$("#cancel").on('click', function() {
    $("#error_msg").text('');
    $("#reason_txt").val('');
});

$("#confrm_reject_btn").on('click', function() {
    var id = $("#confrm_reject").val();
    $("#hidden_dbid").val(id);
});

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