@extends('layouts.app')

@section('style')
<style>
.form-group .input-label {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1c2437;
    text-transform: uppercase;
    display: block;
}
.tab-btn{
    margin-top:10px;
}
</style>
@endsection

@section('sub-header')


@section('content')
<div class="container">
    <div class="row">
        <div class="col-lg-10 mx-auto">
            @if(session('alert-green'))
                <div  id="mydiv" class="alert alert-success mt-3 text-center">
                    {{ session('alert-green') }}
                </div>
            @endif

            @if(session('alert-danger'))
                <div id="mydiv" class="alert alert-danger mt-3 text-center">
                    {{ session('alert-danger') }}
                </div>
            @endif
            @if($errors->any())
                <div id="mydiv" class="row">
                    <div class="col-md-12 mb-5">
                        @foreach ($errors->all() as $error)
                        <div class="text-danger small mb-1">* {{$error}}</div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </div>

    <div class="row">
        <div class="col-lg-10 mx-auto"> 
            <div class="profile_update">
                <ul class="nav nav-tabs" role="tablist"  id="myTab">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#application">Apply Resign Application</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#list">Application List</a>
                    </li>   
                </ul>
                <div class="tab-content">
                    <div id="application" class="tab-pane active mt-3">
                        <form id="wrapped" method="POST" action="{{ route('employee.resign')}}" enctype="multipart/form-data">
                        @csrf
                            <div class="card">
                                <h3 style="font-size: 30px;margin: 7px 24px 0;"> Resign Latter</h3>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="input-label" for="resign_date">Resign Date</label>                                                         
                                                <input id="resign_date" class="form-control" name="resign_date"  type="date"  />
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="input-label" for="resign_letter">Resignation Letter</label>                                                   
                                                <input type="file" class="form-control" name="resign_letter" />
                                            </div>
                                        </div>                                            
                                    </div>                                        
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="input-label" for="remarks">Remarks</label>
                                                <textarea name="remarks" class="form-control" style="height:150px;" id="remarks" ></textarea>
                                            </div>
                                        </div>                                
                                    </div>
                                    <div class="form-group text-right">
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div id="list" class="tab-pane fade">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr class="bg-light">
                                        <th>No</th>
                                        <th>Tracking ID</th>
                                        <th>Employee ID</th>
                                        <th>Employee Name</th>
                                        <th>Designation</th>
                                        <th>Reporting person</th>
                                        <th>Contact Number</th>
                                        <th>Joining date</th>
                                        <th>Leaving/Resignation date</th>
                                        <th>Status</th>                                        
                                        <th>Approval Status</th>
                                        <th>Download</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($resignApplications as $resignApplication)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td>{{ $resignApplication->tracking_id ?? '' }}</td>
                                            <td>{{ $resignApplication->emp_id ?? '' }}</td>
                                            <td>{{ $resignApplication->employee->user->name ?? '' }}</td>
                                            <td>{{ $resignApplication->employee->user->user_type ?? '' }}</td>
                                            <td>{{ $resignApplication->employee->reportingTo->name ?? '' }}</td>
                                            <td>{{ $resignApplication->employee->user->phone ?? '' }}</td>
                                            <td>{{ $resignApplication->employee->joining_date ?? '' }}</td>
                                            <td>{{ $resignApplication->resign_date ?? '' }}</td>
                                            <td>{{ $resignApplication->status ?? '' }}</td>
                                            <td>
                                                <span
                                                    class="badge {{ $resignApplication->status == 0 ? 'badge-warning' : ($resignApplication->status == 1 ? 'badge-info' : 'badge-success') }}">{{ $resignApplication->status == 0 ? 'Pending' : ($resignApplication->status == 1 ? 'Waiting For Approval' : 'Approved') }}</span>
                                            </td>
                                            <td><a href="{{ url($resignApplication->resign_letter) ?? '' }}" target="_blank">Link</a></td>
                                            <td>                                       
                                                @if(($resignApplication->approvalStatus($resignApplication->resignApprovers) == "Waiting For Approval" || $resignApplication->approvalStatus($resignApplication->resignApprovers) == "Pending"))
                                                    <button type="button" class="btn btn-primary"
                                                            data-toggle="modal"
                                                            data-target="#applicant_{{ $resignApplication->id }}">
                                                        View
                                                    </button>
                                                    <div class="modal fade"
                                                         id="applicant_{{ $resignApplication->id }}" tabindex="-1"
                                                         aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                        <div class="modal-dialog">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title" id="exampleModalLabel">
                                                                        Resign Approbal Status</h5>
                                                                    <button type="button" class="close"
                                                                            data-dismiss="modal" aria-label="Close">
                                                                        <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                </div>
                                                                <form class="" action="{{ route('employee.resignStatusUpdate', ['id'=>$resignApplication->id]) }}"
                                                                      method="post">
                                                                    @csrf()
                                                                    <div class="modal-body">
                                                                        <div class="form-row">
                                                                            <div class="form-group col-md-9">
                                                                                <label for="inputPassword4"
                                                                                       class="input-label">Status</label>
                                                                                <select class="form-control "
                                                                                        id="status_{{$resignApplication->id}}"
                                                                                        name="status"
                                                                                        onchange="commentshideShow({{$resignApplication->id}})">
                                                                                    <option value="">Select</option>
                                                                                    <option value="1">Approved
                                                                                    </option>
                                                                                    <option value="2">On Hold
                                                                                    </option>
                                                                                </select>
                                                                            </div>
                                                                            <div
                                                                                class="form-group col-md-12 comments_area">
                                                                                <label for="inputPassword4"
                                                                                       class="input-label">Comments</label>
                                                                                <textarea class="form-control"
                                                                                          name="comments"
                                                                                          style="height:150px;"></textarea>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <button type="button"
                                                                                class="btn btn-secondary"
                                                                                data-dismiss="modal">Close
                                                                        </button>
                                                                        <button type="submit"
                                                                                class="btn btn-primary">Save changes
                                                                        </button>

                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                                <button
                                                    class="btn border border-secondary btn-sm text-secondary px-3"
                                                    data-toggle="collapse"
                                                    data-target="#collapse{{ $loop->iteration }}">
                                                    <i class="las la-eye"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="p-0" colspan="13">
                                                <div class="collapse p-3" id="collapse{{ $loop->iteration }}">
                                                    <p>
                                                        Application Flow :
                                                    </p>
                                                    <ol class="text-muted">
                                                        @foreach($resignApplication->resignApprovers as $resignApprover)
                                                            <li><b>{{ $resignApprover->user->name }}</b>
                                                                ({{ $resignApprover->status == 0 ? 'Waiting For Approval' : ($resignApprover->status == 1 ? 'Approved' : 'Reject') }}
                                                                )
                                                            </li>
                                                        @endforeach
                                                    </ol>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        {{ $resignApplications->links() }}
                        <div style="height:100px; with:100%;display:block"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script>
        $(function () {
            $('.comments_area').hide();
        });

        function commentshideShow(id) {
            var status = $('#status_' + id).val();
            if (status == 1) {
                $('.comments_area').hide();
            } else if (status == 2) {
                $('.comments_area').show();
            } else {
                $('.comments_area').hide();
            }
        }
    </script>
@endsection