@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/calendars/fullcalendar.min.css">
	<link rel="stylesheet" type="text/css" href="/app-assets/css/pages/app-calendar.css">

    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-8">
            <h2 class="content-header-title float-start mb-0">{{ trans('admin/leave.leave') }}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ $orgUrl . '/home' }}">{{ trans('admin/leave.home') }}</a>
                    </li>
                    <li class="breadcrumb-item active">
                        <a href="{{ $orgUrl . '/leaves' }}">
                            {{ trans('admin/leave.my_leaves') }}
                        </a>
                    </li>
                </ol>
            </div>
        </div>
        
    </div>
@endpush

@section('content')

    <section id="chartjs-chart" class="dasboardnewbody">
        <div class="row  match-height">

            <div class="col-md-8 col-12">
                <div class="card card-statistics new-cardbox">
                    <div class="card-header newheader align-items-start">
                        <div>
                            <h4 class="card-title">{{ trans('admin/leave.my_leaves') }}</h4>
                            <p class="mb-0 mb-sm-1">{{ trans('admin/leave.summary') }}</p>
                        </div>
                        <div class="mt-1 mt-sm-0">
                            <a href="{{ $orgUrl . '/team-leaves' }}" class="reqforapproval">Request for Approval ({{ $requestLeaves }})</a>
                            <a href="{{ $orgUrl . '/leaves/create' }}"> <button
                                class="btn btn-primary box-shadow-2 waves-effect waves-float waves-light"><svg
                                    xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" class="feather feather-file-text">
                                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                    <polyline points="14 2 14 8 20 8"></polyline>
                                    <line x1="16" y1="13" x2="8" y2="13"></line>
                                    <line x1="16" y1="17" x2="8" y2="17"></line>
                                    <polyline points="10 9 9 9 8 9"></polyline>
                                </svg>
                                {{ trans('admin/leave.request_leave') }}
                            </button> </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row my-1 my-sm-2">
                            @foreach ($employeeLeaves as $key => $employeeLeave)
                            @php
                            $total=0;
                            $balanceLeaveCount = $employeeLeave->balance_leaves ? $employeeLeave->balance_leaves : 0;

                            $openingLeaveCount = $employeeLeave->opening_leaves ? $employeeLeave->opening_leaves : 0;

                            $takenLeaveCount = $employeeLeave->taken_leaves ? $employeeLeave->taken_leaves : 0;
                            if($openingLeaveCount!=0){
                            $total= (($openingLeaveCount-$takenLeaveCount)/$openingLeaveCount)*100;
                            }
                            
                            if ($key == 0) {
                                $class = '';
                            } elseif ($key == 1) {
                                $class = 'progress-sick';
                            } elseif($key == 2) {
                                $class = 'progress-earned';
                            }elseif($key == 3){
                                $class = 'progress-encashed';
                            }

                        @endphp
                                <div class="col-md-3 col-6 mb-2 mb-xl-0">
                                    <div class="progress-circle progress-{{ $total }} {{ $class }}">
                                        <div class="progress-txt">
                                            {{ $employeeLeave->balance_leaves ? $employeeLeave->balance_leaves : 0 }}<br><span>Balance</span>
                                        </div>
                                    </div>
                                    <h5 class="fw-bolder mb-0 mt-1 text-center">
                                        {{ isset($employeeLeave->leaveType->name) ? $employeeLeave->leaveType->name : '-' }}
                                    </h5>
                                    <p class="historyleave-view">
                                       <a href="{{ $orgUrl . '/leaves' }}?leave_type={{ $employeeLeave->leave_type_id ? $employeeLeave->leave_type_id : 0 }}"><svg xmlns="http://www.w3.org/2000/svg"
                                                width="14" height="14" viewBox="0 0 24 24" fill="none"
                                                stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                stroke-linejoin="round" class="feather feather-eye">
                                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                                <circle cx="12" cy="12" r="3"></circle>
                                            </svg> View</a></p>
                                </div>
                            @endforeach

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card card-statistics new-cardbox">
                    <div class="card-header newheader">
                        <div class="header-left">
                            <h4 class="card-title">{{ trans('admin/leave.upcoming_holidays') }}</h4>
                            <p class="mb-0">{{ date('M, Y') }}</p>
                        </div>
                        {{-- <button type="button" class="btn btn-outline-secondary cancel-btn waves-effect">See
                            More</button> --}}
                    </div>
                    <div class="card-body">
                        <div class="card-employee-tasknew" id="scrollpart">
                            @forelse($upcomingHolidays as $key => $upcomingHoliday)
                            <div class="holidaybg holidaybg{{ $key }}">
                                <div class="row align-items-center">
                                    <div class="col-8"><span>{{ $upcomingHoliday['name'] }}</span></div>
                                    <div class="col-4 text-end">
                                        <h5>{{ $upcomingHoliday['day'] }} {{ $upcomingHoliday['datemonth'] }}</h5>
                                    </div>
                                </div>
                            </div>
                                @empty
                                <center>No Upcoming Holidays! </center>
                            @endforelse
                        </div>
                    </div>
                </div>

            </div>
        
            <div class="col-md-8 col-12">
                <div class="card new-cardbox h-100">
                    <div class="card-header newheader">
                        <div class="header-left">
                            <h4 class="card-title">Leave Details</h4>
                        </div>
                    </div>

                    <div class="card-body">


                        <div class="tableleavsumarbox">

                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Leave Type</th>
                                            <th class="text-primary">Opening Balance</th>
                                            <th>Carry Forword</th>
                                            <th class="text-danger">Taken </th>
                                            <th class="text-success">Total Balance</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($employeeLeaveDetails as $employeeLeaveDetail)
                                            <tr>
                                                <td class="fw-bolder text-dark">
                                                    {{ isset($employeeLeaveDetail->leaveType->name) ? $employeeLeaveDetail->leaveType->name : 0 }}
                                                </td>
                                                <td class="text-primary">
                                                    {{ $employeeLeaveDetail->opening_leaves ? $employeeLeaveDetail->opening_leaves : 0 }}
                                                </td>
                                                <td>
                                                    {{ $employeeLeaveDetail->carry_forwarded_leaves ? $employeeLeaveDetail->carry_forwarded_leaves : 0 }}
                                                </td>
                                                <td class="text-danger">
                                                    {{ $employeeLeaveDetail->taken_leaves ? $employeeLeaveDetail->taken_leaves : 0 }}
                                                </td>
                                                <td class="text-success">
                                                    {{ $employeeLeaveDetail->balance_leaves ? $employeeLeaveDetail->balance_leaves : 0 }}
                                                </td>

                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                        </div>



                    </div>


                </div>
            </div>

            <div class="col-md-4">
                <div class="card-body attendance-calander new-cardbox position-relative">
                        <div id="calendar"></div>

                    <div class="row leave-indicator myatteandance-leave">
                        <div class="col-4">
                            <div class="presentleave"><span></span> Present</div>
                        </div>
                        <div class="col-4">
                            <div class="absentleave"><span></span> Absent</div>
                        </div>
                        <div class="col-4">
                            <div class="holyleave"><span></span> On Leave</div>
                        </div>
                        
                    </div>
                    <div class="row leave-indicator myatteandance-leave">
                        <div class="col-4">
                            <div class="holidayleave"><span></span> Holiday</div>
                        </div>
                        
                    </div>
                
                </div>
            </div>

            <div class="col-md-12 col-12 mt-2">
                <div class="card  new-cardbox">
                    <div class="card-header newheader  ">
                        <div class="header-left">
                            <h4 class="card-title">My Requests</h4>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="card-employee-tasknew card-employee-tasknew2" id="scrollpart">

                            <div class="table-responsive">
                                <table class="table myrequesttablecbox">
                                    <thead>
                                        <tr>
                                            <th>Leave Type</th>
                                            <th>From Date</th>
                                            <th>To Date</th>
                                            <th>Status</th>
                                            <th>Applied Date</th>
                                            <th>Approved Date</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($leaves as $leave)
                                            <tr>
                                                <td class="fw-bolder text-dark">
                                                    {{ isset($leave->leaveType->name) ? $leave->leaveType->name : '-' }}
                                                </td>
                                                <td>
                                                    {{ $leave->from_date ? App\Helpers\GeneralHelper::dateFormat($leave->from_date) : '-' }}
                                                </td>
                                                <td>
                                                    {{ $leave->to_date ? App\Helpers\GeneralHelper::dateFormat($leave->to_date) : '-' }}
                                                </td>
                                                <td>
                                                    @if ($leave->status == App\Helpers\ConstantHelper::APPROVED)
                                                        <span
                                                            class="badge rounded-pill badge-light-success badgeborder-radius">{{ ucfirst($leave->status) }}</span>
                                                    @elseif($leave->status == App\Helpers\ConstantHelper::REVOKED || $leave->status == App\Helpers\ConstantHelper::REJECTED)
                                                        <span
                                                            class="badge rounded-pill badge-light-danger badgeborder-radius">{{ ucfirst($leave->status) }}</span>
                                                    @else
                                                        <span
                                                            class="badge rounded-pill badge-light-warning badgeborder-radius">{{ ucfirst($leave->status) }}</span>
                                                    @endif
                                                </td>
                                                <td>
                                                    {{ $leave->created_at ? App\Helpers\GeneralHelper::dateFormat($leave->created_at) : '-' }}
                                                </td>
                                                <td>
                                                    {{ $leave->action_at ? App\Helpers\GeneralHelper::dateFormat($leave->action_at) : '-' }} 
                                                </td>
                                                <td>
                                                    @if ($leave->status == App\Helpers\ConstantHelper::PENDING && $leave->employee_id == auth()->guard('web2')->user()->id)
                                                    <a href="javascript:;"
                                                    data-url="{{ $orgUrl }}/leaves/{{ App\Helpers\ConstantHelper::REVOKED }}/{{ $leave->id }}"
                                                    data-request="remove"  data-method="POST"
                                                    data-message="Are you sure you want to revoke leave ?"><svg xmlns="http://www.w3.org/2000/svg"
                                                            width="14" height="14" viewBox="0 0 24 24"
                                                            fill="none" stroke="currentColor" stroke-width="2"
                                                            stroke-linecap="round" stroke-linejoin="round"
                                                            class="feather feather-x-circle">
                                                            <circle cx="12" cy="12" r="10">
                                                            </circle>
                                                            <line x1="15" y1="9" x2="9"
                                                                y2="15"></line>
                                                            <line x1="9" y1="9" x2="15"
                                                                y2="15"></line>
                                                        </svg> {{ App\Helpers\ConstantHelper::REVOKED }}</a>
                                                    @else
                                                    <a class="dropdown-item"
                                                    href="{{ $orgUrl . '/leave-approval/' . $leave->id }}"><i
                                                        data-feather="eye" class="font-4"
                                                        aria-hidden="true"></i><span class="align-middle">
                                                        View</span></a>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach


                                    </tbody>
                                </table>
                            </div>


                        </div>

                    </div>


                </div>
            </div>
            
        </div>
    </section>
@endsection

@section('scripts')

    @push('footer-script')
        <!-- BEGIN: Page Vendor JS-->
        <script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
        <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
        <script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
        <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
        <script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
        <script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
        <script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
        <script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
        <!-- END: Page Vendor JS-->

        <!-- BEGIN: Page JS-->
        <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
        <script src="/app-assets/js/scripts/forms/form-validation.js"></script>
        <script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
        <!-- END: Page JS-->

        <script src="{{ asset('js/common-script.js') }}"></script>
        <script src="{{ asset('js/sweetalert.js') }}"></script>
        <script src="{{ asset('app-assets/vendors/js/calendar/fullcalendar.min.js') }}"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var calendarEl = document.getElementById('calendar');           
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    headerToolbar: {
                        left: 'title',
                        center: '',
                        right: 'prev,next'
                    },
               
                    editable: true,
                    dayMaxEvents: true, // allow "more" link when too many events
                    eventContent: function( info ) {
                        return {html: info.event.title};
                    },
                    events:function(info, successCallback, failureCallback) {
                        $.ajax({
                            url: "{!! route('employee-attendance-details') !!}",
                            type: 'POST',
                            cache: true,
                            data: {
                                start_date: info.startStr,
                                end_date: info.endStr,
                            },
                            success: function(response) {
                                var attendance = response.data;
                                var events = [];
                                $(attendance).each(function() {
                                    // status P,H,A,L
                                    status = $(this).attr('status');
                                    first_half_status = $(this).attr('first_half_status');
                                    second_half_status = $(this).attr('second_half_status');
                                    status = 'P';
                                    if(first_half_status=='P' && second_half_status == 'P') {
                                      status = 'P';
                                    }
                                    if(first_half_status=='L' || second_half_status == 'L') {
                                      status = 'L';
                                    }
                                    if(first_half_status=='A' || second_half_status == 'A') {
                                      status = 'A';
                                    }
                                    if(first_half_status=='HD' || second_half_status == 'HD') {
                                      status = 'H';
                                    }
                                    console.log(status);
                                    events.push({
                                        title: '<div class="dotcirclatt dotcirclatt-'+status+'"></div>',
                                        start: $(this).attr('attendance_date'),
                                    });
                                });
                                successCallback(events);
                            }
                        });
                        
                    }
                });
    
                calendar.render();
            });
    
        </script>
        <style>
            .presentleave span { background: #45d30a }
            .holyleave span { background: #ffa1a1 }
            .absentleave span { background: #EA5455 }
            .holidayleave span { background: #b6aaaa }
            .dotcirclatt-L { background: #ffa1a1;  border-radius: 10px; z-index: -1;  margin: 0 auto; }
            .dotcirclatt-P { background: #45d30a;  border-radius: 10px; z-index: -1;  margin: 0 auto; }
            .dotcirclatt-A { background: #EA5455;  border-radius: 10px; z-index: -1;  margin: 0 auto; }
            .dotcirclatt-H { background: #b6aaaa;  border-radius: 10px; z-index: -1;  margin: 0 auto; }
        </style>


    @endpush