{% extends BASE_TEMPLATE %}
{% load i18n %}
{% load static %}
{% block customCSS %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/app_admin/btn.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/app_admin/user_profile.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"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css"
          integrity="sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg=="
          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="profile-container">
            <div class="messages" style="padding: 20px 0">
                {% if 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 %}
                {% endif %}
            </div>
            <section class="profile-section">
                {% translate "Confirm Deletion" as modal_title %}
                {% translate "Delete" as delete_btn_modal %}

                <h2>{% trans 'Personal Information' %}</h2>
                <!-- Display fields from PersonalInformationForm -->
                <div class="section-content">
                    <p><strong>{% trans 'First name' %}:</strong> {{ user.first_name|default:user.username }}</p>
                    <p><strong>{% trans 'Last name' %}:</strong> {{ user.last_name|default:"N/A" }}</p>
                    <p><strong>{% trans 'Email' %}:</strong> {{ user.email|default:"N/A" }}</p>
                </div>
                <a href="{% url 'appointment:update_user_info' user.id %}"
                   class="section-content-button modify-btn button-color-blue">
                    <i class="fas fa-pen"></i>
                </a>
            </section>

            <!-- Appointment Information Section -->
            <section class="profile-section">
                <h2>{% trans 'Appointment Information' %}</h2>
                <small>
                    {{ service_msg }}
                </small>
                {% if staff_member %}
                    <div class="section-content">
                        <p>
                            <strong>{% trans 'Slot duration' %}:</strong> {{ staff_member.get_slot_duration_text }}
                            <i class="fas fa-info-circle" data-toggle="tooltip"
                               title="{{ slot_duration_help_text }}"></i>
                        </p>
                        <p><strong>{% trans 'General start time' %}:</strong> {{ staff_member.get_lead_time }}</p>
                        <p><strong>{% trans 'General end time' %}:</strong> {{ staff_member.get_finish_time }}</p>
                        <p>
                            <strong>{% trans 'Weekend days you work' %}:</strong> {{ staff_member.get_weekend_days_worked_text }}
                        </p>

                        <p>
                            <strong>{% trans 'Appointment buffer time' %}:</strong> {{ staff_member.get_appointment_buffer_time_text }}
                            <i class="fas fa-info-circle" data-toggle="tooltip" title="{{ buffer_time_help_text }}"></i>
                        </p>

                    </div>
                    <a href="{% url 'appointment:update_staff_other_info' staff_member.user.id %}"
                       class="section-content-button modify-btn button-color-blue">
                        <i class="fas fa-pen"></i>
                    </a>
                {% else %}
                    <div class="section-content">
                        <p>{% trans 'No staff member information yet for this user' %}.</p>
                    </div>
                    <a href="{% url 'appointment:update_staff_other_info' user.id %}"
                       class="section-content-button modify-btn button-color-green">
                        <i class="fas fa-add"></i>
                    </a>
                {% endif %}

            </section>

            <!-- Days Off Information Section -->
            <section class="profile-section">
                <h2>{% trans 'Days Off' %}</h2>
                <a href="{% url 'appointment:add_day_off' staff_user_id=user.id %}"
                   class="section-content-button modify-btn button-color-green">
                    <i class="fas fa-add"></i>
                </a>
                <small>
                    {% trans "Days off are days you're not working, you need to set them for holidays as well so clients don't book you those days." %}
                </small>
                <div class="responsive-table-container">
                    <table>
                        <thead>
                        <tr>
                            <th>{% trans 'Start date' %}</th>
                            <th>{% trans 'End date' %}</th>
                            <th>{% trans 'Description' %}</th>
                            <th>{% trans 'Action' %}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for day_off in days_off %}
                            <tr>
                                <td>{{ day_off.start_date }}</td>
                                <td>{{ day_off.end_date }}</td>
                                <td>{{ day_off.description }}</td>
                                <td>
                                    <div class="buttons-container">
                                        {% if superuser %}
                                            <a href="{% url 'appointment:update_day_off_id' day_off_id=day_off.id staff_user_id=user.id %}"
                                               class="modify-btn button-color-blue">
                                                <i class="fas fa-pen"></i>
                                            </a>
                                        {% else %}
                                            <a href="{% url 'appointment:update_day_off' day_off_id=day_off.id %}"
                                               class="modify-btn button-color-blue">
                                                <i class="fas fa-pen"></i>
                                            </a>
                                        {% endif %}
                                        {% translate "Are you sure you want to delete this working hours?" as d_modal_message %}
                                        {% if superuser %}
                                            <a href="javascript:void(0)"
                                               onclick="showModal('{{ modal_title }}', '{{ d_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_day_off_id' day_off_id=day_off.id staff_user_id=user.id %}', null)"
                                               class="modify-btn button-color-red">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        {% else %}
                                            <a href="javascript:void(0)"
                                               onclick="showModal('{{ modal_title }}', '{{ d_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_day_off' day_off_id=day_off.id %}', null)"
                                               class="modify-btn button-color-red">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="4">{% trans 'No days off have been set' %}.</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>

            <!-- Working Hours Information Section -->
            <section class="profile-section">
                <h2>{% trans 'Working Hours' %}</h2>
                <a href="{% url 'appointment:add_working_hours_id' user.id %}"
                   class="section-content-button modify-btn button-color-green">
                    <i class="fas fa-add"></i>
                </a>
                <small>
                    {% trans "Note: If you are a staff member, your working hours will be used to determine when you are available for appointments." %}
                </small>
                <div class="responsive-table-container">
                    <table>
                        <thead>
                        <tr>
                            <th>{% trans 'Day' %}</th>
                            <th>{% trans 'Start time' %}</th>
                            <th>{% trans 'End time' %}</th>
                            <th>{% trans 'Action' %}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for working_hour in working_hours %}
                            <tr>
                                <td>{{ working_hour.get_day_of_week_str }}</td>
                                <td>{{ working_hour.start_time|time:"g:i A" }}</td>
                                <td>{{ working_hour.end_time|time:"g:i A" }}</td>
                                <td>
                                    <div class="buttons-container">
                                        {% if superuser %}
                                            <a href="{% url 'appointment:update_working_hours_id' working_hours_id=working_hour.id staff_user_id=user.id %}"
                                               class="modify-btn button-color-blue">
                                                <i class="fas fa-pen"></i>
                                            </a>
                                        {% else %}
                                            <a href="{% url 'appointment:update_working_hours' working_hours_id=working_hour.id %}"
                                               class="modify-btn button-color-blue">
                                                <i class="fas fa-pen"></i>
                                            </a>
                                        {% endif %}
                                        {% translate "Are you sure you want to delete this working hours?" as w_modal_message %}
                                        {% if superuser %}
                                            <a href="javascript:void(0)"
                                               onclick="showModal('{{ modal_title }}', '{{ w_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_working_hours_id' working_hours_id=working_hour.id staff_user_id=user.id %}', null)"
                                               class="modify-btn button-color-red">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        {% else %}
                                            <a href="javascript:void(0)"
                                               onclick="showModal('{{ modal_title }}', '{{ w_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_working_hours' working_hours_id=working_hour.id %}', null)"
                                               class="modify-btn button-color-red">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="4">{% trans 'No working hours have been set' %}.</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>

            <!-- Service Information Section -->
            <section class="profile-section">
                <h2>{% trans 'Service Offered' %}</h2>
                <small>
                    {% if not superuser %}
                        {% trans "To add/modify a new service, make a request to an admin." %}
                        {% trans "Changes made in one service will change it for every staff member." %}
                    {% endif %}
                </small>
                <div class="responsive-table-container">
                    <table>
                        <thead>
                        <tr>
                            <th>{% trans 'Name' %}</th>
                            <th>{% trans 'Description' %}</th>
                            <th>{% trans 'Duration' %}</th>
                            <th>{% trans 'Price' %}</th>
                            <th>{% trans 'Down payment' %}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for service in services_offered %}
                            <tr>
                                <td>{{ service.name }}</td>
                                <td>{{ service.description|default:"N/A" }}</td>
                                <td>{{ service.get_duration }}</td>
                                <td>{{ service.get_price_text }}</td>
                                <td>{{ service.get_down_payment_text }}</td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="5">{% trans 'No service offered yet' %}.</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>
        </div>

        {% include 'modal/confirm_modal.html' %}
    </section>
{% endblock %}
{% block customJS %}
    <!-- Bootstrap's JS and CSS (if not already included) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
            integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"
            integrity="sha512-TPh2Oxlg1zp+kz3nFA0C5vVC6leG/6mm1z9+mA81MI5eaUVqasPLO8Cuk4gMF4gUfP5etR73rgU/8PNMsSesoQ=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js"
            integrity="sha512-WW8/jxkELe2CAiE4LvQfwm1rajOS8PHasCCx+knHG0gBHt8EXxS6T6tJRTGuDQVnluuAvMxWF4j8SNFDKceLFg=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <!-- Our custom modal JS -->
    <script src="{% static 'js/modal/show_modal.js' %}"></script>

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

