{% extends BASE_TEMPLATE %}
{% load i18n %}
{% load static %}
{% block customCSS %}

{% endblock %}
{% block title %}
    {{ page_title }}
{% endblock %}
{% block description %}
    {{ page_description }}
{% endblock %}
{% block content %}

            <div class="row mt-4">
                <div class="col-6">
                {% translate "Confirm Deletion" as modal_title %}
                {% translate "Delete" as delete_btn_modal %}

                <h3>{% trans 'Personal Information' %}</h3>
                <!-- Display fields from PersonalInformationForm -->
                <div class="section-content">
                    <p><strong>{% trans 'First name' %}:</strong> {{ user.first_name }}</p>
                    <p><strong>{% trans 'Last name' %}:</strong> {{ user.last_name }}</p>
                    <p><strong>{% trans 'Email' %}:</strong> {{ user.email }}</p>
                </div>
                <a href="{% url 'appointment:update_user_info' user.id %}"
                   class="btn btn-sm btn-phoenix-primary">
                    <i class="fas fa-pen"></i>
                </a>
                </div>
            </div>

            <!-- Appointment Information Section -->
            <div class="row mt-4">
            <div class="col-6">
                <h3>{% trans 'Appointments Information' %}</h3>
                <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="btn btn-sm section-content-button modify-btn button-color-blue btn-phoenix-primary">
                        <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="btn btn-sm section-content-button modify-btn button-color-green btn-phoenix-success">
                        <i class="fas fa-add"></i>
                    </a>
                {% endif %}
            </div>
            </div>

            <!-- Days Off Information Section -->
            <section class="profile">
            <div class="container">
                <h3>{% trans 'Days Off' %}</h3>
                <a href="{% url 'appointment:add_day_off' staff_user_id=user.id %}"
                   class="btn btn-sm section-content-button modify-btn button-color-green btn-phoenix-success">
                    <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="table-responsive">
              <table class="table table-sm fs-9 mb-1">
                        <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="btn-group btn-group-sm">
                                        {% if superuser %}
                                            <a href="{% url 'appointment:update_day_off_id' day_off_id=day_off.id staff_user_id=user.id %}"
                                               class="btn btn-sm modify-btn button-color-blue btn-phoenix-primary">
                                                <i class="fas fa-pen"></i>
                                            </a>
                                        {% else %}
                                            <a href="{% url 'appointment:update_day_off' day_off_id=day_off.id %}"
                                               class="btn btn-sm modify-btn button-color-blue btn-phoenix-primary">
                                                <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 btn btn-sm btn-phoenix-danger">
                                                <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 btn btn-sm btn-phoenix-danger">
                                                <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>
            </div>
            </section>

            <!-- Working Hours Information Section -->
            <section class="profile">
            <div class="container">
                <h3>{% trans 'Working Hours' %}</h3>
                <a href="{% url 'appointment:add_working_hours_id' user.id %}"
                   class="section-content-button modify-btn button-color-green btn btn-sm btn-phoenix-success">
                    <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="table-responsive">
              <table class="table table-sm fs-9 mb-1">
                        <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 btn btn-sm btn-phoenix-primary">
                                                <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 btn btn-sm btn-phoenix-primary">
                                                <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 btn btn-sm btn-phoenix-danger">
                                                <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 btn btn-sm btn-phoenix-danger">
                                                <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>
            </div>
            </section>

            <!-- Service Information Section -->
            <section class="profile">
            <div class="container">
                <h3>{% trans 'Service Offered' %}</h3>
                <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="table-responsive">
              <table class="table table-sm fs-9 mb-0">
                        <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>
            </div>
            </section>


        {% include 'modal/confirm_modal.html' %}
{% endblock %}
{% block customJS %}
    <!-- Bootstrap's JS and CSS (if not already included) -->


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

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