{% extends 'base.html.twig' %}

{% block stylesheets %}
<style>
    @media print {
        .no-print { display: none !important; }
        .main-content { margin-left: 0 !important; }
    }
</style>
{% endblock %}

{% block body %}
<!-- Sidebar Overlay for mobile -->
<div class="fixed inset-0 bg-black/50 z-40 hidden" id="sidebarOverlay"></div>

<!-- Sidebar -->
<nav class="fixed top-0 left-0 h-full w-64 bg-kitsco-dark z-50 transition-transform duration-300 -translate-x-full lg:translate-x-0" id="sidebar">
    <div class="flex items-center px-5 py-4 border-b border-white/10">
        <img src="{{ asset('images/logo-white.png') }}" alt="KitscoApp" class="h-8">
    </div>
    <div class="p-2 mt-2">
        <ul class="space-y-1">
            <li>
                <a class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm transition-colors {{ app.request.attributes.get('_route') == 'portal_dashboard' ? 'bg-kitsco-accent text-white' : 'text-white/70 hover:text-white hover:bg-kitsco-accent' }}" href="{{ path('portal_dashboard') }}">
                    <i class="bi bi-speedometer2 text-base"></i>
                    <span>Dashboard</span>
                </a>
            </li>
            <li>
                <a class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm transition-colors {{ app.request.attributes.get('_route') starts with 'portal_invoice' ? 'bg-kitsco-accent text-white' : 'text-white/70 hover:text-white hover:bg-kitsco-accent' }}" href="{{ path('portal_invoice_index') }}">
                    <i class="bi bi-receipt text-base"></i>
                    <span>Invoices</span>
                </a>
            </li>
            <li class="pt-4">
                <p class="px-4 text-[0.65rem] uppercase tracking-wider text-white/40 mb-1">Website</p>
            </li>
            <li>
                <a class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm text-white/70 hover:text-white hover:bg-kitsco-accent transition-colors" href="{{ path('website_home') }}" target="_blank">
                    <i class="bi bi-globe text-base"></i>
                    <span>Visit Website</span>
                    <i class="bi bi-box-arrow-up-right text-xs ml-auto opacity-50"></i>
                </a>
            </li>
        </ul>
    </div>
</nav>

<!-- Main Content -->
<div class="lg:ml-64 min-h-screen main-content">
    <!-- Top Navbar -->
    <div class="bg-white border-b border-gray-200 px-4 sm:px-6 py-3 flex justify-between items-center sticky top-0 z-30">
        <div class="flex items-center gap-3">
            <button class="lg:hidden text-gray-600 hover:text-gray-900" id="sidebarToggle" type="button">
                <i class="bi bi-list text-2xl"></i>
            </button>
            <h1 class="text-lg font-semibold text-gray-800">{% block page_title %}Dashboard{% endblock %}</h1>
        </div>
        <div class="flex items-center gap-3">
            <div class="hidden md:flex items-center gap-2">
                <div class="w-8 h-8 rounded-full bg-kitsco-accent text-white flex items-center justify-center text-sm font-semibold">
                    {{ app.user.fullName|first|upper }}
                </div>
                <span class="text-sm text-gray-500">{{ app.user.fullName }}</span>
            </div>
            <a href="{{ path('app_logout') }}" class="inline-flex items-center gap-1 px-3 py-1.5 border border-gray-300 rounded-lg text-sm text-gray-600 hover:bg-gray-50 transition-colors">
                <i class="bi bi-box-arrow-right"></i>
                <span class="hidden md:inline">Logout</span>
            </a>
        </div>
    </div>

    <!-- Content -->
    <div class="p-4 sm:p-6">
        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div class="mb-4 px-4 py-3 rounded-lg flex items-center gap-2 {{ label == 'success' ? 'bg-green-50 text-green-800 border border-green-200' : (label == 'danger' ? 'bg-red-50 text-red-800 border border-red-200' : 'bg-blue-50 text-blue-800 border border-blue-200') }}">
                    <i class="bi bi-{{ label == 'success' ? 'check-circle' : (label == 'danger' ? 'exclamation-circle' : 'info-circle') }}"></i>
                    <span class="text-sm">{{ message }}</span>
                </div>
            {% endfor %}
        {% endfor %}

        {% block content %}{% endblock %}
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('sidebarOverlay');
    const toggleBtn = document.getElementById('sidebarToggle');

    function toggleSidebar() {
        sidebar.classList.toggle('-translate-x-full');
        overlay.classList.toggle('hidden');
        document.body.style.overflow = !sidebar.classList.contains('-translate-x-full') ? 'hidden' : '';
    }

    function closeSidebar() {
        sidebar.classList.add('-translate-x-full');
        overlay.classList.add('hidden');
        document.body.style.overflow = '';
    }

    if (toggleBtn) toggleBtn.addEventListener('click', toggleSidebar);
    if (overlay) overlay.addEventListener('click', closeSidebar);
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && !sidebar.classList.contains('-translate-x-full')) closeSidebar();
    });
});
</script>
{% endblock %}