{% extends 'Base.html' %}
{% load static %}

{% block title %}Shiraz Center{% endblock %}

{% block body %}
    <div class="content">
        <h2>Service history</h2>
        <hr>

        {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
        {% endif %}

        <div class="row mb-5">
            <div class="col-md-4 text-center mt-5">
                <strong>Name:</strong> {{ patient.first_name }} {{ patient.last_name }}
            </div>
            <div class="col-md-3 text-center mt-5">
                <strong>ID:</strong> {{ patient.id }}
            </div>
            <div class="col-md-3 text-center mt-5">
                <strong>Contact number:</strong> {{ patient.phone_number }}
            </div>
            <div class="col-md-2 text-center">
                <div class="profile-image">
                    {% if patient.profile_picture %}
                        <img src="{{ patient.profile_picture.url }}" class="img-thumbnail" id="profilePreview"
                             alt="Profile picture">
                    {% else %}
                        <img src="{% static 'assets/img/image-default.png' %}" class="img-thumbnail" id="profilePreview"
                             alt="Default profile picture">
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Filter form -->
        <form method="GET" action="">
        <div class="row mb-3">
            <div class="col-md-4">
              <label for="fromDate" class="form-label">From date</label>
              <input type="date" class="form-control" id="fromDate" name="fromDate" value="{{ from_date|date:'Y-m-d' }}">
            </div>
            <div class="col-md-4">
              <label for="toDate" class="form-label">To date</label>
              <input type="date" class="form-control" id="toDate" name="toDate" value="{{ to_date|date:'Y-m-d' }}">
            </div>
            <div class="col-md-4">
              <label class="form-label d-block">&nbsp;</label> 
              <button type="submit" class="btn btn-primary w-100">Filter</button>
            </div>
        </div>
    </form>

        <!-- Date Range Info -->
        {% if from_date and to_date %}
            <div class="text-center mt-3 mb-4 bg-primary text-white p-1 rounded">
                From {{ from_date|date:'Y/m/d' }} - To {{ to_date|date:'Y/m/d' }}
            </div>
        {% endif %}
        <div class="table-responsive">
        <table class="table table-bordered text-center mb-5">
            <thead class="table-dark">
                <tr>
                    <th scope="col">Invoice</th>
                    <th scope="col">Doctor</th>
                    <th scope="col">Technician</th>
                    <th scope="col">Service</th>
                    <th scope="col">Number of units</th>
                    <th scope="col">Unit price</th>
                    <th scope="col">Discount</th> <!-- Add Discount column -->
                    <th scope="col">Discounted Price</th>
                    <th scope="col">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for item in service_history %}
                <tr>
                    <td>{{ item.invoice }}</td>
                    <td>{{ item.doctor }}</td>
                    <td>{{ item.technician }}</td>
                    <td>{{ item.service }}</td>
                    <td>{{ item.number_of_units }}</td>
                    <td>{{ item.unit_price }}$</td>
                    <td>
                        <form method="POST" action="{% url 'patient:service-update-discount' item.id %}">
                            {% csrf_token %}
                            <input type="number" name="discount" value="{{ item.discount }}" class="form-control" step="0.01" min="0">
                            <button type="submit" class="btn btn-sm btn-primary mt-1">Update</button>
                        </form>
                    </td> <!-- Display Discount with input field -->
                    <td>{{ item.total_price }}$</td>
                    <td>
                        <a href="{% url 'patient:service-edit' item.id %}" class="btn btn-sm btn-warning">Edit</a>
                        <a href="{% url 'patient:service-delete' item.id %}" class="btn btn-sm btn-danger">Delete</a>
                    </td>
                </tr>
                {% endfor %}
                <tr>
                    <td colspan="8" class="text-end">Total invoice:</td>
                    <td>{{ summary.total_invoice_price }}$</td>
                </tr>
                <tr>
                    <td colspan="8" class="text-end">Total Discount:</td>
                    <td>{{ summary.total_discount }}$</td>
                </tr>
                <tr>
                    <td colspan="8" class="text-end">Total price after discount:</td>
                    <td>{{ summary.total_price_after_discount }}$</td>
                </tr>
                <tr>
                    <td colspan="8" class="text-end">Total Services:</td>
                    <td>{{ summary.service_count }}</td>
                </tr>
                <tr>
                    <td colspan="8" class="text-end">Unique Services:</td>
                    <td>{{ summary.unique_service_count }}</td>
                </tr>  
            </tbody>
        </table>
        <form action="{% url 'patient:delete-all-services' patient.id %}" method="post">
            {% csrf_token %}
            <button type="submit" class="btn btn-danger">Delete All Services and Reset Discount</button>
        </form>
    </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(function() {
                var alerts = document.querySelectorAll('.alert');
                alerts.forEach(function(alert) {
                    var bsAlert = new bootstrap.Alert(alert);
                    bsAlert.close();
                });
            }, 2000);
        });
        
    </script>
{% endblock %}