@extends('user.user_dashboard')
@section('home')
    <style>
        /* Modern UI Refinements */
        body {
            background-color: #f8fafc;
        }

        .study-container {
            padding-top: 30px;
        }

        .product-header {
            background: linear-gradient(135deg, #FFE5D0 0%, #ffcfab 100%);
            padding: 40px 30px;
            border-radius: 20px;
            box-shadow: 0 10px 25px rgba(255, 160, 122, 0.2);
            margin-bottom: 35px;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .study-accordion .card {
            border: none;
            margin-bottom: 18px;
            border-radius: 16px !important;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
            overflow: hidden;
        }

        .study-accordion .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
        }

        .chapter-link {
            display: flex;
            align-items: center;
            padding: 24px;
            text-decoration: none !important;
            width: 100%;
            background: #fff;
        }

        .chapter-label {
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            color: #ffffff;
            background: #3182ce;
            padding: 4px 12px;
            border-radius: 50px;
            letter-spacing: 0.8px;
            flex-shrink: 0;
            width: fit-content;
            margin-right: 15px;
        }

        .chapter-title {
            font-size: 16px;
            font-weight: 700;
            color: #2d3748;
            line-height: 1.4;
            flex-grow: 1;
        }

        .status-icon {
            font-size: 20px;
            transition: transform 0.3s ease;
        }

        .collapsed .status-icon {
            transform: rotate(-90deg);
        }

        /* Inner List Items */
        .list-group-item {
            transition: all 0.2s ease;
            margin: 5px 10px;
            border-radius: 10px !important;
        }

        .list-group-item:hover {
            background-color: #f0f7ff !important;
            padding-left: 25px !important;
        }

        .font-weight-600 {
            font-weight: 600;
            font-size: 14px;
            color: #4a5568;
        }

        /* Tab Customization */
        .custom-tabs {
            border-bottom: 2px solid #edf2f7;
            padding: 0 10px;
        }

        .custom-tabs .nav-link {
            border: none;
            color: #718096;
            font-weight: 700;
            padding: 15px 25px;
            position: relative;
        }

        .custom-tabs .nav-link.active {
            color: #3182ce !important;
            background: transparent !important;
        }

        .custom-tabs .nav-link.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            right: 25%;
            height: 3px;
            background: #3182ce;
            border-radius: 10px 10px 0 0;
        }

        @media (max-width: 576px) {
            .chapter-link {
                padding: 18px;
            }

            .chapter-title {
                font-size: 14px;
            }

            .product-header {
                padding: 25px 20px;
            }
        }
    </style>

    <!-- breadcrumb -->
    <section class="mobile-breadcrumb-light bg-white border-bottom">
        <div class="container">
            <div class="d-flex align-items-center py-3">
                <a href="{{ route('dashboard') }}" class="btn btn-light btn-sm rounded-circle me-3 shadow-sm">
                    <i class="la la-arrow-left"></i>
                </a>
                <div>
                    <h6 class="mb-0 fw-bold text-dark">Enhanced Study Mode</h6>
                    <small class="text-muted"> Dashboard / Enhanced Study</small>
                </div>
            </div>
        </div>
    </section>

    <div class="container-fluid pb-5">
        <div class="container study-container">

            <div class="product-header">
                <span class="badge badge-warning mb-2 text-uppercase"
                    style="background: rgba(255,255,255,0.5); color: #854d0e;"> Revised Edition </span>
                <h1 class="h3 font-weight-bold mb-2" style="color: #1a202c;">{{ $product->product_name }}</h1>
                <p class="opacity-75 mb-0">{{ $product->product_subtitle }}</p>
            </div>




            <div id="accordion" class="study-accordion">
                @forelse ($studies ?? [] as $index => $study)
                    @php $collapseId = 'collapse' . $index; @endphp
                    <div class="card">
                        <div class="card-header p-0">

                            <!-- <a class="chapter-link {{ $index !== 0 ? 'collapsed' : '' }}" data-toggle="collapse" href="#{{ $collapseId }}"> -->
                            <a class="chapter-link collapsed" data-toggle="collapse" href="#{{ $collapseId }}">


                                <div class="chapter-label">

                                    @if ($study->section == 1)
                                        E-Book
                                    @elseif($study->section == 2)
                                        Opening Credit
                                    @elseif($study->section == 3)
                                        Intro
                                    @elseif($study->section >= 4 && $study->section <= 19)
                                        Ch. {{ $study->section - 3 }}
                                    @elseif($study->section == 20)
                                        End
                                    @else
                                        Closing Credit
                                    @endif

                                </div>

                                <div class="chapter-title">{{ $study->chapter_title }}</div>

                                <div class="status-icon text-muted"><i class="la la-angle-down"></i></div>

                            </a>
                        </div>

                        <!--<div id="{{ $collapseId }}" class="collapse {{ $index === 0 ? 'show' : '' }}" data-parent="#accordion"> -->
                        <div id="{{ $collapseId }}" class="collapse" data-parent="#accordion">
                            <div class="card-body pt-0 px-2 pb-3">
                                <div class="list-group list-group-flush border-top-0">



                                    <a href="{{ route('user.enhanced.study.chapter', $study) }}"
                                        class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3 border-0">
                                        <div class="d-flex align-items-center">
                                            <div class="rounded-circle bg-light-success p-2 me-3">
                                                <i class="la la-book-open text-success" style="font-size: 20px;"></i>
                                            </div>
                                            <span class="font-weight-600"> Chapter Study </span>
                                        </div>
                                        <i class="la {{ $study->read_completed ? 'la-check-circle text-success' : 'la-chevron-right text-muted' }}"></i>
                                    </a>


                                   @if($study->key_summary)
                                    <a href="{{ route('user.enhanced.study.summary', $study) }}"
                                        class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3 border-0">
                                        <div class="d-flex align-items-center">
                                            <div class="rounded-circle bg-light-info p-2 me-3">
                                                <i class="la la-lightbulb text-info" style="font-size: 20px;"></i>
                                            </div>
                                            <span class="font-weight-600">Nuggets </span>
                                        </div>
                                        <i
                                            class="la {{ $study->summary_completed ? 'la-check-circle text-success' : 'la-chevron-right text-muted' }}"></i>
                                    </a>
                                    @endif

                                     @if($study->essay()->exists())
                                    <a href="{{ route('essay.question', $study) }}"
                                        class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3 border-0">
                                        <div class="d-flex align-items-center">
                                            <div class="rounded-circle bg-light-primary p-2 me-3">
                                                <i class="la la-pen-fancy text-primary" style="font-size: 20px;"></i>
                                            </div>
                                            <span class="font-weight-600">Reflections</span>
                                        </div>
                                        <i class="la la-chevron-right text-muted"></i>
                                    </a>
                                    @endif

                                     @if($study->objective()->exists())
                                    <a href="{{ route('objective.question', $study) }}"
                                        class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3 border-0">
                                        <div class="d-flex align-items-center">
                                            <div class="rounded-circle bg-light-warning p-2 me-3">
                                                <i class="la la-tasks text-warning" style="font-size: 20px;"></i>
                                            </div>
                                            <span class="font-weight-600">Quick Quiz</span>
                                        </div>
                                        <i class="la la-chevron-right text-muted"></i>
                                    </a>
                                    @endif

                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-5">
                        <i class="la la-folder-open text-muted" style="font-size: 48px;"></i>
                        <p class="mt-3 text-muted">No study chapters available yet. Check back soon!</p>
                    </div>
                @endforelse

                <!-- Final Assessment Card -->
                <div class="card" style="border: 2px dashed #cbd5e0; background: #fdfdfd;">
                    <div class="card-header p-0">
                        <a class="chapter-link collapsed" data-toggle="collapse" href="#collapseFinal">
                            <div class="chapter-label" style="background: #e53e3e;"> CERT </div>
                            <div class="chapter-title text-uppercase" style="letter-spacing: 1px;"> Assessment and Certificate
                            </div>
                            <div class="status-icon text-muted"><i class="la la-angle-down"></i></div>
                        </a>
                    </div>
                    <div id="collapseFinal" class="collapse" data-parent="#accordion">
                        <div class="card-body pt-0 px-2 pb-3">
                            <div class="list-group list-group-flush border-0">
                                <a href="{{ route('final.assessment', $product) }}"
                                    class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3 border-0">
                                    <div class="d-flex align-items-center">
                                        <i class="la la-graduation-cap mr-3 text-danger" style="font-size:24px;"></i>
                                        <span class="font-weight-600">Take Final Assessment</span>
                                    </div>
                                    <i class="la la-chevron-right text-muted"></i>
                                </a>
                                <a href="{{ route('certificate', $product) }}"
                                    class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3 border-0">
                                    <div class="d-flex align-items-center">
                                        <i class="la la-award mr-3 text-success" style="font-size:24px;"></i>
                                        <span class="font-weight-600">Claim Your Certificate</span>
                                    </div>
                                    <i class="la la-chevron-right text-muted"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Tabs Section --}}
            <div class="bg-white rounded-lg mt-5 shadow-sm border overflow-hidden">
                <ul class="nav nav-tabs custom-tabs" id="myTab" role="tablist">
                    <li class="nav-item flex-fill text-center">
                        <a class="nav-link active" id="design-tab" data-toggle="tab" href="#design"
                            role="tab">Course Overview</a>
                    </li>
                    <li class="nav-item flex-fill text-center">
                        <a class="nav-link" id="development-tab" data-toggle="tab" href="#development"
                            role="tab">My Study Notes</a>
                    </li>
                </ul>

                <div class="tab-content p-4" id="myTabContent">
                    <div class="tab-pane fade show active" id="design" role="tabpanel">
                        <div class="prose max-w-none">
                            {!! $product->long_description !!}
                        </div>
                    </div>
                    <div class="tab-pane fade text-center py-4" id="development" role="tabpanel">
                        <i class="la la-sticky-note text-muted mb-2" style="font-size: 40px;"></i>
                        <p class="text-muted">Start taking notes during your chapters to see them here.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection