<?php
session_start();
if (!isset($_SESSION['type'])) {
    header("Location: logout.php");
    exit();
}
require_once 'database/shikanisha.kts.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shikanisha | Sales & Inventory</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #6c5ce7;
            --secondary-color: #a29bfe;
            --dark-color: #2d3436;
            --light-color: #f5f6fa;
            --success-color: #00b894;
            --danger-color: #d63031;
            --warning-color: #fdcb6e;
            --info-color: #0984e3;
            --glass-blur: blur(16px);
            --glass-opacity: 0.25;
        }
        
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            background-attachment: fixed;
            color: var(--light-color);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
        }
        
        .glass-card {
            background: rgba(255, 255, 255, var(--glass-opacity));
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            color: var(--dark-color);
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .glass-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5);
        }
        
        .sidebar {
            min-height: 100vh;
            background: rgba(45, 52, 54, 0.7);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            padding: 0;
        }
        
        .sidebar-header {
            padding: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .sidebar .nav-link {
            color: rgba(255, 255, 255, 0.8);
            padding: 12px 20px;
            margin: 4px 10px;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .sidebar .nav-link:hover, .sidebar .nav-link.active {
            color: white;
            background: rgba(255, 255, 255, 0.2);
            transform: translateX(5px);
        }
        
        .sidebar .nav-link i {
            margin-right: 10px;
            font-size: 1.1rem;
        }
        
        .main-content {
            padding: 20px;
        }
        
        .page-header {
            margin-bottom: 30px;
            position: relative;
        }
        
        .page-header h2 {
            font-weight: 600;
            position: relative;
            display: inline-block;
        }
        
        .page-header h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 60px;
            height: 4px;
            background: var(--primary-color);
            border-radius: 2px;
        }
        
        .filter-section {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 30px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .form-control, .form-select {
            background: rgba(255, 255, 255, 0.9);
            border: none;
            border-radius: 8px;
            padding: 10px 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .form-control:focus, .form-select:focus {
            background: rgba(255, 255, 255, 1);
            box-shadow: 0 0 0 0.25rem rgba(108, 92, 231, 0.25);
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            border: none;
            border-radius: 8px;
            padding: 10px 20px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            background-color: #5649c5;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
        }
        
        .table {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 12px;
            overflow: hidden;
        }
        
        .table th {
            background: var(--primary-color);
            color: white;
            font-weight: 500;
        }
        
        .stat-card {
            padding: 20px;
            text-align: center;
            border-radius: 12px;
            margin-bottom: 20px;
        }
        
        .stat-card .stat-value {
            font-size: 2.5rem;
            font-weight: 700;
            margin: 10px 0;
        }
        
        .stat-card .stat-label {
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        .sales-stat {
            background: rgba(0, 184, 148, 0.2);
            border: 1px solid rgba(0, 184, 148, 0.3);
        }
        
        .expenses-stat {
            background: rgba(214, 48, 49, 0.2);
            border: 1px solid rgba(214, 48, 49, 0.3);
        }
        
        .profit-stat {
            background: rgba(253, 203, 110, 0.2);
            border: 1px solid rgba(253, 203, 110, 0.3);
        }
        
        .items-stat {
            background: rgba(9, 132, 227, 0.2);
            border: 1px solid rgba(9, 132, 227, 0.3);
        }
        
        @media (max-width: 768px) {
            .sidebar {
                min-height: auto;
                width: 100%;
            }
            
            .main-content {
                padding: 15px;
            }
            
            .filter-section .row > div {
                margin-bottom: 15px;
            }
        }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #5649c5;
        }
        
        /* Animation */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fade {
            animation: fadeIn 0.6s ease forwards;
        }
        
        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }
        .delay-4 { animation-delay: 0.4s; }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- Sidebar -->
            <div class="col-lg-2 col-md-3 sidebar p-0">
                <div class="sidebar-header text-center">
                    <h4 class="mb-0">Shikanisha</h4>
                    <small class="text-muted">Sales & Inventory</small>
                </div>
                <ul class="nav flex-column mt-4">
                    <li class="nav-item animate-fade delay-1">
                        <a class="nav-link active" href="#employee-sales" data-bs-toggle="tab">
                            <i class="bi bi-people-fill"></i> Employee Sales
                        </a>
                    </li>
                    <li class="nav-item animate-fade delay-2">
                        <a class="nav-link" href="#expenses" data-bs-toggle="tab">
                            <i class="bi bi-cash-stack"></i> Expenses
                        </a>
                    </li>
                    <li class="nav-item animate-fade delay-3">
                        <a class="nav-link" href="#inventory" data-bs-toggle="tab">
                            <i class="bi bi-box-seam"></i> Inventory
                        </a>
                    </li>
                    <li class="nav-item animate-fade delay-4">
                        <a class="nav-link" href="#daily-reports" data-bs-toggle="tab">
                            <i class="bi bi-calendar-day"></i> Daily Reports
                        </a>
                    </li>
                </ul>
                <div class="position-absolute bottom-0 start-0 end-0 p-3 text-center">
                    <small class="text-muted">v2.0.1</small>
                </div>
            </div>

            <!-- Main Content -->
            <div class="col-lg-10 col-md-9 main-content">
                <div class="tab-content">
                    <!-- Employee Sales Tab -->
                    <div class="tab-pane fade show active" id="employee-sales">
                        <div class="page-header animate-fade">
                            <h2>Employee Sales Report</h2>
                        </div>
                        
                        <div class="filter-section glass-card animate-fade delay-1">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label for="emp-sales-employee" class="form-label">Employee</label>
                                    <select id="emp-sales-employee" class="form-select">
                                        <option value="">All Employees</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="emp-sales-date-from" class="form-label">Date From</label>
                                    <input type="date" id="emp-sales-date-from" class="form-control">
                                </div>
                                <div class="col-md-3">
                                    <label for="emp-sales-date-to" class="form-label">Date To</label>
                                    <input type="date" id="emp-sales-date-to" class="form-control">
                                </div>
                                <div class="col-md-3 d-flex align-items-end">
                                    <button id="emp-sales-filter" class="btn btn-primary w-100">
                                        <i class="bi bi-funnel-fill me-2"></i>Filter
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row animate-fade delay-2">
                            <div class="col-md-12">
                                <div class="glass-card">
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table id="employee-sales-table" class="table table-hover" style="width:100%">
                                                <thead>
                                                    <tr>
                                                        <th>Employee</th>
                                                        <th>Total Sales</th>
                                                        <th>Total Amount</th>
                                                        <th>Average Sale</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mt-4 animate-fade delay-3">
                            <div class="col-md-12">
                                <div class="glass-card">
                                    <div class="card-body">
                                        <canvas id="employee-sales-chart" height="300"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Expenses Tab -->
                    <div class="tab-pane fade" id="expenses">
                        <div class="page-header animate-fade">
                            <h2>Expenses Report</h2>
                        </div>
                        
                        <div class="filter-section glass-card animate-fade delay-1">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label for="expenses-date-from" class="form-label">Date From</label>
                                    <input type="date" id="expenses-date-from" class="form-control">
                                </div>
                                <div class="col-md-3">
                                    <label for="expenses-date-to" class="form-label">Date To</label>
                                    <input type="date" id="expenses-date-to" class="form-control">
                                </div>
                                <div class="col-md-3">
                                    <label for="expenses-shift" class="form-label">Shift</label>
                                    <select id="expenses-shift" class="form-select">
                                        <option value="">All Shifts</option>
                                        <option value="1">Shift 1</option>
                                        <option value="2">Shift 2</option>
                                    </select>
                                </div>
                                <div class="col-md-3 d-flex align-items-end">
                                    <button id="expenses-filter" class="btn btn-primary w-100">
                                        <i class="bi bi-funnel-fill me-2"></i>Filter
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row animate-fade delay-2">
                            <div class="col-md-12">
                                <div class="glass-card">
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table id="expenses-table" class="table table-hover" style="width:100%">
                                                <thead>
                                                    <tr>
                                                        <th>Expense Name</th>
                                                        <th>Amount</th>
                                                        <th>Date</th>
                                                        <th>Shift</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mt-4 animate-fade delay-3">
                            <div class="col-md-12">
                                <div class="glass-card">
                                    <div class="card-body">
                                        <canvas id="expenses-chart" height="300"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Inventory Tab -->
                    <div class="tab-pane fade" id="inventory">
                        <div class="page-header animate-fade">
                            <h2>Inventory Report</h2>
                        </div>
                        
                        <div class="filter-section glass-card animate-fade delay-1">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label for="inventory-category" class="form-label">Category</label>
                                    <select id="inventory-category" class="form-select">
                                        <option value="">All Categories</option>
                                        <option value="beverage">Beverage</option>
                                        <option value="food">Food</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="inventory-subcategory" class="form-label">Subcategory</label>
                                    <select id="inventory-subcategory" class="form-select">
                                        <option value="">All Subcategories</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="inventory-availability" class="form-label">Availability</label>
                                    <select id="inventory-availability" class="form-select">
                                        <option value="">All</option>
                                        <option value="1">Available</option>
                                        <option value="0">Low Stock</option>
                                    </select>
                                </div>
                                <div class="col-md-3 d-flex align-items-end">
                                    <button id="inventory-filter" class="btn btn-primary w-100">
                                        <i class="bi bi-funnel-fill me-2"></i>Filter
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row animate-fade delay-2">
                            <div class="col-md-12">
                                <div class="glass-card">
                                    <div class="card-body">
                                        <div class="table-responsive">
                                            <table id="inventory-table" class="table table-hover" style="width:100%">
                                                <thead>
                                                    <tr>
                                                        <th>Item Name</th>
                                                        <th>Category</th>
                                                        <th>Subcategory</th>
                                                        <th>Quantity</th>
                                                        <th>Buying Price</th>
                                                        <th>Selling Price</th>
                                                        <th>Profit Margin</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mt-4 animate-fade delay-3">
                            <div class="col-md-12">
                                <div class="glass-card">
                                    <div class="card-body">
                                        <canvas id="inventory-chart" height="300"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Daily Reports Tab -->
                    <div class="tab-pane fade" id="daily-reports">
                        <div class="page-header animate-fade">
                            <h2>Daily Reports</h2>
                        </div>
                        
                        <div class="filter-section glass-card animate-fade delay-1">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label for="daily-date" class="form-label">Date</label>
                                    <input type="date" id="daily-date" class="form-control">
                                </div>
                                <div class="col-md-3">
                                    <label for="daily-shift" class="form-label">Shift</label>
                                    <select id="daily-shift" class="form-select">
                                        <option value="">All Shifts</option>
                                        <option value="1">Shift 1</option>
                                        <option value="2">Shift 2</option>
                                    </select>
                                </div>
                                <div class="col-md-3 d-flex align-items-end">
                                    <button id="daily-filter" class="btn btn-primary w-100">
                                        <i class="bi bi-file-earmark-text me-2"></i>Generate Report
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row animate-fade delay-2">
                            <div class="col-md-3">
                                <div class="glass-card sales-stat">
                                    <div class="stat-value" id="total-sales">$0</div>
                                    <div class="stat-label">Total Sales</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="glass-card expenses-stat">
                                    <div class="stat-value" id="total-expenses">$0</div>
                                    <div class="stat-label">Total Expenses</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="glass-card profit-stat">
                                    <div class="stat-value" id="net-profit">$0</div>
                                    <div class="stat-label">Net Profit</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="glass-card items-stat">
                                    <div class="stat-value" id="items-sold">0</div>
                                    <div class="stat-label">Items Sold</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mt-4 animate-fade delay-3">
                            <div class="col-md-12">
                                <div class="glass-card">
                                    <div class="card-body">
                                        <h5 class="card-title">Top Selling Items</h5>
                                        <div class="table-responsive">
                                            <table id="daily-top-items" class="table table-hover" style="width:100%">
                                                <thead>
                                                    <tr>
                                                        <th>Item</th>
                                                        <th>Category</th>
                                                        <th>Quantity Sold</th>
                                                        <th>Total Amount</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mt-4 animate-fade delay-4">
                            <div class="col-md-12">
                                <div class="glass-card">
                                    <div class="card-body">
                                        <canvas id="daily-sales-chart" height="300"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
    <script src="./reports.js"></script>
    
    <script>
        // Initialize tooltips
        $(document).ready(function() {
            $('[data-bs-toggle="tooltip"]').tooltip();
            
            // Set current date as default for date fields
            const today = new Date().toISOString().split('T')[0];
            $('#emp-sales-date-from, #emp-sales-date-to, #expenses-date-from, #expenses-date-to, #daily-date').val(today);
        });
    </script>
</body>
</html>