@extends('front.layouts.main')
@section('title')My-leaves @endsection

@section('content')
<main class="dashboard-page">
    <div class="container">
        @if(Session::get('fail_message', false))
        @component('front.components.message')
        {{ Session::get('fail_message') }}
        @endcomponent
        @endif
        @if(Session::get('success'))
        @component('front.components.message')
        {{ Session::get('success') }}
        @endcomponent
        @endif
        <div class="row">
            <div class="col-12">
                <h2 class="h2 sec-title mb-3">Summary</h2>
                <div class="statistics-panel d-flex border border-bottom-0">
                    @foreach ($empLeaveSummery as $summery)
                        <div class="col">
                            <div class="stat-panel-info">
                                <h3>{{$summery->taken_leave ? number_format($summery->taken_leave, 1) : 0}}/{{ number_format($summery->leave, 1) }} Days</h3>
                                <p class="xxs-font">{{ $summery->companyLeave->leave_type}} Taken/Assigned</p>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="d-flex flex-wrap justify-content-between align-items-center mt-5 mb-3">
                    <div class="">
                        <h2 class="h2 sec-title mb-3">My Leaves</h2>
                    </div>
                    <div class="d-flex">
                        <div class="select btm-arrow without-label mr-3">
                            <select class="form-control" id="leave_status" name="leave_status">
                                <option value="">Select Status</option>
                                <option value="pending">Pending</option>
                                <option value="approved">Approved</option>
                                <option value="rejected">Rejected</option>
                            </select>
                        </div>
                        <div class="date mr-2" data-provide="datepicker">
                            <input type="text" id="leave_year_filter" class="form-control" placeholder="2023" name="leave_year_filter">
                            <div class="input-group-addon">
                                <span class="material-icons">date_range</span>
                            </div>
                        </div>
                        <a href="javascript:void(0)" class="btn btn-transparent btn-transparent-sm apply-leave" onclick="openApplyLeaveModal()">Apply Leave</a>
                    </div>
                </div>

                <div class="table-data table-align-start">
                    <div class="table-responsive">
                        <table class="table payroll-table" id="mtcTable">
                            <thead>
                                <tr>
                                    <th>Leave Type</th>
                                    <th>Leave Duration</th>
                                    <th>Status</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (count($empLeaveRequests) > 0)    
                                    @foreach ($empLeaveRequests as $empLeave )
                                        <tr>
                                            <td>{{$empLeave->employeeLeaveAssign->companyLeave->leave_type}}</td>
                                            <td>{{ ucfirst($empLeave->leave_days)}} Days<br>
                                                {{$empLeave->start_date}} — {{$empLeave->end_date}}</td>
                                            <td>
                                                @if ($empLeave->have_line_manager)    
                                                    <span class="{{ $empLeave->line_manager_status == 'approved' ? 'green' : ($empLeave->line_manager_status == 'rejected' ? 'red' : ($empLeave->line_manager_status == 'pending' ? 'font-orange' : '')) }}">
                                                        {{ ucfirst($empLeave->line_manager_status)}}</span> {{ $empLeave->line_manager_status == 'approved' ? 'by '.$empLeave->approvedBy->fullName.' (Line Manager)' : 'at Line Manager' }}<br>
                                                @endif
                                                <span class="{{ $empLeave->admin_status == 'approved' ? 'green' : ($empLeave->admin_status == 'rejected' ? 'red' : ($empLeave->admin_status == 'pending' ? 'font-orange' : '')) }}">
                                                    {{ ucfirst($empLeave->admin_status)}}</span> at Payroll Admin
                                            </td>
                                            <td class="d-flex align-items-center justify-content-end">
                                                <div class="act-btn mr-3">
                                                    <a href="javascript:void(0)" title="Edit" class="btn btn-edit"><i class="material-icons" onclick="openApplyLeaveModal({{$empLeave->id}})">edit</i></a>
                                                </div>
                                                <div class="act-btn mr-3">
                                                    <a href="javascript:void(0)" title="Delete" class="btn btn-dlt"><i class="material-icons" onclick="openRemoveLeaveConfirmationModal({{$empLeave->id}})">delete</i></a>
                                                </div>
                                                <div class="act-btn">
                                                    <a href="javascript:void(0)" title="Edit" class="btn btn-edit"><i class="material-icons" onclick="openViewLeaveDetailsModal({{$empLeave->id}})">visibility</i></a>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection
@push('pageJs')

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
</script>
<script type="text/javascript" src="{{ asset('js/front/leave/leave.js') }}"></script>
@endpush
@push('pageModals')
{{-- App Leave Modal --}}
<div class="modal fade" id="apply-leave-detail" style="" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Apply Leave</h4>
                <button type="button" class="close" onclick="closeApplyLeaveModal()">×</button>
            </div>
            <!-- Modal body -->
            <form action="" id="frmApplyLeave" autocomplete="off" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="form-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group date required">
                                    <input id="leaveId" type="hidden" name="id" />
                                    <label class="control-label">Leave Start Date</label>
                                    <div class="input-group date" data-provide="datepicker">
                                        <input type="text" id="leave_start_date" class="form-control" placeholder="29 Dec 2023" name="leave_start_date" required>
                                        <div class="input-group-addon">
                                            <span class="material-icons">date_range</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group date required">
                                    <label class="control-label">Leave End Date</label>
                                    <div class="input-group date" data-provide="datepicker">
                                        <input type="text" id="leave_end_date" class="form-control" placeholder="29 Dec 2023" name="leave_end_date" required>
                                        <div class="input-group-addon">
                                            <span class="material-icons">date_range</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group select required">
                                    <label class="control-label">Leave Type</label>
                                    <select class="form-control select-two js-example-basic-single" id="leave_type_id" name="leave_type_id" required>
                                        {{-- <option value="" hidden="">Select</option> --}}
                                        @isset($empLeaveSummery)
                                            @foreach ($empLeaveSummery as $summery)
                                                <option value="{{ $summery->id }}">{{ $summery->companyLeave->leave_type }}</option>
                                            @endforeach
                                        @endisset
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group required">
                                    <label class="control-label">Comment</label>
                                    <textarea class="form-control" id="leave_comment" placeholder="Type here..." rows="3" name="comment" required></textarea>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label">Upload File</label>
                                    <div class="custom-file w-100 file-type-new">
                                        <input type="file" class="custom-file-input w-100" id="leaveDoc" name="leave_file">
                                        <label class="custom-file-label bg-white form-control text-left d-flex" for="leaveDoc">Choose file...</label>
                                        <span class="attachment-bg"><img src="/img/ic-attachment-dark.svg" alt="ic-attachment"></span>
                                        <p><a id="leaveAttachActual" class="display-info attachment" href="" target="_blank"></a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-center mt-3">
                    <button type="button" class="btn btn-transparent" onclick="closeApplyLeaveModal()">Cancel</button>
                    <button type="submit" id='applyLeavebtn' class="btn btn-primary-em submit">Apply</button>
                </div>
            </form>
        </div>
    </div>
</div>
{{-- Remove Leave Confirmation --}}
<div class="modal fade" id="remove-leave-modal" style="" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Remove Leave Confirmation</h4>
                <button type="button" class="close" onclick="closeRemoveLeaveModal()">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <input type="hidden" id="removeLeaveId" name="id">
                <p>{{ @trans('delete_modal.confirmation') }}?</p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-transparent" onclick="closeRemoveLeaveModal()">Cancel</button>
                <button type="submit" id='removeLeavebtn' class="btn btn-primary-em submit" onclick="removeLeave()">Remove</button>
            </div>
        </div>
    </div>
</div>
{{-- Leave Detail Modal --}}
<div class="modal fade" id="front-leave-detail" style="">
    <div class="modal-dialog modal-md modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Leave Details</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label">Name</label>
                            <p class="display-info" id="leaveUserName"></p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">Designation</label>
                            <p class="display-info" id="leaveUserDesignation"></p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label">Branch</label>
                            <p class="display-info" id="leaveUserBranch"></p>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label">Leave Type</label>
                            <p class="display-info" id="userLeaveType"></p>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label">Leave Duration</label>
                            <p class="display-info" id="userLeaveDuration"></p>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label">Comment</label>
                            <p class="display-info" id="userLeaveComment"></p>
                        </div>
                    </div>
                    <div class="col-md-12 leave-attachment">
                        <div class="form-group">
                            <label class="control-label">Attachment</label>
                            <p class="display-info"><a id="leaveAttach" class="display-info attachment" href="" target="_blank"></a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endpush
<script>
var applyLeaveUrl = "{{route('front.empApplyLeave')}}";
var editLeaveUrl = "{{route('front.empShowLeave',['id'=>':id'])}}";
var removeLeaveUrl = "{{route('front.empLeaveRemove',['id' => ':id'])}}";
var showLeaveDetailUrl = "{{ route('front.empShowLeaveDetails',['id' => ':id']) }}";
@if(Session::has('message'))
    Snackbar.show({
        pos: 'bottom-right',
        text: "{!! session('message') !!}",
        actionText: 'Okay'
    });
@endif
</script>
@push('pageJs')
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
    $(document).ready(function(){
        $('#leaveDoc').change(function(e){
            $('.leaveFileName').text(e.target.files[0].name);
        });
        var currentYear = new Date().getFullYear();
        var $end_date = $("#leave_year_filter");
        $end_date.datepicker({
            autoHide: true,
            format: 'yyyy',
            zIndex: 2048,
            date: new Date(currentYear, 0, 1),
            viewMode:'years'
        });
    });
</script>
@endpush