@extends('layouts.superadmin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Dashboard</title>
@include('datepicker')
@section('main-content')

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />

    <style>
        select {
            -webkit-appearance: listbox !important;
            padding: 10px !important;
            /* Adjust padding as needed */
            margin-right: 10px !important;
        }

        .response_message {
            color: #e69b00 !important
        }

        .card_title_class {
            padding: 10px;
            background-color: rgba(105, 108, 255, 0.16);
            font-size: 18px;
            font-weight: 700;
            border-bottom: 2px solid #696cff;
        }

        .ht100 {
            height: 100%;
        }

        .analytics_div {
            display: flex;
            gap: 30px;
            margin: 20px 0 30px;
        }

        .avtar_inner {
            width: 100%;
            height: 100%;
            border-radius: 6px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .scooters_in {
            background-color: #f4862330;
            color: #f48623;
        }

        .avtar_inner i {
            margin: 0;
        }

        .ds_in {
            background-color: #696cff36;
            color: #696cff;
        }

        .cr_in {
            background-color: #29ccef2b;
            color: #29ccef;
        }

        .sales_in {
            background-color: #38cd2f36;
            color: #38cd2f;
        }
    </style>

    <style>
        ul.student_list {
            list-style-type: none;
            padding-inline-start: 0px;
            max-height: 250px;
            overflow: auto;
        }

        .progress {
            padding: 0;
        }

        .progress {
            height: 20px;
            font-size: 12px;
            max-width: calc(100% - 290px);
            flex: 0 0 calc(100% - 290px);
        }

        .analytics_div h3 {
            max-width: 260px;
            flex: 0 0 260px;
            margin: 0;
        }

        .analytics_div {
            align-items: center;
            justify-content: space-between;
        }
    </style>

    <div id="alert" class="col-md-6">
        @if (Session::has('success'))
            <div class="alert alert-primary" role="alert">
                {{ Session::get('success') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>
    @php
        if ($totalSpaceInGB == 0) {
            $usedPercentage = 0;
        } else {
            $usedPercentage = ($usedSpaceInGB / $totalSpaceInGB) * 100;
        }
        $backgroundColor = 'rgb(113 221 55)'; // Default color
        if (round($usedPercentage, 2) > 40 && round($usedPercentage, 2) < 70) {
            $backgroundColor = 'orange';
        } elseif (round($usedPercentage, 2) > 70) {
            $backgroundColor = 'red';
        }
        $style = "width: {$usedPercentage}%; background-color: {$backgroundColor};";
    @endphp
    <!-- container start -->
    <div class="content-wrapper">
        <div class="container-xxl flex-grow-1 container-p-y">
            <div class="row">
                <div class="col-lg-12 mb-4 order-0">
                    <div class="card">
                        <div class="d-flex align-items-end row">
                            <div class="col-sm-7">
                                <div class="card-body">
                                    @if ($usedPercentage >= 80)
                                        <b>
                                            <p style="color: red">S3 bucket limit is going to reach the max free limit
                                                ({{ $totalSpaceInGB }} GB),
                                                current storage is {{ $usedSpaceInGB }} GB</p>
                                        </b>
                                    @endif
                                     <h5 class="card-title text-primary">Welcome To {{ Auth::user()->first_name }}
                                        {{ Auth::user()->last_name }} Dashboard 🎉</h5>
                                </div>
                            </div>
                            <div class="col-sm-5 text-center text-sm-left">
                                <div class="card-body pb-0 px-0 px-md-4">
                                    <img src="../assets/img/illustrations/man-with-laptop-light.png" height="140"
                                        alt="View Badge User" data-app-dark-img="illustrations/man-with-laptop-dark.png"
                                        data-app-light-img="illustrations/man-with-laptop-light.png" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="analytics_div">
                <h3 style="display: flex;flex-direction: column;gap:10px">S3 Storage Details <b><span
                            style="font-size: 14px;color: #b0b0b0;">(Last Updated: {{ $lastModifiedDate }})</span> </b></h3>

                <div class="progress">
                    <div class="progress-bar" style="{{ $style }}" aria-valuenow="{{ $usedPercentage }}"
                        aria-valuemin="0" aria-valuemax="100">
                        {{ round($usedPercentage, 2) }}%
                    </div>
                </div>
            </div>
            <div id="analytics_view">
                <div class="row">
                    <div class="col-lg-4 col-md-12 col-6 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="card-title d-flex align-items-start justify-content-between">
                                    <div class="avatar flex-shrink-0">
                                        <div class="avtar_inner scooters_in">
                                            <i class="menu-icon tf-icons bx bxs-pie-chart-alt-2"></i>
                                        </div>
                                    </div>
                                </div>
                                <span class="fw-semibold d-block mb-1">Maximum Free Space Limit:</span>
                                <h3 class="card-title mb-2"> {{ $totalSpaceInGB }} GB</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-4 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="card-title d-flex align-items-start justify-content-between">
                                    <div class="avatar flex-shrink-0">
                                        <div class="avtar_inner ds_in">
                                            <i class="menu-icon tf-icons bx bxs-pie-chart"></i>
                                        </div>
                                    </div>
                                </div>
                                <span class="d-block mb-1">Used Space:</span>
                                <h3 class="card-title text-nowrap mb-2">{{ $usedSpaceInGB }} GB</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-4 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="card-title d-flex align-items-start justify-content-between">
                                    <div class="avatar flex-shrink-0">
                                        <div class="avtar_inner cr_in">
                                            <i class="menu-icon tf-icons bx bxs-pie-chart-alt"></i>
                                        </div>
                                    </div>
                                </div>
                                <span class="fw-semibold d-block mb-1">Free Space:</span>
                                <h3 class="card-title mb-2">{{ $freeSpaceInGB }} GB</h3>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </div>

        <!-- / Content -->

        <!-- Footer -->

        <!-- / Footer -->

        <div class="content-backdrop fade"></div>
    </div>
    <!-- container end -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

@endsection