@extends('layouts.app')

@section('meta_title', 'Designer Control Panel - Gletra')

@push('styles')
<style>
    :root {
        --designer-primary: #6366f1;
    }
    .designer-sidebar {
        background: #fff;
        border-right: 1px solid #e5e7eb;
        height: calc(100vh - 70px);
        position: sticky;
        top: 70px;
    }
    .nav-pills .nav-link {
        color: #4b5563;
        font-weight: 500;
        padding: 12px 20px;
        border-radius: 8px;
        margin-bottom: 5px;
        transition: all 0.3s;
    }
    .nav-pills .nav-link.active {
        background-color: var(--designer-primary);
        color: #fff;
        box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.4);
    }
    .nav-pills .nav-link:hover:not(.active) {
        background-color: #f3f4f6;
    }
    .designer-content {
        padding: 30px;
        background: #f9fafb;
        min-height: calc(100vh - 70px);
    }
    .card-designer {
        border: none;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .form-label {
        font-weight: 600;
        font-size: 13px;
        color: #374151;
        margin-bottom: 8px;
    }
    .color-preview {
        width: 30px;
        height: 30px;
        border-radius: 6px;
        border: 1px solid #d1d5db;
    }
    
    /* Mobile Navigation Styles */
    .mobile-nav-wrapper {
        display: none;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        padding: 10px 0;
        position: sticky;
        top: 70px;
        z-index: 100;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-nav-wrapper::-webkit-scrollbar {
        display: none;
    }
    .mobile-nav-list {
        display: flex;
        gap: 10px;
        padding: 0 15px;
        list-style: none;
        margin: 0;
        white-space: nowrap;
    }
    .mobile-nav-list .nav-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 12px 18px;
        background: #f3f4f6;
        border-radius: 10px;
        color: #4b5563;
        font-weight: 600;
        font-size: 13px;
        text-decoration: none;
        border: 2px solid transparent;
        transition: all 0.3s ease;
    }
    .mobile-nav-list .nav-link.active {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        color: #fff;
        border-color: #6366f1;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    }
    .mobile-nav-list .nav-link:hover:not(.active) {
        background: #e5e7eb;
        border-color: #6366f1;
    }
    .mobile-nav-list .nav-link i {
        font-size: 16px;
    }
    
    @media (max-width: 991.98px) {
        .mobile-nav-wrapper {
            display: block;
        }
        .designer-content {
            padding: 20px 15px;
        }
    }
</style>
@endpush

@section('content')
<div class="container-fluid p-0">
    <div class="row g-0">
        {{-- Sidebar Navigation --}}
        <div class="col-lg-3 col-xl-2 designer-sidebar d-none d-lg-block">
            <div class="p-4">
                <h5 class="fw-bold mb-4">Design Editor</h5>
                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <button class="nav-link active" id="tab-theme" data-bs-toggle="pill" data-bs-target="#content-theme" type="button"><i class="bi bi-palette me-2"></i> Theme & Colors</button>
                    <button class="nav-link" id="tab-header" data-bs-toggle="pill" data-bs-target="#content-header" type="button"><i class="bi bi-layout-sidebar-inset me-2"></i> Header & Navbar</button>
                    <button class="nav-link" id="tab-sidebar" data-bs-toggle="pill" data-bs-target="#content-sidebar" type="button"><i class="bi bi-layout-sidebar me-2"></i> Sidebar</button>
                    <button class="nav-link" id="tab-home" data-bs-toggle="pill" data-bs-target="#content-home" type="button"><i class="bi bi-house-door me-2"></i> Home Sections</button>
                    <button class="nav-link" id="tab-sliders" data-bs-toggle="pill" data-bs-target="#content-sliders" type="button"><i class="bi bi-images me-2"></i> Sliders & Banners</button>
                    <button class="nav-link" id="tab-category" data-bs-toggle="pill" data-bs-target="#content-category" type="button"><i class="bi bi-grid-3x3-gap me-2"></i> Category Layout</button>
                    <button class="nav-link" id="tab-product" data-bs-toggle="pill" data-bs-target="#content-product" type="button"><i class="bi bi-box-seam me-2"></i> Product Layout</button>
                    <button class="nav-link" id="tab-footer" data-bs-toggle="pill" data-bs-target="#content-footer" type="button"><i class="bi bi-layout-footer me-2"></i> Footer Builder</button>
                    <button class="nav-link" id="tab-ux" data-bs-toggle="pill" data-bs-target="#content-ux" type="button"><i class="bi bi-mouse2 me-2"></i> Scroll & UX</button>
                    <button class="nav-link" id="tab-pages" data-bs-toggle="pill" data-bs-target="#content-pages" type="button"><i class="bi bi-file-earmark-code me-2"></i> Page Design</button>
                    <button class="nav-link" id="tab-css" data-bs-toggle="pill" data-bs-target="#content-css" type="button"><i class="bi bi-code-slash me-2"></i> Custom CSS</button>
                </div>
            </div>
        </div>

        {{-- Mobile Navigation (visible only on mobile) --}}
        <div class="col-12 d-lg-none mobile-nav-wrapper">
            <ul class="mobile-nav-list">
                <li><button class="nav-link active" data-bs-toggle="pill" data-bs-target="#content-theme" type="button"><i class="bi bi-palette"></i> Theme & Colors</button></li>
                <li><button class="nav-link" data-bs-toggle="pill" data-bs-target="#content-header" type="button"><i class="bi bi-layout-sidebar-inset"></i> Header</button></li>
                <li><button class="nav-link" data-bs-toggle="pill" data-bs-target="#content-sidebar" type="button"><i class="bi bi-layout-sidebar"></i> Sidebar</button></li>
                <li><button class="nav-link" data-bs-toggle="pill" data-bs-target="#content-home" type="button"><i class="bi bi-house-door"></i> Home</button></li>
                <li><button class="nav-link" data-bs-toggle="pill" data-bs-target="#content-sliders" type="button"><i class="bi bi-images"></i> Sliders</button></li>
                <li><button class="nav-link" data-bs-toggle="pill" data-bs-target="#content-category" type="button"><i class="bi bi-grid-3x3-gap"></i> Category</button></li>
                <li><button class="nav-link" data-bs-toggle="pill" data-bs-target="#content-product" type="button"><i class="bi bi-box-seam"></i> Product</button></li>
                <li><button class="nav-link" data-bs-toggle="pill" data-bs-target="#content-footer" type="button"><i class="bi bi-layout-footer"></i> Footer</button></li>
                <li><button class="nav-link" data-bs-toggle="pill" data-bs-target="#content-ux" type="button"><i class="bi bi-mouse2"></i> Scroll & UX</button></li>
                <li><button class="nav-link" data-bs-toggle="pill" data-bs-target="#content-pages" type="button"><i class="bi bi-file-earmark-code"></i> Page</button></li>
                <li><button class="nav-link" data-bs-toggle="pill" data-bs-target="#content-css" type="button"><i class="bi bi-code-slash"></i> CSS</button></li>
            </ul>
        </div>

        {{-- Main Content --}}
        <div class="col-lg-9 col-xl-10 designer-content">
            <div class="tab-content" id="v-pills-tabContent">
                <div class="tab-pane fade show active" id="content-theme" role="tabpanel">
                    @include('designer.partials.theme')
                </div>
                <div class="tab-pane fade" id="content-header" role="tabpanel">
                    @include('designer.partials.header_nav')
                </div>
                <div class="tab-pane fade" id="content-sidebar" role="tabpanel">
                    @include('designer.partials.sidebar')
                </div>
                <div class="tab-pane fade" id="content-home" role="tabpanel">
                    @include('designer.partials.home_sections')
                </div>
                <div class="tab-pane fade" id="content-sliders" role="tabpanel">
                    @include('designer.partials.slider_banner')
                </div>
                <div class="tab-pane fade" id="content-category" role="tabpanel">
                    @include('designer.partials.category_design')
                </div>
                <div class="tab-pane fade" id="content-product" role="tabpanel">
                    @include('designer.partials.product_design')
                </div>
                <div class="tab-pane fade" id="content-footer" role="tabpanel">
                    @include('designer.partials.footer_builder')
                </div>
                <div class="tab-pane fade" id="content-ux" role="tabpanel">
                    @include('designer.partials.scroll_ux')
                </div>
                <div class="tab-pane fade" id="content-pages" role="tabpanel">
                    @include('designer.partials.page_design')
                </div>
                <div class="tab-pane fade" id="content-css" role="tabpanel">
                    @include('designer.partials.css_manager')
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Sync mobile and desktop navigation
    const mobileNavLinks = document.querySelectorAll('.mobile-nav-list .nav-link');
    const desktopNavLinks = document.querySelectorAll('#v-pills-tab .nav-link');
    
    // When mobile nav is clicked, update desktop nav
    mobileNavLinks.forEach((link, index) => {
        link.addEventListener('click', function() {
            // Remove active from all mobile links
            mobileNavLinks.forEach(l => l.classList.remove('active'));
            // Add active to clicked link
            this.classList.add('active');
            
            // Sync with desktop
            desktopNavLinks.forEach(l => l.classList.remove('active'));
            if (desktopNavLinks[index]) {
                desktopNavLinks[index].classList.add('active');
            }
        });
    });
    
    // When desktop nav is clicked, update mobile nav
    desktopNavLinks.forEach((link, index) => {
        link.addEventListener('click', function() {
            // Remove active from all desktop links
            desktopNavLinks.forEach(l => l.classList.remove('active'));
            // Add active to clicked link
            this.classList.add('active');
            
            // Sync with mobile
            mobileNavLinks.forEach(l => l.classList.remove('active'));
            if (mobileNavLinks[index]) {
                mobileNavLinks[index].classList.add('active');
            }
        });
    });
});
</script>
@endpush