<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

require_once __DIR__ . '/auth.php';
require_once __DIR__ . '/functions.php';

$currentUser = getCurrentUser();
$currentPage = basename($_SERVER['PHP_SELF']);
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo isset($pageTitle) ? $pageTitle . ' - ' : ''; ?>Umbul Sungsang</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#38BDF8', // Sky blue - biru muda
                        secondary: '#2DD4BF', // Teal - hijau mint
                        accent: '#14B8A6', // Teal darker untuk hover
                    }
                }
            }
        };
    </script>
    
    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Native Android Bridge -->
    <script src="includes/native-bridge.js"></script>
</head>
<body class="bg-gray-50">
    <!-- Navigation -->
    <nav class="bg-gradient-to-r from-sky-50 via-teal-50 to-sky-50 shadow-lg border-b border-sky-100" x-data="{ mobileMenuOpen: false }">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex">
                    <div class="flex-shrink-0 flex items-center">
                        <h1 class="text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Umbul Sungsang</h1>
                    </div>
                    <?php if (isLoggedIn()): ?>
                    <!-- Desktop Menu -->
                    <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                        <a href="index.php" class="<?php echo $currentPage === 'index.php' ? 'border-secondary text-gray-900 font-semibold' : 'border-transparent text-gray-600 hover:border-secondary hover:text-gray-900'; ?> inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200">
                            Dashboard
                        </a>
                        <?php if (hasRole('admin')): ?>
                            <a href="layanan.php" class="<?php echo $currentPage === 'layanan.php' ? 'border-secondary text-gray-900 font-semibold' : 'border-transparent text-gray-600 hover:border-secondary hover:text-gray-900'; ?> inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200">
                                Layanan
                            </a>
                            <a href="pengeluaran.php" class="<?php echo $currentPage === 'pengeluaran.php' ? 'border-secondary text-gray-900 font-semibold' : 'border-transparent text-gray-600 hover:border-secondary hover:text-gray-900'; ?> inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200">
                                Pengeluaran
                            </a>
                            <a href="riwayat-booking.php" class="<?php echo in_array($currentPage, ['booking.php', 'riwayat-booking.php']) ? 'border-secondary text-gray-900 font-semibold' : 'border-transparent text-gray-600 hover:border-secondary hover:text-gray-900'; ?> inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200">
                                Booking
                            </a>
                            <a href="user-management.php" class="<?php echo $currentPage === 'user-management.php' ? 'border-secondary text-gray-900 font-semibold' : 'border-transparent text-gray-600 hover:border-secondary hover:text-gray-900'; ?> inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200">
                                User
                            </a>
                            <a href="laporan.php" class="<?php echo $currentPage === 'laporan.php' ? 'border-secondary text-gray-900 font-semibold' : 'border-transparent text-gray-600 hover:border-secondary hover:text-gray-900'; ?> inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200">
                                Laporan
                            </a>
                            <a href="riwayat-struk.php" class="<?php echo $currentPage === 'riwayat-struk.php' ? 'border-secondary text-gray-900 font-semibold' : 'border-transparent text-gray-600 hover:border-secondary hover:text-gray-900'; ?> inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200">
                                Struk
                            </a>
                        <?php elseif (hasRole('loket')): ?>
                            <a href="struk.php" class="<?php echo $currentPage === 'struk.php' ? 'border-secondary text-gray-900 font-semibold' : 'border-transparent text-gray-600 hover:border-secondary hover:text-gray-900'; ?> inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200">
                                Buat Struk
                            </a>
                            <a href="riwayat-struk.php" class="<?php echo $currentPage === 'riwayat-struk.php' ? 'border-secondary text-gray-900 font-semibold' : 'border-transparent text-gray-600 hover:border-secondary hover:text-gray-900'; ?> inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200">
                                Riwayat Struk
                            </a>
                        <?php endif; ?>
                    </div>
                    <?php endif; ?>
                </div>
                <?php if (isLoggedIn()): ?>
                <div class="flex items-center">
                    <!-- Desktop User Info -->
                    <div class="hidden sm:flex sm:items-center">
                        <span class="text-gray-700 mr-4 text-sm font-medium"><?php echo htmlspecialchars($currentUser['nama']); ?></span>
                        <a href="logout.php" class="bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white px-4 py-2 rounded-md text-sm font-medium shadow-sm transition-all duration-200">
                            Logout
                        </a>
                    </div>
                    <!-- Mobile Menu Button -->
                    <button @click="mobileMenuOpen = !mobileMenuOpen" class="sm:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-600 hover:text-secondary hover:bg-sky-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-secondary transition-colors duration-200" aria-expanded="false">
                        <span class="sr-only">Buka menu</span>
                        <svg x-show="!mobileMenuOpen" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                        <svg x-show="mobileMenuOpen" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                <?php endif; ?>
            </div>
        </div>

        <!-- Mobile Menu -->
        <?php if (isLoggedIn()): ?>
        <div x-show="mobileMenuOpen" 
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 scale-95"
             x-transition:enter-end="opacity-100 scale-100"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 scale-100"
             x-transition:leave-end="opacity-0 scale-95"
             class="sm:hidden border-t border-sky-200 bg-gradient-to-b from-sky-50/50 to-teal-50/50">
            <div class="pt-2 pb-3 space-y-1 px-4">
                <a href="index.php" class="<?php echo $currentPage === 'index.php' ? 'bg-gradient-to-r from-sky-100 to-teal-100 border-secondary text-secondary font-semibold' : 'border-transparent text-gray-600 hover:bg-sky-50 hover:border-secondary hover:text-secondary'; ?> block pl-3 pr-4 py-3 border-l-4 text-base font-medium rounded-md transition-all duration-200">
                    Dashboard
                </a>
                <?php if (hasRole('admin')): ?>
                    <a href="layanan.php" class="<?php echo $currentPage === 'layanan.php' ? 'bg-gradient-to-r from-sky-100 to-teal-100 border-secondary text-secondary font-semibold' : 'border-transparent text-gray-600 hover:bg-sky-50 hover:border-secondary hover:text-secondary'; ?> block pl-3 pr-4 py-3 border-l-4 text-base font-medium rounded-md transition-all duration-200">
                        Layanan
                    </a>
                    <a href="pengeluaran.php" class="<?php echo $currentPage === 'pengeluaran.php' ? 'bg-gradient-to-r from-sky-100 to-teal-100 border-secondary text-secondary font-semibold' : 'border-transparent text-gray-600 hover:bg-sky-50 hover:border-secondary hover:text-secondary'; ?> block pl-3 pr-4 py-3 border-l-4 text-base font-medium rounded-md transition-all duration-200">
                        Pengeluaran
                    </a>
                    <a href="riwayat-booking.php" class="<?php echo in_array($currentPage, ['booking.php', 'riwayat-booking.php']) ? 'bg-gradient-to-r from-sky-100 to-teal-100 border-secondary text-secondary font-semibold' : 'border-transparent text-gray-600 hover:bg-sky-50 hover:border-secondary hover:text-secondary'; ?> block pl-3 pr-4 py-3 border-l-4 text-base font-medium rounded-md transition-all duration-200">
                        Booking
                    </a>
                    <a href="user-management.php" class="<?php echo $currentPage === 'user-management.php' ? 'bg-gradient-to-r from-sky-100 to-teal-100 border-secondary text-secondary font-semibold' : 'border-transparent text-gray-600 hover:bg-sky-50 hover:border-secondary hover:text-secondary'; ?> block pl-3 pr-4 py-3 border-l-4 text-base font-medium rounded-md transition-all duration-200">
                        User
                    </a>
                    <a href="laporan.php" class="<?php echo $currentPage === 'laporan.php' ? 'bg-gradient-to-r from-sky-100 to-teal-100 border-secondary text-secondary font-semibold' : 'border-transparent text-gray-600 hover:bg-sky-50 hover:border-secondary hover:text-secondary'; ?> block pl-3 pr-4 py-3 border-l-4 text-base font-medium rounded-md transition-all duration-200">
                        Laporan
                    </a>
                    <a href="riwayat-struk.php" class="<?php echo $currentPage === 'riwayat-struk.php' ? 'bg-gradient-to-r from-sky-100 to-teal-100 border-secondary text-secondary font-semibold' : 'border-transparent text-gray-600 hover:bg-sky-50 hover:border-secondary hover:text-secondary'; ?> block pl-3 pr-4 py-3 border-l-4 text-base font-medium rounded-md transition-all duration-200">
                        Struk
                    </a>
                <?php elseif (hasRole('loket')): ?>
                    <a href="struk.php" class="<?php echo $currentPage === 'struk.php' ? 'bg-gradient-to-r from-sky-100 to-teal-100 border-secondary text-secondary font-semibold' : 'border-transparent text-gray-600 hover:bg-sky-50 hover:border-secondary hover:text-secondary'; ?> block pl-3 pr-4 py-3 border-l-4 text-base font-medium rounded-md transition-all duration-200">
                        Buat Struk
                    </a>
                    <a href="riwayat-struk.php" class="<?php echo $currentPage === 'riwayat-struk.php' ? 'bg-gradient-to-r from-sky-100 to-teal-100 border-secondary text-secondary font-semibold' : 'border-transparent text-gray-600 hover:bg-sky-50 hover:border-secondary hover:text-secondary'; ?> block pl-3 pr-4 py-3 border-l-4 text-base font-medium rounded-md transition-all duration-200">
                        Riwayat Struk
                    </a>
                <?php endif; ?>
            </div>
            <div class="pt-4 pb-3 border-t border-sky-200 px-4">
                <div class="flex items-center mb-3">
                    <div class="text-base font-medium text-gray-800"><?php echo htmlspecialchars($currentUser['nama']); ?></div>
                </div>
                <a href="logout.php" class="block w-full text-center bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white px-4 py-3 rounded-md text-base font-medium shadow-sm transition-all duration-200">
                    Logout
                </a>
            </div>
        </div>
        <?php endif; ?>
    </nav>

    <!-- Flash Message -->
    <?php
    $flash = getFlash();
    if ($flash):
    ?>
    <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 3000)" class="fixed top-4 right-4 z-50">
        <div class="<?php echo $flash['type'] === 'success' ? 'bg-green-500' : 'bg-red-500'; ?> text-white px-6 py-4 rounded-lg shadow-lg">
            <?php echo htmlspecialchars($flash['message']); ?>
        </div>
    </div>
    <?php endif; ?>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
