<!-- resources/views/layouts/app.blade.php -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Trident Creatives</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
    @include('partials.header')

    <style>

    </style>
</head>

<body>
    <div class="d-flex">

        <!-- Sidebar -->
        <div id="sidebar" class="position-fixed d-flex flex-column">
            <div class = " text-white vh-100  d-flex flex-column w-250 gap-3">
                <div class = "bg-secondary top">
                    <div class="d-flex gap-5 align-items-center justify-content-between px-3 py-4">
                        <span class="fs-5 fw-bold w-100"><img src = "{{ asset('images/logo.png') }}"
                                class="img-fluid logo-img" style="filter: invert(1)" /></span>

                    </div>
                </div>
                <div class = "h-100 pb-4 bottom bg-secondary">
                    <nav class="nav flex-column mt-3 h-100">
                        <a class="nav-link text-white d-flex align-items-center {{ request()->routeIs('dashboard') ? 'active' : '' }}"
                            href="{{ route('dashboard') }}">
                            <i class="bi bi-house text-yellow"></i><span>Homepage</span>
                        </a>
                        <a class="nav-link text-white d-flex align-items-center" href="">
                            <i class="bi bi-info-circle text-yellow"></i><span>About</span>
                        </a>
                        <a class="nav-link text-white d-flex align-items-center justify-content-between"
                            data-bs-toggle="collapse" href="#servicesMenu" role="button" aria-expanded="false">

                            <span class="d-flex align-items-center ">
                                <i class="bi bi-bar-chart-steps text-yellow"></i>
                                Services
                            </span>

                            <i class="bi bi-chevron-down small transition"></i>
                        </a>
                        <div class="collapse  mt-1" id="servicesMenu">

                            <a class="nav-link text-white d-flex align-items-center" href="#">
                                <i class="bi bi-vector-pen me-2 text-yellow"></i> Graphic Design
                            </a>

                            <a class="nav-link text-white d-flex align-items-center" href="#">
                                <i class="bi bi-easel me-2 text-yellow"></i>Exhibit Design
                            </a>

                            <a class="nav-link text-white d-flex align-items-center" href="#">
                                <i class="bi bi-camera me-2 text-yellow"></i> Photography
                            </a>

                            <a class="nav-link text-white d-flex align-items-center" href="#">
                                <i class="bi bi-cpu me-2 text-yellow"></i> 3D Printing
                            </a>

                            <a class="nav-link text-white d-flex align-items-center" href="#">
                                <i class="bi bi-brush me-2 text-yellow"></i> Illustrations
                            </a>

                            <a class="nav-link text-white d-flex align-items-center" href="#">
                                <i class="bi bi-hammer me-2 text-yellow"></i> Woodwork
                            </a>

                        </div>
                        <a class="nav-link text-white d-flex align-items-center" href="">
                            <i class="bi bi-briefcase text-yellow"></i><span>Work</span>
                        </a>


                        <div class = "mt-auto mb-3 px-3">
                            <button type="submit" onclick="visit_website()"
                                class="btn visit-site fw-semibold w-100 d-flex align-items-center justify-content-center text-white mb-2">
                                <i class="bi bi-globe me-2"></i> <span>Visit Site</span>
                            </button>
                            <form action="{{ route('logout') }}" method="POST" class="">
                                @csrf
                                <button type="submit"
                                    class="btn btn-warning fw-semibold w-100 d-flex align-items-center justify-content-center text-white">
                                    <i class="bi bi-box-arrow-right me-2"></i> <span>Logout</span>
                                </button>
                            </form>
                        </div>

                    </nav>
                </div>

            </div>
        </div>

        <!-- Main Content -->
        <div id="main-content" class="flex-grow-1 px-2 py-3 bg-body">
            <!-- Navbar -->
            <nav class="navbar navbar-expand bg-white bg-light shadow-sm p-3 rounded-3">
                <div class="ms-auto navigation_end">
                    <div class="d-flex gap-4 align-items-center">
                        <div class="d-flex align-items-center gap-3">
                            <div class="">
                                <img src="{{ asset('images/user.png') }}" alt="" class="img-fluid">
                            </div>
                            <div>
                                <h3 class="text-uppercase mb-0"><span>{{ Auth::user()->name ?? 'Admin' }}</span></h3>
                                <p class = "mb-0"> <span>{{ Auth::user()->email ?? 'Admin' }}</span></p>
                            </div>
                        </div>
                    </div>

                </div>
            </nav>

            <!-- Dynamic Content -->
            <div class="px-2 py-5 overflow-x-hidden" style="height: calc(100vh - 56px);">
                @yield('content')
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const toggleBtn = document.getElementById('sidebarToggle');
        const sidebar = document.getElementById('sidebar');
        const mainContent = document.getElementById('main-content');

        toggleBtn.addEventListener('click', () => {
            sidebar.classList.toggle('collapsed');
            mainContent.classList.toggle('collapsed');
        });
    </script>
    <script>
        function visit_website() {
            let loc = 'https://tridentmedia-nine.vercel.app/';
            window.open(loc, '_blank');
        }
    </script>
    @stack('scripts')
</body>

</html>
