@extends('frontend.layouts.app')

@section('title', 'Dashboard')

@section('content')

    <section class="mt-[8rem] flex justify-center px-4">
        <div class="w-full mx-auto bg-[#FFEBED] lg:p-12 md:p-10 sm:p-8 rounded-lg shadow-md text-center">
            @if (Auth::user()->hasRole('super-user') || Auth::user()->hasRole('admin'))
                <div class="container p-4 mx-auto">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                        <a href="{{ url('success-stories') }}"
                            class="block p-4 transition-transform transform bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 hover:scale-105">
                            <div class="flex items-center space-x-3">
                                <img src="{{ url('assets/image/winner_11297836.png') }}" alt="" width="35px">
                                <h5 class="mb-0 text-xl font-bold tracking-tight text-gray-900 md:text-2xl dark:text-white">
                                    Success Stories
                                </h5>
                            </div>
                            <div
                                class="inline-flex items-center justify-center px-4 py-2 mt-4 text-sm font-medium text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                                View All
                                <svg class="w-4 h-4 ml-2 rtl:rotate-180" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
                                </svg>
                            </div>
                        </a>

                        {{-- Card 2 --}}
                        <a href="{{ url('users') }}"
                            class="block p-4 transition-transform transform bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 hover:scale-105">
                            <div class="flex items-center space-x-3">
                                <img src="{{ url('assets/image/user_13984171.png') }}" alt="" width="30px">
                                <h5 class="font-bold tracking-tight text-gray-900 ext-xl md:text-2xl dark:text-white">
                                    Users
                                </h5>
                            </div>
                            <div
                                class="inline-flex items-center justify-center px-4 py-2 mt-4 text-sm font-medium text-white bg-green-700 rounded-lg hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
                                View All
                                <svg class="w-4 h-4 ml-2 rtl:rotate-180" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
                                </svg>
                            </div>
                        </a>


                        <!-- Card 3 -->
                        <a href="{{ url('roles') }}"
                            class="block p-4 transition-transform transform bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 hover:scale-105">
                            <div class="flex items-center space-x-3">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                    class="w-12 text-yellow-700 dark:text-yellow-400" viewBox="0 0 25 25">
                                    <path d="M10 2a8 8 0 100 16 8 8 0 000-16zM7 9h6v2H7V9zm0-3h6v2H7V6zm0 6h6v2H7v-2z">
                                    </path>
                                </svg>
                                <h5 class="mb-2 text-xl font-bold tracking-tight text-gray-900 md:text-2xl dark:text-white">
                                    Roles
                                </h5>
                            </div>
                            <div
                                class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-yellow-600 rounded-lg hover:bg-yellow-700 focus:ring-4 focus:outline-none focus:ring-yellow-300 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:focus:ring-yellow-700">
                                View All
                                <svg class="w-4 h-4 ml-2 rtl:rotate-180" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
                                </svg>
                            </div>
                        </a>


                        <!-- Card 4 -->
                        <a href="{{ url('permissions') }}"
                            class="block p-4 transition-transform transform bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 hover:scale-105">
                            <div class="flex items-center space-x-3">
                                <img src="{{ url('assets/image/encripted-file_11037089.png') }}" alt="" width="30px">
                                <h5 class="text-xl font-bold tracking-tight text-gray-900 md:text-2xl dark:text-white">
                                    Permissions
                                </h5>
                            </div>
                            <div
                                class="inline-flex items-center justify-center px-4 py-2 mt-4 text-sm font-medium text-white bg-red-700 rounded-lg hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">
                                View All
                                <svg class="w-4 h-4 ml-2 rtl:rotate-180" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
                                </svg>
                            </div>
                        </a>

                    </div>
                    <div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2 lg:grid-cols-4">
                        <a href="{{ url('reports') }}"
                            class="block p-4 transition-transform transform bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 hover:scale-105">
                            <div class="flex items-center space-x-3">
                                <svg class="w-6 h-6 text-red-800 dark:text-white" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                                    viewBox="0 0 24 24">
                                    <path
                                        d="M6 16v-3h.375a.626.626 0 0 1 .625.626v1.749a.626.626 0 0 1-.626.625H6Zm6-2.5a.5.5 0 1 1 1 0v2a.5.5 0 0 1-1 0v-2Z" />
                                    <path fill-rule="evenodd"
                                        d="M11 7V2h7a2 2 0 0 1 2 2v5h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-1a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2H3a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h6a2 2 0 0 0 2-2Zm7.683 6.006 1.335-.024-.037-2-1.327.024a2.647 2.647 0 0 0-2.636 2.647v1.706a2.647 2.647 0 0 0 2.647 2.647H20v-2h-1.335a.647.647 0 0 1-.647-.647v-1.706a.647.647 0 0 1 .647-.647h.018ZM5 11a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h1.376A2.626 2.626 0 0 0 9 15.375v-1.75A2.626 2.626 0 0 0 6.375 11H5Zm7.5 0a2.5 2.5 0 0 0-2.5 2.5v2a2.5 2.5 0 0 0 5 0v-2a2.5 2.5 0 0 0-2.5-2.5Z"
                                        clip-rule="evenodd" />
                                    <path d="M9 7V2.221a2 2 0 0 0-.5.365L4.586 6.5a2 2 0 0 0-.365.5H9Z" />
                                </svg>

                                <h5 class="mb-2 text-xl font-bold tracking-tight text-gray-900 md:text-2xl dark:text-white">
                                    Reports
                                </h5>
                            </div>
                            <div
                                class="inline-flex items-center justify-center px-4 py-2 mt-4 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">
                                Download Reports
                                <svg class="w-4 h-4 ml-2 rtl:rotate-180" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
                                </svg>
                            </div>
                        </a>

                        {{-- Card 2 --}}



                        <!-- Card 3 -->



                        <!-- Card 4 -->


                    </div>
                </div>
            @elseif (Auth::user()->roles->isEmpty())
                <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
                    <div
                        class="overflow-hidden text-white rounded-lg shadow-lg bg-gradient-to-r from-yellow-400 to-red-700">
                        <div class="p-6">
                            <h1 class="text-3xl font-bold text-center text-black">
                                Welcome!
                                <strong class="text-white">{{ Auth::user()->name }}</strong>
                            </h1>
                            <p class="mt-4 text-lg text-center">
                                We're excited to have you here. Enjoy your experience! <br>
                                Contact Administrator to Assign a Role.
                            </p>
                        </div>
                    </div>
                </div>
            @else
                <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
                    <div
                        class="overflow-hidden text-white rounded-lg shadow-lg bg-gradient-to-r from-yellow-400 to-red-700">
                        <div class="p-6">
                            <h1 class="text-3xl font-bold text-center text-black">
                                Welcome!
                                <strong class="text-white">{{ Auth::user()->name }}</strong>
                            </h1>
                            <p class="mt-4 text-lg text-center">
                                We're excited to have you here. Enjoy your experience!
                            </p>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </section>


    {{-- @if (Auth::user()->hasRole('user'))
        @if (is_null(Auth::user()->email_verified_at))

            <div id="email-verification-popup"
                class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-50">
                <div class="w-full max-w-md p-6 mx-4 bg-white rounded-lg">
                    <h2 class="text-lg font-semibold text-center">Email Verification Required</h2>
                    <p class="text-center">Please verify your email address to proceed further.</p>
                    <a href="{{ route('verification.notice') }}"
                        class="inline-block w-full px-4 py-2 mt-4 text-center text-white bg-blue-500 rounded">
                        Resend Verification Email
                    </a>
                </div>
            </div>
            <div class="fixed inset-0 bg-gray-900 bg-opacity-50 pointer-events-none"></div>
        @elseif (!$profileComplete)

            <div id="profile-incomplete-popup"
                class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-50">
                <div class="w-full max-w-md p-6 mx-4 bg-white rounded-lg">
                    @if ($showPopup)
                        @if (!$paymentStatus)
                            <h2 class="text-lg font-semibold text-center">Your payment is incomplete!</h2>
                            <p class="text-center">Kindly complete the payment before moving to the next step.</p>
                            <button id="modalButton_subscription" data-modal-toggle="default-modal_subscription"
                                data-modal-target="default-modal_subscription"
                                class="mt-4 px-4 py-2 bg-[#F42C56] text-white rounded w-full text-center">
                                Complete Payment
                            </button>
                        @elseif($paymentStatus === 'Expired')
                            <h2 class="text-lg font-semibold text-center">Your plan is expired!</h2>
                            <p class="text-center">Kindly renew the plan before moving to the next step.</p>
                            <button id="modalButton_renew_subscription"
                                data-modal-toggle="default-modal_renew_subscription"
                                data-modal-target="default-modal_renew_subscription"
                                class="mt-4 px-4 py-2 bg-[#F42C56] text-white rounded w-full text-center">
                                Renew Payment
                            </button>
                        @endif
                    @else
                        <h2 class="text-lg font-semibold text-center">Your profile is incomplete!</h2>
                        <p class="text-center">Kindly complete the profile before moving to the next step.</p>
                        <a href="{{ url('profile/edit/') }}"
                            class="mt-4 inline-block px-4 py-2 bg-[#F42C56] text-white rounded-lg w-full text-center">
                            Complete Profile
                        </a>
                    @endif
                </div>
            </div>
            <div class="fixed inset-0 bg-gray-900 bg-opacity-50 pointer-events-none"></div>
        @endif
    @endif --}}

@endsection