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


<head>
    <!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">

<!-- jQuery + DataTables JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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>

<!-- PDF export support -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

<!-- Excel export support -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>



    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="{{ asset('fevicon.png') }}">

    <title>Complaint Cell</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">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <style>
        /* Layout Styles */
        .khan-motors-layout .layout-wrapper {
            display: flex;
            height: 100vh;
            overflow: hidden;
        }

        .khan-motors-layout .layout-container {
            display: flex;
            flex: 1;
            overflow: hidden;
            position: relative;
        }

        /* Sidebar */
        .khan-motors-layout #sidebar-wrapper {
            width: 250px;
            background-color: #343a40;
            transition: width .3s ease, transform .3s ease;
            height: 100vh;              /* Full height */
            overflow-y: auto;           /* Enable vertical scrolling */
            overflow-x: hidden;         /* Prevent horizontal scroll */
            flex-shrink: 0;
        }

        .khan-motors-layout .sidebar-heading {
            text-align: center;
            padding: 1rem;
            font-size: 1.3rem;
            font-weight: bold;
            border-radius: 25px;
            color: white;
            height: 39px;
            width: 252px;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
        }

        .khan-motors-layout .list-group-item {
            background-color: #343a40;
            color: white;
            border: none;
            height: 60px;
            padding-top: 15px;
            font-weight: bold;
        }

        .khan-motors-layout .list-group-item:hover {
            background-color: #1bb250;
            color: black;
        }

        /* Collapsed sidebar (desktop toggle) */
        .khan-motors-layout .layout-container.toggled #sidebar-wrapper {
            width: 50px;
        }

        .khan-motors-layout .layout-container.toggled #sidebar-wrapper .text {
            display: none;
        }

        .khan-motors-layout .layout-container.toggled .sidebar-heading {
            font-size: 0;
        }

        /* Page Content */
        .khan-motors-layout .layout-page {
            flex: 1;
            overflow-y: auto;
            background-color: #f8f9fa;
            min-width: 0; /* allow content to shrink instead of overflowing */
        }

        .khan-motors-layout .content-wrapper {
            padding: 2rem;
        }

        /* Navbar */
        .khan-motors-layout .navbar {
            background: #fff;
            height: 55px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .khan-motors-layout .navbar h6 {
            padding-left: 120px;
        }

        /* Backdrop for mobile off-canvas sidebar */
        .khan-motors-layout .sidebar-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.5);
            z-index: 1039;
        }

        .khan-motors-layout .sidebar-close-btn {
            display: none;
            color: white;
            background: transparent;
            border: none;
            font-size: 1.4rem;
            padding: .25rem .5rem;
        }

        /* ---------------- Mobile / tablet: off-canvas sidebar ---------------- */
        @media (max-width: 991.98px) {
            .khan-motors-layout .navbar h6 {
                padding-left: 0;
                font-size: .95rem;
                white-space: normal;
            }
        }

        @media (max-width: 767.98px) {
            .khan-motors-layout #sidebar-wrapper {
                position: fixed;
                top: 0;
                left: 0;
                width: 250px;
                max-width: 80vw;
                transform: translateX(-100%);
                z-index: 1040;
                box-shadow: 4px 0 12px rgba(0,0,0,.25);
            }

            .khan-motors-layout .layout-container.toggled #sidebar-wrapper {
                width: 250px;
                max-width: 80vw;
                transform: translateX(0);
            }

            .khan-motors-layout .layout-container.toggled #sidebar-wrapper .text {
                display: inline;
            }

            .khan-motors-layout .layout-container.toggled .sidebar-heading {
                font-size: 1.3rem;
            }

            .khan-motors-layout .layout-container.toggled .sidebar-backdrop {
                display: block;
            }

            .khan-motors-layout .sidebar-close-btn {
                display: inline-block;
            }

            .khan-motors-layout .content-wrapper {
                padding: 1rem;
            }

            .khan-motors-layout .navbar {
                height: auto;
                min-height: 55px;
                flex-wrap: wrap;
                padding-top: .5rem;
                padding-bottom: .5rem;
            }

            .khan-motors-layout .navbar .navbar-nav {
                margin-top: .5rem;
                width: 100%;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }
        }
    </style>
</head>

<body class="khan-motors-layout">

    <div class="layout-wrapper">
        <div class="layout-container" id="layoutContainer">

            <!-- Backdrop (mobile only) -->
            <div class="sidebar-backdrop" id="sidebarBackdrop"></div>

            <!-- Sidebar -->
            <div id="sidebar-wrapper">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="sidebar-heading text-warning flex-grow-1">Complaint Cell - 1992</div>
                    <button type="button" class="sidebar-close-btn" id="sidebarClose" aria-label="Close menu">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
                <hr style=" border-color: white; border-weight: bold;">
                <div class="list-group list-group-flush">
                    <a href="{{ route('dashboard') }}" class="list-group-item list-group-item-action">
                        <i class="bi bi-speedometer2"></i> <span class="text"> Dashboard</span>
                    </a>


                    <a href="{{ route('complaint.create') }}" class="list-group-item list-group-item-action">
                        <i class="bi bi-headset"></i>
                        <span class="text"> Complaint Form</span>
                    </a>



                    <a href="{{ route('complaint.index') }}" class="list-group-item list-group-item-action">
                        <i class="bi bi-file-earmark-text"></i>
                        <span class="text">Complaints</span>
                    </a>

                    <a href="{{ route('complaint.export.view') }}" class="list-group-item list-group-item-action">
                    <i class="bi bi-file-earmark-excel"></i>
                        <span class="text">
                            Export Report
                        </span>
                    </a>

                    @if(auth()->user()->is_admin == 0)

                    @else
                    <a href="{{ route('users.index') }}" class="list-group-item list-group-item-action">
                        <i class="bi bi-people"></i> <span class="text">Users</span>
                    </a>
                    @endif
                </div>
            </div>
            <!-- End Sidebar -->

            <!-- Page -->
            <div class="layout-page">
                <!-- Navbar -->
                <nav class="navbar navbar-expand-lg navbar-dark bg-dark px-3">
                    <button class="btn btn-outline-light me-3" id="menu-toggle">
                        <i class="bi bi-list"></i>
                    </button>

                    <div class="collapse navbar-collapse">
                            <h6 class="display-12 fw-bold text-uppercase mb-0" style="letter-spacing: 1px; color: #6ebd7c;">
                                Home & Tribal Affair's Department KP Complaint Cell
                            </h6>
                        <ul class="navbar-nav ms-auto align-items-center">
                            <li class="nav-item">
                                <a class="nav-link" style="color: white;" href="#">Welcome, {{ Auth::user()->name }}</a>
                            </li>
                            <li class="nav-item" style=" background: darkred ; height:40px; border-radius: 5px;">
                                <form  method="POST" action="{{ route('logout') }}">
                                    @csrf
                                    <button type="submit" class="nav-link btn btn-link" style="text-decoration: none; color: white; ">
                                        Logout
                                    </button>
                                </form>
                            </li>
                        </ul>
                    </div>

                    
                </nav>

                <!-- End Navbar -->

                <!-- Content -->
                <div class="content-wrapper">
                    @yield('content')
                </div>
            </div>
            <!-- End Page -->
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        // Sidebar Toggle
        const layoutContainer = document.getElementById('layoutContainer');
        const menuToggle = document.getElementById('menu-toggle');
        const sidebarClose = document.getElementById('sidebarClose');
        const sidebarBackdrop = document.getElementById('sidebarBackdrop');

        function toggleSidebar() {
            layoutContainer.classList.toggle('toggled');
        }

        function closeSidebar() {
            layoutContainer.classList.remove('toggled');
        }

        menuToggle.addEventListener('click', toggleSidebar);
        sidebarClose.addEventListener('click', closeSidebar);
        sidebarBackdrop.addEventListener('click', closeSidebar);

        // Close mobile sidebar automatically when a nav link is tapped
        document.querySelectorAll('#sidebar-wrapper .list-group-item').forEach(function (link) {
            link.addEventListener('click', function () {
                if (window.innerWidth <= 767.98) {
                    closeSidebar();
                }
            });
        });

        // Reset state cleanly when resizing across the mobile breakpoint
        window.addEventListener('resize', function () {
            if (window.innerWidth > 767.98) {
                sidebarBackdrop.style.display = '';
            }
        });
    </script>

</body>

</html>