@extends('backend.layouts.app')
@push('style')
    <style>
        /* Scroll-friendly nav tabs */
        .nav-tabs.nav-tabs-scroll {
            overflow-x: auto;
            flex-wrap: nowrap;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .nav-tabs.nav-tabs-scroll::-webkit-scrollbar {
            display: none;
        }

        .nav-tabs .nav-link {
            background: #f8f9fa;
            border: none;
            margin-right: 0.5rem;
            border-radius: 30px;
            padding: 10px 20px;
            color: #333;
            transition: all 0.3s ease;
            white-space: nowrap;
            font-weight: 500;
        }

        .nav-tabs .nav-link:hover {
            background-color: #e4e4e4;
            color: #000;
        }

        .nav-tabs .nav-link.active {
            background: linear-gradient(135deg, #4599cd, #267bbd);
            ;
            color: #fff;
            font-weight: 600;
            box-shadow: 0 3px 10px rgba(121, 54, 245, 0.3);
        }

        .card {
            /*   border-radius: 16px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); */
        }

        .tab-content .tab-pane {
            padding-top: 1rem;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Responsive touch improvement for smaller devices */
        @media (max-width: 576px) {
            .nav-tabs .nav-link {
                padding: 8px 14px;
                font-size: 14px;
            }
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-body">
            <ul class="nav nav-tabs nav-tabs-scroll mb-3 border-bottom" role="tablist" style="padding-bottom:5px;">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button"
                        role="tab">Home</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="slider-tab" data-bs-toggle="tab" data-bs-target="#slider" type="button"
                        role="tab">Slider</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="about-tab" data-bs-toggle="tab" data-bs-target="#about" type="button"
                        role="tab">About Us</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="project-tab" data-bs-toggle="tab" data-bs-target="#project" type="button"
                        role="tab">Project</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="event-tab" data-bs-toggle="tab" data-bs-target="#event" type="button"
                        role="tab">Event</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="blog-tab" data-bs-toggle="tab" data-bs-target="#blog" type="button"
                        role="tab">News/Blog</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="team-tab" data-bs-toggle="tab" data-bs-target="#team" type="button"
                        role="tab">Team</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="feature-tab" data-bs-toggle="tab" data-bs-target="#feature" type="button"
                        role="tab">Feature</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button"
                        role="tab">Contact Us</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="news-tab" data-bs-toggle="tab" data-bs-target="#social" type="button"
                        role="tab">Social</button>
                </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane fade show active" id="home" role="tabpanel">
                    @include('backend.page_setting.home')
                </div>
                <div class="tab-pane fade" id="about" role="tabpanel">
                    @include('backend.page_setting.about_us')
                </div>
                <div class="tab-pane fade" id="project" role="tabpanel">
                    @include('backend.page_setting.project')
                </div>
                <div class="tab-pane fade" id="event" role="tabpanel">
                    @include('backend.page_setting.event')
                </div>
                <div class="tab-pane fade" id="blog" role="tabpanel">
                    @include('backend.page_setting.blog')
                </div>
                <div class="tab-pane fade" id="feature" role="tabpanel">
                    @include('backend.page_setting.feature')
                </div>
                <div class="tab-pane fade" id="contact" role="tabpanel">
                    @include('backend.page_setting.contact')
                </div>
                <div class="tab-pane fade" id="social" role="tabpanel">
                    @include('backend.page_setting.social')
                </div>
                <div class="tab-pane fade" id="slider" role="tabpanel">
                    @include('backend.page_setting.slider')
                </div>
                <div class="tab-pane fade" id="team" role="tabpanel">
                    @include('backend.page_setting.team')
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function() {
            $('.imageInput').change(function() {
                const file = this.files[0];
                const $container = $(this).closest('.cover'); // or a more specific wrapper if needed
                const $preview = $container.find('.imagePreview');

                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $preview.attr('src', e.target.result).show();
                    };
                    reader.readAsDataURL(file);
                } else {
                    $preview.hide();
                }
            });
        });
    </script>
@endpush