<!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="<?php echo e(csrf_token()); ?>">
    <title><?php echo $__env->yieldContent('title', 'Dashboard'); ?> - RIYASRI SILKS</title>
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Montserrat:wght@600;700;800&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <!-- DataTables -->
    <link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <!-- SweetAlert2 -->
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.min.css" rel="stylesheet">
    
    <!-- Premium ERP Custom CSS -->
    <style>
        :root {
            --primary: #6A1B9A;
            --secondary: #8E24AA;
            --accent: #FFD54F;
            --success: #43A047;
            --danger: #E53935;
            --bg-color: #F8F5FC;
            --sidebar-bg: #FFFFFF;
            --card-bg: #FFFFFF;
            --text-main: #1A1A1A;
            --text-muted: #64748B;
            --border-light: rgba(106, 27, 154, 0.1);
            --shadow-soft: 0 8px 30px rgba(106, 27, 154, 0.06);
            --shadow-hover: 0 15px 35px rgba(106, 27, 154, 0.12);
        }

        body { 
            background-color: var(--bg-color); 
            font-family: 'Inter', sans-serif; 
            color: var(--text-main);
            overflow-x: hidden;
        }
        
        h1, h2, h3, h4, h5, h6, .brand-text, .card-number {
            font-family: 'Montserrat', sans-serif;
            font-weight: 800;
        }

        /* Topbar / Header */
        .header-custom {
            height: 70px;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(12px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.02);
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid var(--border-light);
            display: flex;
            align-items: center;
            padding: 0 30px;
        }

        /* Search Bar */
        .global-search {
            background: #F1F5F9;
            border: none;
            border-radius: 20px;
            padding: 8px 20px 8px 40px;
            font-size: 14px;
            width: 300px;
            transition: all 0.3s ease;
        }
        .global-search:focus {
            background: white;
            box-shadow: 0 0 0 3px rgba(106, 27, 154, 0.15);
            outline: none;
            width: 350px;
        }
        .search-wrapper { position: relative; }
        .search-wrapper i { position: absolute; left: 15px; top: 11px; color: #94A3B8; }

        /* Sidebar Styling */
        .sidebar { 
            width: 280px;
            min-height: 100vh; 
            background: var(--sidebar-bg); 
            padding-top: 25px; 
            box-shadow: 2px 0 20px rgba(0,0,0,0.03);
            border-right: 1px solid var(--border-light);
            z-index: 1020;
            transition: all 0.3s ease;
        }
        .brand-text { 
            font-size: 22px; 
            text-align: center; 
            margin-bottom: 40px; 
            color: var(--primary); 
            letter-spacing: -0.5px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        .brand-text i { font-size: 26px; color: var(--accent); }
        
        .sidebar-menu { padding: 0 15px; }
        .sidebar-menu a { 
            color: var(--text-muted); 
            text-decoration: none; 
            padding: 14px 20px; 
            display: flex; 
            align-items: center;
            gap: 15px;
            font-size: 14px;
            font-weight: 500;
            border-radius: 12px; 
            margin-bottom: 8px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        }
        .sidebar-menu a i { font-size: 18px; width: 24px; text-align: center; transition: all 0.3s ease; }
        
        .sidebar-menu a:hover { 
            background: rgba(106, 27, 154, 0.05); 
            color: var(--primary); 
            transform: translateX(5px);
        }
        .sidebar-menu a.active {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            box-shadow: 0 6px 15px rgba(106, 27, 154, 0.3);
            font-weight: 600;
        }
        .sidebar-menu a.active i { color: var(--accent); }

        /* Main Content */
        .main-wrapper { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
        .content { padding: 40px; animation: fadeIn 0.5s ease; }

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

        /* Cards & Glassmorphism */
        .card { 
            background: var(--card-bg);
            box-shadow: var(--shadow-soft); 
            border-radius: 16px; 
            border: 1px solid rgba(255,255,255,0.8); 
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(10px);
            margin-bottom: 24px;
        }
        .card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
        }
        .card-header {
            background: transparent !important;
            border-bottom: 1px solid var(--border-light) !important;
            padding: 24px 30px;
            font-size: 16px;
            font-weight: 700;
            color: var(--text-main);
        }
        .card-body { padding: 30px; }

        /* Premium Forms (Floating Labels & Modern Inputs) */
        .form-floating > .form-control,
        .form-floating > .form-select {
            height: calc(3.5rem + 2px);
            border-radius: 12px;
            border: 1.5px solid #CBD5E1;
            background-color: transparent;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-main);
            transition: all 0.3s ease;
        }
        .form-floating > label {
            padding: 1rem 1.2rem;
            color: var(--text-muted);
            font-weight: 500;
        }
        .form-control:focus, .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(106, 27, 154, 0.1);
            background-color: white;
        }
        
        /* Non-floating default inputs */
        .form-label { font-weight: 600; color: #475569; font-size: 13px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
        .form-control:not(.form-floating .form-control), 
        .form-select:not(.form-floating .form-select) {
            border-radius: 12px;
            border: 1.5px solid #CBD5E1;
            padding: 12px 18px;
            font-size: 14px;
            transition: all 0.3s ease;
            background-color: #FAFAFA;
        }

        .form-control[readonly] {
            background-color: #F8FAFC;
            border-color: #E2E8F0;
            color: #94A3B8;
            border-style: dashed;
        }

        /* Modern Buttons */
        .btn {
            padding: 12px 24px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s ease;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .btn-primary {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(106, 27, 154, 0.3);
        }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(106, 27, 154, 0.4); }
        
        .btn-success { background: var(--success); color: white; box-shadow: 0 4px 15px rgba(67, 160, 71, 0.3); }
        .btn-success:hover { background: #2E7D32; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(67, 160, 71, 0.4); }
        
        .btn-danger { background: var(--danger); color: white; box-shadow: 0 4px 15px rgba(229, 57, 53, 0.3); }
        
        .btn-secondary { background: #F1F5F9; color: #475569; }
        .btn-secondary:hover { background: #E2E8F0; color: #0F172A; }

        /* Modern SaaS Tables */
        .card-table-wrapper {
            background: white;
            border-radius: 16px;
            box-shadow: var(--shadow-soft);
            padding: 24px;
            margin-bottom: 24px;
            border: 1px solid var(--border-light);
        }
        .table { margin-bottom: 0; border-collapse: separate; border-spacing: 0; width: 100%; }
        .table thead th {
            background-color: transparent;
            color: #64748B;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 16px 20px;
            border-bottom: 1px solid #E2E8F0 !important;
            border-top: none;
        }
        .table tbody td {
            padding: 18px 20px;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-main);
            vertical-align: middle;
            border-bottom: 1px solid #F1F5F9;
            transition: all 0.2s ease;
        }
        .table tbody tr { transition: transform 0.2s ease, box-shadow 0.2s ease; }
        .table tbody tr:hover td { 
            background-color: #F8FAFC; 
        }
        .table tbody tr:hover {
            transform: scale(1.001);
            position: relative;
            z-index: 10;
            box-shadow: 0 4px 15px rgba(0,0,0,0.03);
        }
        
        /* Action Buttons container */
        .action-buttons {
            display: flex;
            gap: 8px;
            flex-wrap: nowrap;
            white-space: nowrap;
        }
        
        .action-btn {
            width: 32px;
            height: 32px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            transition: all 0.2s ease;
        }

        /* DataTables Customization */
        .dataTables_wrapper { padding: 10px 0; }
        div.dataTables_wrapper div.dataTables_filter { padding-bottom: 20px; }
        div.dataTables_wrapper div.dataTables_filter input {
            border-radius: 20px;
            padding: 8px 16px;
            border: 1.5px solid #CBD5E1;
            font-size: 13px;
            width: 250px;
            background: #F8FAFC;
        }
        div.dataTables_wrapper div.dataTables_filter input:focus {
            background: white;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(106, 27, 154, 0.1);
        }
        div.dataTables_wrapper div.dataTables_length select {
            border-radius: 8px;
            border: 1.5px solid #CBD5E1;
            padding: 4px 10px;
        }
        .page-item.active .page-link {
            background: var(--primary);
            border-color: var(--primary);
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(106, 27, 154, 0.3);
        }
        .page-link { color: var(--text-muted); border: none; border-radius: 8px; margin: 0 4px; font-weight: 500; }

        /* Responsive */
        @media (max-width: 991px) {
            .sidebar { transform: translateX(-100%); position: fixed; }
            .sidebar.show { transform: translateX(0); }
            .content { padding: 20px; }
            .global-search { width: 100%; }
        }
        
        /* Page Title */
        .page-title {
            font-size: 32px;
            color: var(--text-main);
            margin-bottom: 30px;
            letter-spacing: -0.5px;
        }
    </style>
    <?php echo $__env->yieldPushContent('styles'); ?>
</head>
<body>
    <div class="d-flex">
        <!-- Sidebar -->
        <div class="sidebar flex-shrink-0" id="sidebar">
            <div class="brand-text">
                <i class="fas fa-gem"></i> <span>RIYASRI SILKS</span>
            </div>
            <div class="sidebar-menu">
                <a href="<?php echo e(route('dashboard')); ?>" class="<?php echo e(request()->routeIs('dashboard') ? 'active' : ''); ?>">
                    <i class="fas fa-layer-group"></i> Dashboard
                </a>
                <a href="<?php echo e(route('customers.index')); ?>" class="<?php echo e(request()->routeIs('customers.*') ? 'active' : ''); ?>">
                    <i class="fas fa-users"></i> Customers
                </a>
                <a href="<?php echo e(route('invoices.index')); ?>" class="<?php echo e(request()->routeIs('invoices.*') ? 'active' : ''); ?>">
                    <i class="fas fa-file-invoice"></i> Invoices
                </a>
                <a href="<?php echo e(route('reports.sales')); ?>" class="<?php echo e(request()->routeIs('reports.sales') ? 'active' : ''); ?>">
                    <i class="fas fa-chart-line"></i> Sales Report
                </a>
                <a href="<?php echo e(route('reports.customers')); ?>" class="<?php echo e(request()->routeIs('reports.customers') ? 'active' : ''); ?>">
                    <i class="fas fa-address-card"></i> Customer Report
                </a>
            </div>
        </div>

        <!-- Main Content -->
        <div class="main-wrapper">
            <!-- Header -->
            <header class="header-custom d-flex justify-content-between">
                <div class="d-flex align-items-center gap-3">
                    <button class="btn btn-light d-lg-none" id="sidebarToggle"><i class="fas fa-bars"></i></button>
                    <div class="search-wrapper d-none d-md-block">
                        <i class="fas fa-search"></i>
                        <input type="text" class="global-search" placeholder="Search customers, invoices...">
                    </div>
                </div>
                <div class="d-flex align-items-center gap-4">
                    <div class="position-relative cursor-pointer">
                        <i class="fas fa-bell fs-5 text-muted"></i>
                        <span class="position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle"></span>
                    </div>
                    <div class="dropdown">
                        <button class="btn btn-light dropdown-toggle d-flex align-items-center gap-2 rounded-pill px-3" type="button" data-bs-toggle="dropdown">
                            <img src="https://ui-avatars.com/api/?name=<?php echo e(urlencode(Auth::user()->name ?? 'Admin')); ?>&background=6A1B9A&color=fff" class="rounded-circle" width="30" alt="Profile">
                            <span class="fw-semibold"><?php echo e(Auth::user()->name ?? 'Admin'); ?></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0 mt-2 rounded-3">
                            <li><a class="dropdown-item py-2" href="<?php echo e(route('profile.index')); ?>"><i class="fas fa-user-circle me-2 text-muted"></i> My Profile</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <form action="<?php echo e(route('logout')); ?>" method="POST">
                                    <?php echo csrf_field(); ?>
                                    <button class="dropdown-item py-2 text-danger"><i class="fas fa-sign-out-alt me-2"></i> Logout</button>
                                </form>
                            </li>
                        </ul>
                    </div>
                </div>
            </header>

            <div class="content">
                <?php if(session('success')): ?>
                    <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm" role="alert" style="border-radius: 12px;">
                        <i class="fas fa-check-circle me-2"></i> <?php echo e(session('success')); ?>

                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                <?php endif; ?>
                
                <?php echo $__env->yieldContent('content'); ?>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
    <!-- DataTables Buttons -->
    <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.bootstrap5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.all.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

        // Sidebar Toggle
        $('#sidebarToggle').click(function() {
            $('#sidebar').toggleClass('show');
        });

        // Enter acts as Tab
        $(document).on('keydown', 'input, select', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                var form = $(this).closest('form');
                if (form.length === 0) form = $('body');
                var focusable = form.find('input, select, textarea, button').filter(':visible:not([readonly]):not([disabled])');
                var next = focusable.eq(focusable.index(this) + 1);
                if (next.length) { next.focus(); } 
                else if ($(this).closest('form').length) { $(this).closest('form').submit(); }
            }
        });
    </script>
    <?php echo $__env->yieldPushContent('scripts'); ?>
</body>
</html>
<?php /**PATH E:\xampp\htdocs\riya\resources\views/layouts/app.blade.php ENDPATH**/ ?>