@extends('admin.layouts.layouts')

@section('content')
    @push('css')
        {{-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> --}}
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    @endpush
    <br>
    <br>
    <br>
    <br>
    <div class="container">
        <nav>
            <div class="mb-3 nav nav-tabs" id="nav-tab" role="tablist">
                <button class="nav-link active" id="nav-Section-One-tab" data-bs-toggle="tab" data-bs-target="#nav-Section-One"
                    type="button" role="tab" aria-controls="Section-One" aria-selected="true">Section One</button>

                <button class="nav-link" id="nav-Section-two-tab" data-bs-toggle="tab" data-bs-target="#nav-Section-two"
                    type="button" role="tab" aria-controls="Section-two" aria-selected="false">Section Two</button>

                <button class="nav-link" id="nav-Section-Three-tab" data-bs-toggle="tab" data-bs-target="#nav-Section-Three"
                    type="button" role="tab" aria-controls="Section-Three" aria-selected="false">Section Three</button>

                <button class="nav-link" id="nav-Section-Four-tab" data-bs-toggle="tab" data-bs-target="#nav-Section-Four"
                    type="button" role="tab" aria-controls="Section-Four" aria-selected="false">Section Four</button>

                <button class="nav-link" id="nav-Section-Five-tab" data-bs-toggle="tab" data-bs-target="#nav-Section-Five"
                    type="button" role="tab" aria-controls="Section-Five" aria-selected="false">Section Five</button>

                <button class="nav-link" id="nav-Section-Six-tab" data-bs-toggle="tab" data-bs-target="#nav-Section-Six"
                    type="button" role="tab" aria-controls="Section-Six" aria-selected="false">Section Six</button>

                <button class="nav-link" id="nav-Section-Seven-tab" data-bs-toggle="tab" data-bs-target="#nav-Section-Seven"
                    type="button" role="tab" aria-controls="Section-Seven" aria-selected="false">Section Seven</button>
            </div>
            <br>
        </nav>
        <div class="p-3 border tab-content bg-light" id="nav-tabContent">
            <div class="tab-pane fade active show" id="nav-Section-One" role="tabpanel"
                aria-labelledby="nav-Section-One-tab">
                @include('admin.homepage.section_one')
            </div>

            <div class="tab-pane fade" id="nav-Section-two" role="tabpanel" aria-labelledby="nav-Section-two-tab">
                @include('admin.homepage.section_two')
            </div>

            <div class="tab-pane fade" id="nav-Section-Three" role="tabpanel" aria-labelledby="nav-Section-Three-tab">
                @include('admin.homepage.section_three')
            </div>

            <div class="tab-pane fade" id="nav-Section-Four" role="tabpanel" aria-labelledby="nav-Section-Four-tab">
                @include('admin.homepage.section_four')
            </div>

            <div class="tab-pane fade" id="nav-Section-Five" role="tabpanel" aria-labelledby="nav-Section-Five-tab">
                @include('admin.homepage.section_five')
            </div>

            <div class="tab-pane fade" id="nav-Section-Six" role="tabpanel" aria-labelledby="nav-Section-Six-tab">
                @include('admin.homepage.section_six')
            </div>

            <div class="tab-pane fade" id="nav-Section-Seven" role="tabpanel" aria-labelledby="nav-Section-Seven-tab">
                @include('admin.homepage.section_seven')
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" defer></script>
@endpush