@extends('adminlte::page')

@section('title', config('adminlte.title') . ' | Holidays')

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>Holidays</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active">Holidays</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">

                <div class="card-body">

                    @if (session('success'))
                        <script>
                            toastr.options = {
                                "closeButton": true,
                                "progressBar": true,
                                "positionClass": "toast-top-right",
                                "timeOut": "5000",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut"
                            };
                            toastr.success('{{ session('success') }}');
                        </script>
                    @endif
                    @if (session('failed'))
                        <script>
                            toastr.options = {
                                "closeButton": true,
                                "progressBar": true,
                                "positionClass": "toast-top-right",
                                "timeOut": "5000",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut"
                            };
                            toastr.error('{{ session('failed') }}');
                        </script>
                    @endif

                    <!-- Action Buttons -->
                    <div class="d-grid gap-1 d-sm-flex">
                            <a href="{{ route('holidays.create') }}" class="btn btn-success">
                                <i class="fa fa-plus"></i> Add Leave Request
                            </a>
                            <a href="{{ route('holidays.calendar') }}" class="btn btn-info">
                                <i class="far fa-calendar-alt"></i> Calendar
                            </a>
                            <a href="{{ route('holidays.viewing') }}" class="btn btn-primary">
                                <i class="fas fa-eye"></i> View Records
                            </a>
                    </div>

                    @php
                        $currentRemain = $holidays->remain ?? 0;
                        $currentTotal = $holidays->total ?? 0;
                        $currentTaken = $holidays->taken ?? 0;
                        $currentCarryover = $holidays->carryover ?? 0;
                        $currentCOR = $holidays->cor ?? 0;
                        $totalAvailable = $currentRemain + $currentCOR;

                        $nextRemain = $holidaysNextYr->remain ?? 0;
                        $nextTotal = $holidaysNextYr->total ?? 0;
                        $nextTaken = $holidaysNextYr->taken ?? 0;
                        $nextTotalAvailable = $nextRemain + ($holidaysNextYr->cor ?? 0);
                    @endphp

                    <hr class="bg-secondary">

                    <!-- Summary Statistics -->
                    {{-- not in use at the moment
                <div class="row">
                        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3>{{ number_format($totalAvailable, 1) }}</h3>
                                    <p>Days Available</p>
                                    <small>{{ date('Y') }}</small>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-umbrella-beach"></i>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                            <div class="small-box bg-danger">
                                <div class="inner">
                                    <h3>{{ number_format($currentTaken, 1) }}</h3>
                                    <p>Days Taken</p>
                                    <small>{{ date('Y') }}</small>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-plane-departure"></i>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                            <div class="small-box bg-warning">
                                <div class="inner">
                                    <h3>{{ $pendingCount }}</h3>
                                    <p>Pending</p>
                                    <small>Requests</small>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-clock"></i>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                            <div class="small-box {{ $duvetThisYear ? 'bg-purple' : 'bg-secondary' }}">
                                <div class="inner">
                                    <h3>{{ $duvetThisYear }}</h3>
                                    <p>Duvet Day</p>
                                    <small>{{ date('Y') }}</small>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-bed"></i>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                            <div class="small-box bg-success">
                                <div class="inner">
                                    <h3>{{ number_format($nextTotalAvailable, 1) }}</h3>
                                    <p>Days Available</p>
                                    <small>{{ date('Y') + 1 }}</small>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-calendar-check"></i>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                            <div class="small-box {{ $duvetThisYear ? 'bg-purple' : 'bg-secondary' }}">
                                <div class="inner">
                                    <h3>{{ $duvetThisYear }}</h3>
                                    <p>Duvet Day</p>
                                    <small>{{ date('Y') + 1 }}</small>
                                </div>
                                <div class="icon">
                                    <i class="fas fa-bed"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    --}}

                    <!-- Current Year & Next Year Allowance Cards -->
                    <div class="row">
                        <!-- Current Year {{ date('Y') }} -->
                        <div class="col-lg-6 mb-3">
                            <x-dashboard.balance-card :year="date('Y')" :currentTotal="$currentTotal" :totalAvailable="$totalAvailable"
                                :currentTaken="$currentTaken" :currentCarryover="$currentCarryover" :currentCOR="$currentCOR" :duvetThisYear="$duvetThisYear" :remainingWorkingFromHomeDays="$remainingWorkingFromHomeDays"
                                :maxWorkingFromHomeDays="$maxWorkingFromHomeDays" :showDetails="true" />
                        </div>

                        <!-- Next Year {{ date('Y') + 1 }} -->
                        <div class="col-lg-6 mb-3">
                            <x-dashboard.balance-card :year="date('Y') + 1" :currentTotal="$nextTotal" :totalAvailable="$nextTotalAvailable"
                                :currentTaken="$nextTaken" :currentCarryover="0" :currentCOR="0" :duvetThisYear="$duvetNextYear"
                                :nextTotal="$nextTotal" :duvetNextYear="$duvetNextYear" :showDetails="true" />
                        </div>
                    </div>

                    @if ($pendingCount > 0)
                        <div class="card shadow-sm">

                            <div class="card-header bg-light">
                                <h3 class="card-title">
                                    Pending Requests: {{ $pendingCount }}
                                </h3>
                            </div>
                            <div class="card-body">


                                <!-- Pending Detailed Breakdown -->
                                <div class="row mb-4">
                                    <div class="col-12">
                                        {{-- Pending tables goes here --}}
                                        <div class="table-responsive">
                                            <table class="table table-hover">
                                                <thead>
                                                    <tr>
                                                        <th>Start Date</th>
                                                        <th>End Date</th>
                                                        <th>Type</th>
                                                        <th>Days</th>
                                                        <th>Submitted On</th>
                                                        <th></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($pendingRequests as $pending)
                                                        <tr>
                                                            <td>{{ date('d/m/Y', strtotime($pending->start_date)) }}
                                                            </td>
                                                            <td>{{ date('d/m/Y', strtotime($pending->end_date)) }}</td>
                                                            <td>{{ $pending->type }}</td>
                                                            <td>{{ number_format($pending->number_days, 1) }}</td>
                                                            <td>{{ date('d/m/Y', strtotime($pending->created_at)) }}
                                                            </td>
                                                            <td>
                                                                <form action="{{ route('holidays.update', $pending->id) }}"
                                                                    method="POST">
                                                                    @csrf
                                                                    @method('PUT')
                                                                    <input type="hidden" name="delete" value="2">
                                                                    <button type="button" data-toggle="modal"
                                                                        data-target="#cancelmodal-{{ $pending->id }}"
                                                                        class="btn btn-sm btn-danger">
                                                                        <i class="fas fa-trash"></i> Cancel
                                                                    </button>
                                                                </form>
                                                            </td>
                                                        </tr>

                                                        <!-- Modal Cancel -->
                                                        <div class="modal fade" id="cancelmodal-{{ $pending->id }}"
                                                            tabindex="-1" aria-labelledby="Model_Cancel"
                                                            aria-hidden="true">
                                                            <div class="modal-dialog modal-dialog-centered">
                                                                <div class="modal-content">
                                                                    <form
                                                                        action="{{ route('holidays.update', $pending->id) }}"
                                                                        method="POST">
                                                                        @csrf
                                                                        @method('PUT')

                                                                        <div class="modal-header bg-light border-bottom">
                                                                            <h5 class="modal-title font-weight-bold"
                                                                                id="exampleModalLabel">
                                                                                Cancel Holiday Request
                                                                            </h5>
                                                                            <button type="button" class="close"
                                                                                data-dismiss="modal" aria-label="Close">
                                                                                <span aria-hidden="true">&times;</span>
                                                                            </button>
                                                                        </div>

                                                                        <div class="modal-body">
                                                                            <!-- Date Information -->
                                                                            <div
                                                                                class="alert bg-light border text-center mb-4">
                                                                                <p class="mb-0 text-muted small">Holiday
                                                                                    Period</p>
                                                                                <h6 class="mb-0 font-weight-bold">
                                                                                    <i
                                                                                        class="far fa-calendar-alt text-primary mr-2"></i>
                                                                                    {{ date('d/m/Y', strtotime($pending->start_date)) }}
                                                                                    @if ($pending->number_days > '1')
                                                                                        <i
                                                                                            class="fas fa-arrow-right mx-2 text-muted"></i>
                                                                                        {{ date('d/m/Y', strtotime($pending->end_date)) }}
                                                                                    @endif
                                                                                </h6>
                                                                                <small class="text-muted">
                                                                                    ({{ number_format($pending->number_days, 1) }}
                                                                                    {{ $pending->number_days > 1 ? 'days' : 'day' }})
                                                                                </small>
                                                                            </div>

                                                                            <!-- Status Transition -->
                                                                            <div class="text-center mb-4">
                                                                                <p
                                                                                    class="mb-3 text-muted small font-weight-bold">
                                                                                    Status Change</p>
                                                                                <div
                                                                                    class="d-flex align-items-center justify-content-center">
                                                                                    <span
                                                                                        class="badge badge-warning px-3 py-2 font-weight-bold">
                                                                                        <i class="fas fa-clock mr-1"></i>
                                                                                        Pending
                                                                                    </span>
                                                                                    <i
                                                                                        class="fas fa-long-arrow-alt-right fa-2x mx-3 text-muted"></i>
                                                                                    <span
                                                                                        class="badge badge-secondary px-3 py-2 font-weight-bold">
                                                                                        <i class="fas fa-ban mr-1"></i>
                                                                                        Cancelled
                                                                                    </span>
                                                                                </div>
                                                                            </div>

                                                                            <div class="alert alert-info border-info">
                                                                                <i class="fas fa-info-circle mr-2"></i>
                                                                                <small>This pending holiday request will be
                                                                                    cancelled immediately.</small>
                                                                            </div>

                                                                        </div>

                                                                        <div class="modal-footer bg-light border-top">
                                                                            <input type="hidden" name="chkstatus"
                                                                                value="{{ $pending->status }}">
                                                                            <input type="hidden" name="delete"
                                                                                value="2">

                                                                            <button type="button" class="btn btn-secondary"
                                                                                data-dismiss="modal">
                                                                                <i class="fas fa-times mr-1"></i> No, Keep
                                                                                It
                                                                            </button>
                                                                            <button type="submit" class="btn btn-danger">
                                                                                <i class="fas fa-trash-alt mr-1"></i> Yes,
                                                                                Cancel Request
                                                                            </button>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- end modal -->
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    @endif
                </div>

            </div>
        </div>
    </div>
@stop

@section('footer')
    &nbsp;
@stop

@section('css')
    <style>
        .bg-purple {
            background-color: #6f42c1 !important;
            color: white;
        }

        .text-purple {
            color: #6f42c1 !important;
        }
    </style>
@stop