{% extends BASE_TEMPLATE %}
{% load i18n %}
{% load static %}
{% block customCSS %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/app_admin/display_appointment.css' %}"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
          integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
{% endblock %}
{% block title %}
    {{ page_title }}
{% endblock %}
{% block description %}
    {{ page_description }}
{% endblock %}
{% block body %}
    <section class="content content-wrapper">
        <div class="appointment-display-content">
            <div class="app-content">
                <!-- Header -->
                <div class="appointment-header">
                    <h1 class="appointment-title">{{ page_title }}</h1>
                    <p class="appointment-subtitle">{{ page_description }}</p>
                </div>

                <!-- Main content -->
                <div class="appointment-content">
                    <!-- Left Panel - Details -->
                    <div class="details-panel">
                        <!-- Timing Information -->
                        <div class="detail-group">
                            <h3>
                                <i class="fas fa-calendar-alt"></i>
                                {% trans 'Schedule' %}
                            </h3>
                            <div class="detail-row">
                                <span class="detail-label">{% trans 'Date' %}</span>
                                <span class="detail-value">{{ appointment.get_date }}</span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">{% trans 'Start time' %}</span>
                                <span class="detail-value">{{ appointment.get_start_time|time:"g:i A" }}</span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">{% trans 'End time' %}</span>
                                <span class="detail-value">{{ appointment.get_end_time|time:"g:i A" }}</span>
                            </div>
                        </div>

                        <!-- Service Information -->
                        <div class="detail-group">
                            <h3>
                                <i class="fas fa-hands-helping"></i>
                                {% trans 'Service' %}
                            </h3>
                            <div class="detail-row">
                                <span class="detail-label">{% trans 'Service' %}</span>
                                <span class="detail-value">{{ appointment.get_service_name }}</span>
                            </div>
                        </div>

                        <!-- Client Information -->
                        <div class="detail-group">
                            <h3>
                                <i class="fas fa-user"></i>
                                {% trans 'Client Details' %}
                            </h3>
                            <div class="detail-row">
                                <span class="detail-label">{% trans 'Client' %}</span>
                                <span class="detail-value">{{ appointment.get_client_name }}</span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">{% trans 'Email' %}</span>
                                <span class="detail-value">{{ appointment.client.email }}</span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">{% trans 'Phone' %}</span>
                                <span class="detail-value">{{ appointment.phone }}</span>
                            </div>
                            <div class="detail-row">
                                <span class="detail-label">{% trans 'Client address' %}</span>
                                <span class="detail-value">{{ appointment.address }}</span>
                            </div>
                        </div>

                        <!-- Additional Information -->
                        <div class="detail-group">
                            <h3>
                                <i class="fas fa-info-circle"></i>
                                {% trans 'Notes' %}
                            </h3>
                            <div class="detail-row">
                                <span class="detail-label">{% trans 'Wants reminder' %}</span>
                                <span class="detail-value">{{ appointment.wants_reminder_text }}</span>
                            </div>
                            {% if appointment.additional_info %}
                            <div class="detail-row">
                                <span class="detail-label">{% trans 'Additional Information' %}</span>
                                <span class="detail-value">{{ appointment.additional_info }}</span>
                            </div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Right Panel - Status -->
                    <div class="status-panel">
                        <!-- Payment Status -->
                        <div class="status-card {% if appointment.is_paid %}paid{% else %}unpaid{% endif %}">
                            <div class="status-icon">
                                {% if appointment.is_paid %}
                                    <i class="fas fa-check-circle"></i>
                                {% else %}
                                    <i class="fas fa-exclamation-triangle"></i>
                                {% endif %}
                            </div>
                            <div class="status-text">
                                {% if appointment.is_paid %}
                                    {% trans 'Payment Complete' %}
                                {% else %}
                                    {% trans 'Payment Pending' %}
                                {% endif %}
                            </div>
                            <div class="status-amount">{{ appointment.get_appointment_amount_to_pay_text }}</div>
                            <p style="opacity: 0.5; margin-top: -1.5rem;">
                                {% if appointment.is_paid %}
                                    {% trans 'Paid in full' %}
                                {% else %}
                                    {% trans 'Amount due' %}
                                {% endif %}
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Messages -->
                {% if messages %}
                <div class="messages">
                    {% for message in messages %}
                        <div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}" role="alert">
                            {{ message }}
                        </div>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
        </div>
    </section>
{% endblock %}
{% block customJS %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.js"
            integrity="sha512-3CuraBvy05nIgcoXjVN33mACRyI89ydVHg7y/HMN9wcTVbHeur0SeBzweSd/rxySapO7Tmfu68+JlKkLTnDFNg=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.45/moment-timezone-with-data.min.js"
            integrity="sha512-t/mY3un180WRfsSkWy4Yi0tAxEDGcY2rAEx873hb5BrkvLA0QLk54+SjfYgFBBoCdJDV1H86M8uyZdJhAOHeyA=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.10/index.global.min.js"
            integrity="sha512-JCQkxdym6GmQ+AFVioDUq8dWaWN6tbKRhRyHvYZPupQ6DxpXzkW106FXS1ORgo/m3gxtt5lHRMqSdm2OfPajtg=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="{% static 'js/js-utils.js' %}"></script>

{% endblock %}