{{-- resources/views/layouts/app.blade.php --}}
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Accounting System') }}</title>

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

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <style>
        .btn-outline-secondary {
                color: #fff;
                 border-color: #fff;
        }
       .btn-outline-secondary:hover {
              color: #0061ff; /* or the gradient start color */
               background-color: #fff;
               border-color: #fff;
        }
        body {
            overflow-x: hidden;
        }

        .sidebar {
            width: 300px;
            min-height: 100vh;
            transition: all 0.3s ease;
        }

        .sidebar.collapsed {
            width: 80px;
        }

        .sidebar h4,
        .sidebar hr {
            transition: 0.3s;
        }

        .sidebar.collapsed h4,
        .sidebar.collapsed hr {
            display: none;
        }

        .sidebar .nav-link {
            color: #ffffff;
            padding: 0.8rem 1rem;
            margin: 0.2rem 0;
            border-radius: 0.25rem;
            display: flex;
            align-items: center;
            transition: 0.3s;
        }

        .sidebar .nav-link i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }

        .sidebar.collapsed .nav-link {
            font-size: 0;
            justify-content: center;
        }

        .sidebar.collapsed .nav-link i {
            font-size: 1.5rem;
            margin-right: 0;
            width: auto;
        }

        .main-content {
            flex-grow: 1;
            background-color: #f8f9fa;
            min-height: 100vh;
            transition: 0.3s;
        }

        .layout-wrapper {
            display: flex;
        }
        .sidebar {
            min-height: 100vh;
            background: linear-gradient(180deg, #1a50c4 20%, #05124b 60%);
        }
        .sidebar .nav-link {
            color: #ecf0f1;
            padding: 0.8rem 1rem;
            margin: 0.2rem 0;
            border-radius: 0.25rem;
        }
        .sidebar .nav-link:hover {
            background-color: #ffffff7a;
            color: rgb(4, 15, 114);
        }
        .sidebar .nav-link.active {
            background-color: #ffffff;
            color: rgb(6, 1, 68);
        }
        .sidebar .nav-link i {
            margin-right: 0.5rem;
        }
        .main-content {
            background-color: #f8f9fa;
            min-height: 100vh;
        }
        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 1.5rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        .stat-icon {
            font-size: 2rem;
            color: #3498db;
        }
        .filter-section {
            background: white;
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1.5rem;
        }
     .sidebar nav .nav {               /* more specific selector */
    border-radius: 50px !important;
}



/* Dropdown menu - blue notification theme */
.dropdown-menu {
    background-color: #afd1fa;                /* Info background */
    color: #1e3a8a;                            /* Info text color */
    border: none;                               /* Remove default border */
    border-radius: 6px;                         /* Match notification items */
    box-shadow: rgba(111, 111, 111, 0.2) 0px 8px 24px;
    --grid-color: rgba(59, 131, 246, 0.25);    /* Subtle blue grid lines */
    background-image:
        linear-gradient(
            0deg,
            transparent 23%,
            var(--grid-color) 24%,
            var(--grid-color) 25%,
            transparent 26%,
            transparent 73%,
            var(--grid-color) 74%,
            var(--grid-color) 75%,
            transparent 76%,
            transparent
        ),
        linear-gradient(
            90deg,
            transparent 23%,
            var(--grid-color) 24%,
            var(--grid-color) 25%,
            transparent 26%,
            transparent 73%,
            var(--grid-color) 74%,
            var(--grid-color) 75%,
            transparent 76%,
            transparent
        );
    background-size: 55px 55px;
}

/* Dropdown items */
.dropdown-item {
    color: #1e3a8a;
    background-color: transparent;
    transition: all 250ms ease;
    padding: 10px 15px;                         /* Match notification padding */
    font-size: 15px;                           /* Match --font-size-content */
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #5ba5ff;                  /* Hover state from .info:hover */
    color: #1e3a8a;
    transform: scale(1.01);
}

.dropdown-item:active {
    transform: scale(1.05);
}

/* Icons inside dropdown items (FontAwesome) */
.dropdown-item i {
    color: #1e3a8a;
    width: 1em;                                   /* Match --icon-size */
    height: 1em;
    margin-right: 0.25em;
    transition: 250ms ease;
}

/* Divider between items */
.dropdown-divider {
    border-top: 1px solid #1e3a8a;
    opacity: 0.3;
    margin: 0.5em 0;
}

/* Logout button (keeps red, but you can override if desired) */
.dropdown-item.text-danger {
    color: #7f1d1d !important;                    /* Default red from .error */
    /* To change to a blue shade, replace with color: #1e3a8a !important; */
}

.dropdown-item.text-danger:hover {
    background-color: #ff5f5f !important;         /* Default error hover */
    /* For blue hover, use background-color: #5ba5ff !important; */
}

/* Spin animation keyframes (already provided) */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Make the cog icon spin on hover */
.dropdown-item[href*="settings"]:hover i.fa-cog {
  animation: spin 1s linear infinite;
}

    </style>
</head>
<body>

 <div class="container-fluid">
        <div class="row">
            <!-- Sidebar -->
            <nav id="sidebar" class="col-md-2 d-md-block sidebar p-0">
                <div class="p-3 text-white">
                    <h4 class="text-center mb-4">Accounting System</h4>
                    <hr class="bg-white">
                </div>

                <div class="nav flex-column px-2">
                    <a class="nav-link {{ request()->routeIs('dashboard') ? 'active' : '' }}"
                       href="{{ route('dashboard') }}">
                        <i class="fas fa-tachometer-alt"></i> Dashboard
                    </a>



                    <div class="nav-item">
                        <span class="nav-link text-white-50"><i class="fas fa-wallet"></i> Accounts</span>
                        <div class="ms-3">
                             @if(auth()->check() && (auth()->user()->isSuperAdmin() || auth()->user()->hasPermission('view_bank_accounts')))
                                <a class="nav-link {{ request()->routeIs('accounts*') ? 'active' : '' }}"
                                   href="{{ route('accounts.all') }}">
                                    <i class="fas fa-list"></i> All Accounts
                                </a>
                            @endif
                            {{-- Bank Accounts Section
                            @if(auth()->check() && (auth()->user()->isSuperAdmin() || auth()->user()->hasPermission('view_bank_accounts')))
                                <a class="nav-link {{ request()->routeIs('bank-accounts*') ? 'active' : '' }}"
                                   href="{{ route('bank-accounts.index') }}">
                                    <i class="fas fa-university"></i> Bank Accounts
                                </a>
                            @endif--}}

                            {{-- Digital Payments Section
                            @if(auth()->check() && (auth()->user()->isSuperAdmin() || auth()->user()->hasPermission('view_digital_payments')))
                                <a class="nav-link {{ request()->routeIs('digital-payments*') ? 'active' : '' }}"
                                   href="{{ route('digital-payments.index') }}">
                                    <i class="fas fa-mobile-alt"></i> Digital Payments
                                </a>
                            @endif--}}

                            {{-- Cash Section
                            @if(auth()->check() && (auth()->user()->isSuperAdmin() || auth()->user()->hasPermission('view_transactions')))
                                <a class="nav-link {{ request()->routeIs('cash*') ? 'active' : '' }}"
                                   href="{{ route('cash.index') }}">
                                    <i class="fas fa-money-bill"></i> Cash
                                </a>
                            @endif--}}


                        </div>
                    </div>

                    <div class="nav-item">
                        <span class="nav-link text-white-50"><i class="fas fa-exchange-alt"></i> Transactions</span>
                        <div class="ms-3">
                            @if(auth()->check() && (auth()->user()->isSuperAdmin() || auth()->user()->hasPermission('view_transactions')))
                                <a class="nav-link {{ request()->routeIs('transactions*') ? 'active' : '' }}"
                                   href="{{ route('transactions.index') }}">
                                    <i class="fas fa-list"></i> All Transactions
                                </a>
                            @endif

                            @if(auth()->check() && (auth()->user()->isSuperAdmin() || auth()->user()->hasPermission('view_expenses')))
                                <a class="nav-link {{ request()->routeIs('expense-types*') ? 'active' : '' }}"
                                   href="{{ route('expense-types.index') }}">
                                    <i class="fas fa-minus-circle"></i> Expenses type
                                </a>

                                <a class="nav-link {{ request()->routeIs('particulars.*') ? 'active' : '' }}"
                                   href="{{ route('particulars.index') }}">
                                    <i class="fas fa-list-alt"></i> Particulars
                                </a>

                                <a class="nav-link {{ request()->routeIs('expenses*') ? 'active' : '' }}"
                                   href="{{ route('expenses.index') }}">
                                    <i class="fas fa-minus-circle"></i> Expenses
                                </a>
                            @endif

                            @if(auth()->check() && (auth()->user()->isSuperAdmin() || auth()->user()->hasPermission('view_invoices')))
                                <a class="nav-link {{ request()->routeIs('invoices*') ? 'active' : '' }}"
                                   href="{{ route('invoices.index') }}">
                                    <i class="fas fa-file-invoice"></i> Invoices
                                </a>

                                <a class="nav-link {{ request()->routeIs('quotations*') ? 'active' : '' }}"
                                   href="{{ route('quotations.index') }}">
                                    <i class="fas fa-file-contract"></i> Quotations
                                </a>
                            @endif

                            <a class="nav-link {{ request()->routeIs('segments*') ? 'active' : '' }}"
                               href="{{ route('segments.index') }}">
                                <i class="fas fa-file-invoice"></i> Segments
                            </a>

                        </div>
                    </div>

                    <div class="nav-item">
                        <span class="nav-link text-white-50"><i class="fas fa-box"></i> Products</span>
                        <div class="ms-3">
                            @if(auth()->check() && (auth()->user()->isSuperAdmin() || auth()->user()->hasPermission('view_products')))
                                <a class="nav-link {{ request()->routeIs('products*') ? 'active' : '' }}"
                                   href="{{ route('products.index') }}">
                                    <i class="fas fa-cube"></i> Products
                                </a>
                            @endif

                            @if(auth()->check() && (auth()->user()->isSuperAdmin() || auth()->user()->hasPermission('view_stock')))
                                <a class="nav-link {{ request()->routeIs('stock*') ? 'active' : '' }}"
                                   href="{{ route('stock.index') }}">
                                    <i class="fas fa-warehouse"></i> Stock
                                </a>
                            @endif
                        </div>
                    </div>

                    <div class="nav-item">
                        <span class="nav-link text-white-50"><i class="fas fa-chart-bar"></i> Reports</span>
                        <div class="ms-3">
                            @if(auth()->check() && (auth()->user()->isSuperAdmin() || auth()->user()->hasPermission('view_reports')))
                                <a class="nav-link {{ request()->routeIs('reports.profit-loss') ? 'active' : '' }}"
                                   href="{{ route('reports.profit-loss') }}">
                                    <i class="fas fa-chart-line"></i> P&L
                                </a>
                                <a class="nav-link {{ request()->routeIs('reports.balance-sheet') ? 'active' : '' }}"
                                   href="{{ route('reports.balance-sheet') }}">
                                    <i class="fas fa-balance-scale"></i> Balance Sheet
                                </a>
                                <a class="nav-link {{ request()->routeIs('reports.cash-book') ? 'active' : '' }}"
                                   href="{{ route('reports.cash-book') }}">
                                    <i class="fas fa-book"></i> Cash Book
                                </a>
                                <a class="nav-link {{ request()->routeIs('reports.bank-book') ? 'active' : '' }}"
                                   href="{{ route('reports.bank-book') }}">
                                    <i class="fas fa-book-open"></i> Bank Book
                                </a>
                                <a class="nav-link {{ request()->routeIs('reports.sales') ? 'active' : '' }}"
                                   href="{{ route('reports.sales') }}">
                                    <i class="fas fa-chart-pie"></i> Sales Report
                                </a>
                                <a class="nav-link {{ request()->routeIs('sales-dashboard*') ? 'active' : '' }}"
                                   href="{{ route('sales-dashboard.index') }}">
                                    <i class="fas fa-chart-pie"></i> Sales Dashboard
                                </a>
                            @endif
                        </div>
                    </div>

                    <hr class="bg-white">

                     {{--@auth
                        @if(auth()->user()->isSuperAdmin())
                            <div class="nav-item">
                                <span class="nav-link text-white-50"><i class="fas fa-shield-alt"></i> Admin Management</span>
                                <div class="ms-3">
                                    <a class="nav-link {{ request()->routeIs('super-admin.admins') ? 'active' : '' }}"
                                       href="{{ route('super-admin.admins') }}">
                                        <i class="fas fa-users-cog"></i> Manage Admins
                                    </a>
                                         @auth
                                              @if(auth()->user()->isAdmin() || auth()->user()->isSuperAdmin())
                                                        @if(auth()->user()->isSuperAdmin() || auth()->user()->hasPermission('view_customers'))
                                                     <a class="nav-link {{ request()->routeIs('admin.users*') ? 'active' : '' }}"
                                                           href="{{ route('admin.users') }}">
                                                             <i class="fas fa-users"></i> Users
                                                     </a>
                                                      @endif
                                             @endif
                                          @endauth--}}
                                       {{-- Customers/Clients Section --}}
                                          {{-- @if(auth()->check() && (auth()->user()->isSuperAdmin() || auth()->user()->hasPermission('view_customers')))
                                            <a class="nav-link {{ request()->routeIs('customers*') ? 'active' : '' }}"
                                                 href="{{ route('customers.index') }}">
                                              <i class="fas fa-user"></i> Clients
                                            </a>
                                          @endif
                                    <a class="nav-link {{ request()->routeIs('super-admin.permissions') ? 'active' : '' }}"
                                       href="{{ route('super-admin.permissions') }}">
                                        <i class="fas fa-lock"></i> Permissions
                                    </a>
                                    <a class="nav-link {{ request()->routeIs('super-admin.activity-logs*') ? 'active' : '' }}"
                                       href="{{ route('super-admin.activity-logs.index') }}">
                                        <i class="fas fa-history"></i> Activity History
                                    </a>
                                    <a class="nav-link {{ request()->routeIs('super-admin.activity-logs.transactions') ? 'active' : '' }}"
                                       href="{{ route('super-admin.activity-logs.transactions') }}">
                                        <i class="fas fa-exchange-alt"></i> Transaction History
                                    </a>
                                    <a class="nav-link {{ request()->routeIs('super-admin.statistics') ? 'active' : '' }}"
                                       href="{{ route('super-admin.statistics') }}">
                                        <i class="fas fa-chart-bar"></i> Statistics
                                    </a>
                                </div>
                            </div>

                            <hr class="bg-white">
                        @endif
                    @endauth--}}

                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="nav-link text-danger bg-transparent border-0 w-100 text-start">
                            <i class="fas fa-sign-out-alt"></i> Logout
                        </button>
                    </form>
                </div>
            </nav>



    <!-- Main Content -->
     <main class="col-md-10 main-content p-4">
                <!-- Top Navigation -->
          <nav class="navbar navbar-expand navbar-dark mb-4 shadow-sm"
     style="background: linear-gradient(135deg, #0061ff, #60a5fa); border-radius: 45px;">
                    <div class="container-fluid">
                        <div class="navbar-brand">
                      <button class="btn btn-outline-secondary" id="toggleSidebar" style="border-radius: 50%;">
                                    <i class="fas fa-bars"></i>
                        </button>
                            @yield('page-title', 'Dashboard')
                        </div>
                        <div class="navbar-nav ms-auto">
                            <div class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="userDropdown"
                                   role="button" data-bs-toggle="dropdown">
                                    <i class="fas fa-user-circle"></i>
                                    @auth
                                        {{ auth()->user()->name }}
                                    @else
                                        Guest
                                    @endauth
                                </a>
                                <div class="dropdown-menu dropdown-menu-end">
                                    @auth
                                        <a class="dropdown-item" href="{{ route('profile') }}">
                                            <i class="fas fa-user"></i> Profile
                                        </a>
                                        <a class="dropdown-item" href="{{ route('settings') }}">
                                            <i class="fas fa-cog"></i> Settings
                                        </a>
                                        <div class="dropdown-divider"></div>
                                        <form method="POST" action="{{ route('logout') }}">
                                            @csrf
                                            <button type="submit" class="dropdown-item text-danger">
                                                <i class="fas fa-sign-out-alt"></i> Logout
                                            </button>
                                        </form>
                                    @else
                                        <a class="dropdown-item" href="{{ route('login') }}">Login</a>
                                    @endauth
                                </div>
                            </div>
                        </div>
                    </div>
                </nav>

                <!-- Alert Messages -->
                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <!-- Page Content -->
                @yield('content')
            </main>
        </div>
    </div>


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

    <!-- jQuery (if needed) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Custom JS -->
    @stack('scripts')


<script>
    document.getElementById("toggleSidebar").addEventListener("click", function () {
        document.getElementById("sidebar").classList.toggle("collapsed");
    });
</script>

</body>
</html>
