@extends('frontend.layouts.app')
@php
use Carbon\Carbon;
$date = \Illuminate\Support\Facades\Cookie::get('Rdate');
$Rdate = $date ? $date : null;
$formattedRDate = $Rdate ? Carbon::parse($Rdate)->format('m/d/Y h:i A') : 'No date available';

// Retrieve Rstatus
$status = \Illuminate\Support\Facades\Cookie::get('Rstatus');
// dd($status);
$Rstatus = $status !== null ? (int)$status : null;


// Format the status
$formattedStatus = ($Rstatus === 1) ? 'Active' : ($Rstatus === 0 ? 'Inactive' : 'No status available');
@endphp



@section('content')

<style>
    body {
        background: rgb(252, 253, 253);
    }

    .nav-link {
        border-radius: none !important;

    }

    #chart1 {
        width: 265px;
        height: 250px;
        margin: 0 auto;
        margin-left: -20px;

    }

    .session-card {
        border: 1px solid #663399;
        border-radius: 5px;
        padding: 4px 12px;
        background-color: #f9f9f9;
        transition: background-color 0.3s ease;
    }

    .session-card:hover {
        background-color: #f1f1f1;
    }

    @media (max-width: 991.98px) {
        .das-support {
            margin-top: 0px !important;
        }

        .das-rev {
            margin-top: 0px !important;
        }

        .das-pre {
            margin-top: 0px !important;
        }


    }

    @media (max-width: 1299px) {
        .das-support {
            margin-top: -113px !important;
        }

        .das-rev {
            margin-top: -186px !important;
        }

        .das-pre {
            margin-top: -79px !important;
        }

        .pre {
            height: 290px !important;
        }


    }

</style>


<section style="margin-top:-50px; background:#F4F6FC" class="space-top space-extra2-bottom">
    <div class="container">
        <div class="row">
            {{-- <div class="col-xl-4 col-lg-4 mb-3">
                <div
                    style="width:99.8%; height:220px; box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; display:flex; background:white">

                    <div id="chart1">
                    </div>
                    <div style="margin-right:80px; margin-top:60px">
                        <p class="m-0" style="font-size:14px">Welcome</p>
                        <p class="m-0 mb-2" style="font-size:14px">Tamjid Lam</p>
                        <a href="{{route('frontend.dash.profile')}}">View Account</a>
        </div>

    </div>
    </div> --}}

    <div style="margin-top:0px" class="col-xl-4 col-lg-4 mb-3">
        <div style="width:99.8%; height:175px; box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; background:white">

            @php
            $user = Auth::user();
            @endphp

            <div class="p-4">
                <p style="font-size:15px" class="m-0">Welcome {{$user->name}}</p>
                <div>
                    <p style="font-size:14px; opacity:95%">Your account is ready. Do you see it?</p>
                    <a href="{{route('frontend.dash.profile')}}" style="background: rgb(2, 197, 187); padding: 5px 20px 5px 20px; color:white;border:1px solid rgb(2, 197, 187); border-radius:5px; font-weight:500">View Account</a>
                </div>
            </div>

        </div>
    </div>
    <div class="col-xl-4 col-lg-4 mb-3">
        <div style="width:99.8%; height:235px; box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; border:2px solid rgb(137, 196, 188); background:white" class="pre">

            <!-- Tabs Navigation -->
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation" style="flex: 1;">
                    <button class="nav-link active w-100 text-center" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">
                        REVISION SESSION
                    </button>
                </li>
                <li class="nav-item" role="presentation" style="flex: 1;">
                    <button class="nav-link w-100 text-center" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">
                        MOCK EXAM
                    </button>
                </li>
            </ul>

            <!-- Tabs Content -->
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                    <div class="d-flex justify-content-between p-4">
                        <p>Current Revision Session</p>
                        <p>Score : 50%</p>
                    </div>
                    <a href="{{route('frontend.revesion')}}" style="float:right; padding-right:20px; padding-left:20px; border:1px solid rgb(142, 218, 211); background:white; font-weight:600px; border-radius:4px" class="me-3 mt-5">Continue</a>
                </div>
                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                    <div class="d-flex justify-content-between p-4">
                        <p>Mockup Exam</p>
                        <p>Score : 50%</p>
                    </div>

                    <a href="{{route('frontend.revesion')}}" style="float:right; padding-right:20px; padding-left:20px; border:1px solid rgb(142, 218, 211); background:white; font-weight:600px; border-radius:4px" class="me-3 mt-5">Continue</a>
                </div>
            </div>

        </div>
    </div>

    <div class="col-xl-4 col-lg-4">
        <div class="row p-0 m-0">
            <div class="col-xl-6 col-lg-6 mb-3">
                <div style="width:99.8%; height:100px; box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; text-align:center; border-radius:4px; background:white">

                    <p class="pt-2 m-0" style="font-size:14px">WEEkLY AVERAGE</p>
                    <p class="m-0" style="font-size:18px">11%</p>
                    <div>
                        <img width="15%" src="{{asset('/frontend/assets/images/increase.png')}}" />
                    </div>


                </div>
            </div>
            <div class="col-xl-6 col-lg-6 mb-3">
                <div style="width:99%; height:100px; box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px; text-align:center; border-radius:4px; background:white">

                    <p class="pt-2 m-0" style="font-size:14px">NEXT EXAM</p>
                    <p class="m-0" style="font-size:18px">12/09/2024</p>
                    <p style="color:rgb(212, 106, 106); font-size:14px"><i class="fa-regular fa-calendar-days me-2"></i>29 days to go</p>

                </div>
            </div>

        </div>
    </div>
    <div class="col-xl-4 col-lg-4 mb-3 das-support" style="margin-top:-60px;">
        <div style="width:99.8%; height:205px; box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; background:white">
            <div class="p-4">
                <p class="m-0" style="font-size:15px;">HELP & SUPPORT</p>
                <div class="mt-3 mb-3 d-flex justify-content-between">
                    <a href="{{ route('frontend.faq') }}" style="background:white; padding:8px 0; color:rgb(78, 77, 77); border:1px solid rgb(167, 167, 167); border-radius:5px; font-weight:500; width:48%; text-align:center; text-decoration:none; transition: background-color 0.3s ease, color 0.3s ease;">
                        FAQs
                    </a>
                    <a href="{{ route('frontend.contact') }}" style="background:white; padding:8px 0; color:rgb(78, 77, 77); border:1px solid rgb(167, 167, 167); border-radius:5px; font-weight:500; width:48%; text-align:center; text-decoration:none; transition: background-color 0.3s ease, color 0.3s ease;">
                        Contact Us
                    </a>
                </div>


                <a href="{{route('frontend.exam.start')}}" style="background:white; padding:8px 0; color:rgb(78, 77, 77); border:1px solid rgb(167, 167, 167); border-radius:5px; font-weight:500; width:100%; text-align:center; text-decoration:none; display:inline-block; transition: background-color 0.3s ease, color 0.3s ease;">
                    Recall Exam
                </a>


            </div>
        </div>
    </div>
    <div style="margin-top:0px" class="col-xl-4 col-lg-4 mb-3">
        <div style="width:99.8%; height:175px; box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; background:white">

            <div class="p-4">
                <p style="font-size:15px" class="m-0">YOUR MEMBERSHIP</p>
                <div>
                    <p style="font-size:14px; opacity:95%">You last day of membership in 13 sep 2024. Ypu have
                        30 days remaining.</p>
                    <button style="background: rgb(2, 197, 187); padding: 5px 20px 5px 20px; color:white;border:1px solid rgb(2, 197, 187); border-radius:5px; font-weight:500">Extend</button>
                </div>
            </div>

        </div>
    </div>

    <div class="col-xl-4 col-lg-4 mb-3 das-rev" style="margin-top:-135px;">
        <div style="width:100%; height:215px; box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; border-radius:10px; overflow:hidden; background:white">
            <div class="p-4">
                <p style="font-size:16px;margin-bottom:15px;">EXCLUSIVE NOTE</p>
                @forelse($cats as $value)
                <p style="font-size:16px; font-weight:500; margin-bottom:15px; background:#FAEBD7; width:120px; text-align:center; height:35px; line-height:35px; border-radius:6px" class="mb-4">
                <a href="{{ route('frontend.note', ['note' => $value->note]) }}"> {{$value->name}}</a>
                    
                </p>

                @empty
                <p>No Note Here</p>

                @endforelse


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

    <div class="col-xl-4 col-lg-4 mb-3 das-pre" style="margin-top:-28px;">
        <div style="width:100%; height:200px; box-shadow: 0px 4px 16px rgba(17, 17, 26, 0.05), 0px 8px 32px rgba(17, 17, 26, 0.05); border-radius:8px; overflow:hidden; background:white">

            <div class="p-4">
                <p class="m-0 mb-2" style="font-size:16px; font-weight:bold; color:#333;">PREVIOUS SESSION</p>




                @if($formattedStatus === 'Active')
                <div style="height:60px" class="session-card mb-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="m-0" style="font-size:15px; font-weight:500; color:#444;">Last Revision Session
                            </p>
                            <p style="font-size:13px; color:#777;">{{ $formattedRDate }}</p>
                        </div>
                        <a href="{{route('frontend.revise.start')}}" class="m-0" style="font-size:14px; font-weight:500; color:#20B2AA; margin-top:-95px">continue</a>
                    </div>
                </div>
                @else
                <p class="text-center mt-5 mb-3">No Revision Session</p>
                @endif



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


    <div style="margin-top:10px;" class="col-xl-4 col-lg-4 mb-3">
        <div style="width:99.8%; height:175px;">

            <div class="p-4">

            </div>

        </div>
    </div>
    {{-- <div style="margin-top:-80px" class="col-xl-4 col-lg-4 mb-3">
                <div
                    style="width:99.8%; height:295px; box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px; background:white">

                    <div style="height:250px" id="chart2">
                    </div>

                </div>
            </div> --}}
    </div>



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

@push('js')
<script>
    @if(session('message'))
    toastr.success("{{ session('message') }}");
    @endif

</script>
@endpush

@endsection