{% extends 'base.html' %}

{% block content %}
<div class="min-h-screen flex items-center justify-center bg-customBlue-500">
    <!-- Menu po lewej stronie -->
    <div id="menuBar" class="lg:w-[75px] h-screen p-4 flex flex-col items-left pl-[20px] justify-between transition-all duration-200 ">
        <!-- Górne ikony -->
        <div class="flex flex-col ">
            <!-- Ikona Menu -->
            <button id="menuButton" class="mb-6 focus:outline-none">
                <a href="#" class="text-white flex items-center hover:bg-white/10 hover:shadow-lg hover:scale-105 rounded-lg transition-all duration-300">
                    <i proicon="Menu" size="38"></i>
                    <span class="hidden ml-4 font-[650] text-white text-xl">Ukryj menu</span>
                </a>
            </button>
            <!-- Ikona Home -->
            <button onclick="showView('home')" id="homeButton" class="mb-6 focus:outline-none">
                <a href="#" class="text-white flex items-center hover:bg-white/10 hover:shadow-lg hover:scale-105 rounded-lg">
                    <i proicon="Home" size="38"></i>
                    <span class="hidden ml-4 font-[650] text-white text-xl">Strona główna</span>
                </a>
            </button>
            <!-- Ikona Settings -->
            <button onclick="showView('settings')" id="settingsButton" class="mb-6 focus:outline-none">
                <a href="#" class="text-white flex items-center hover:bg-white/10 hover:shadow-lg hover:scale-105 rounded-lg">
                    <i proicon="Settings" size="38"></i>
                    <span class="hidden ml-4 font-[650] text-white text-xl">Ustawienia</span>
                </a>
            </button>
        </div>

        <!-- Ikona na dole -->
        <button id="personButton" class="focus:outline-none ">
            <a href="#" class="text-white flex items-center hover:bg-white/10 hover:shadow-lg rounded-lg hover:scale-105">
                <i proicon="Person" size="38"></i>
            </a>
        </button>


        <!--User info block-->
        <div id="userInfo" class="hidden flex flex-col items-center mt-auto p-4 rounded-lg shadow-lg userinfo">
            <!--email-->
            {% if 'Email' in session['user'] %}
                <p class="text-white text-sm mb-2">{{ session['user']['Email'] }}</p>
            {% else %}
                <p class="text-white text-sm mb-2">No email found in session.</p>
            {% endif %}

            <div class="flex flex-col items-center">
                <i proicon="Person" size="48" class="text-white mb-2"></i>
                <!--Imie nazwisko-->
                    {% if 'Name' in session['user'] and 'Lastname' in session['user'] %}
                        <p class="text-white text-base font-semibold pb-20">{{ session['user']['Name'] }} {{session['user']['Lastname']}}</p>
                    {% else %}
                        <p class="text-white text-base font-semibold pb-20">No name and lastname found in session.</p>
                    {% endif %}
            </div>
            <a href="{{ url_for('login.logout') }}" class="mt-4 bg-gray-200 text-customBlue-500 font-bold py-2 px-4 rounded text-center block hover:bg-gray-300 hover:scale-105 transition-all duration-200">
                Wyloguj się
            </a>
        </div>

    </div>

    <!-- Główny obszar wyświetlania -->
    <div id="mainDashboard" class="flex-1 bg-gray-200 h-screen p-3 pl-5 rounded-[13px] border-[6px] border-customBlue-500">
        <!--Widok home-->
        <div id="home-view" class="h-full flex flex-col">
            <!--Górna belka-->
            <div class=" flex flex-col items-left">
                <!-- Nagłówek -->
                <p class="text-customBlue-500 font-bold text-[60px]">iHairdresser</p>
            
                <!-- Kontener na przyciski -->
                <div class="mt-4 flex space-x-4 pb-4">
                    <a id="btn-dzisiejsze-wizyty" href="#" class="shadow-md border-2 border-customBlue-500 text-customBlue-500 font-bold py-1 min-w-[170px] w-[250px] rounded text-center hover:bg-gray-300 hover:scale-105 transition-all duration-200 ">
                        Dzisiejsze wizyty
                    </a>
                    <a id="btn-dodaj-wizyte" href="#" class="shadow-md border-2 border-customBlue-500 text-customBlue-500 font-bold py-1 min-w-[170px] w-[250px] rounded text-center hover:bg-gray-300 hover:scale-105 transition-all duration-200">
                        Dodaj wizytę
                    </a>
                    <a id="btn-kalendarz" href="#" class="shadow-md border-2 border-customBlue-500 text-customBlue-500 font-bold py-1 min-w-[170px] w-[250px] rounded text-center hover:bg-gray-300 hover:scale-105 transition-all duration-200">
                        Kalendarz
                    </a>
                </div>
            </div>
            


            <!--Dzisiejsze wizyty-->
            <div id="dzisiejszeWizyty" class=" flex h-full gap-x-2">
                <!--Pole robocze "Witaj wojtku"-->
                <div id="welcomeBoard" class="bg-customGray-300 w-[50%] h-[400px]  rounded-lg"></div>

                <!--Pole robocze kalendarz-->
                <div id="calendarBoard" class="bg-customGray-300 w-[50%] h-full rounded-lg"></div>
            </div>

            <!--Kalendarz-->
            <div id="KalendarzBoard" class="flex h-full">
                <!--Pole robocze kalendarz-->
                <div id="calendarBoard" class="bg-customGray-300 w-full h-full rounded-lg"></div>
            </div>
            
        </div>
        <div id="settings-view" class="hidden border-Blue-500">Settings</div>

        <!--Formularz dodaj wizytę-->
        <div id="modalAddAppointment" class="fixed inset-0 bg-black bg-opacity-50 hidden flex justify-center items-center z-50">
            <div class="bg-white w-[400px] rounded-lg shadow-lg p-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-bold text-customBlue-500">Dodaj wizytę</h2>
                    <button id="btnCloseModalAddAppointment" class="text-gray-500 hover:text-red-500">
                        &times;
                    </button>
                </div>
                <form id="addVisitForm" action="{{ url_for('dashboard.addAppointment') }}" method="POST">
                    <div class="mb-4">
                        <label for="clientName" class="block text-sm font-medium text-gray-700">Imię klienta</label>
                        <input type="text" id="clientName" name="clientName" class="w-full border rounded p-2" placeholder="Wpisz tutaj" required />
                    </div>
                    <div class="mb-4">
                        <label for="clientLastName" class="block text-sm font-medium text-gray-700">Nazwisko klienta</label>
                        <input type="text" id="clientLastName" name="clientLastName" class="w-full border rounded p-2" placeholder="Wpisz tutaj" required />
                    </div>
                    <div class="mb-4">
                        <label for="date" class="block text-sm font-medium text-gray-700">Data wizyty</label>
                        <input type="datetime-local" id="appointmentDateTime" name="appointmentDateTime" class="w-full border rounded p-2" required />
                    </div>
                    <div class="mb-4">
                        <label for="appointmentDate" class="block text-sm font-medium text-gray-700">Nr telefonu (opcjonalnie)</label>
                        <input type="tel" id="phoneNumber" name="phoneNumber" class="w-full border rounded p-2" placeholder="Wpisz tutaj" pattern="[0-9]{3}[0-9]{3}[0-9]{3}"/>
                    </div>
                    <div class="mb-4">
                        <label for="serviceDetails" class="block text-sm font-medium text-gray-700">Szczegóły usługi</label>
                        <textarea id="serviceDetails" name="serviceDetails" class="w-full border rounded p-2" placeholder="Wpisz tutaj"></textarea>
                    </div>
                    <div class="flex justify-end space-x-4">
                        <button type="button" id="cancelButtonModalAddAppointment" class="bg-gray-300 text-gray-700 py-2 px-4 rounded hover:bg-gray-400">Anuluj</button>
                        <button type="submit" class="bg-customBlue-500 text-white py-2 px-4 rounded hover:bg-customBlue-600">Zapisz</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
{% endblock %}