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

{% block head %}
<!-- Load Bootstrap CSS from CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<style>
    
    /* Toast styling */
    .toast-container {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1050;
    }
    
    .toast {
        min-width: 300px;
        background-color: white;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    
    .toast-header {
        padding: 0.75rem 1rem;
        color: white;
    }
    
    .toast-header.bg-danger {
        background-color: #dc3545 !important;
    }
    
    .toast-header.bg-success {
        background-color: #28a745 !important;
    }
    
    .toast-body {
        padding: 1rem;
        font-size: 0.95rem;
    }
    
    .btn-close-white {
        filter: brightness(0) invert(1);
    }
</style>
{% endblock %}

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

{% block body %}
    <div class="content">
        <h2>Add Service</h2>
        <hr>
        <div class="row">
            <div class="col-md-3 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-3 text-end">
                <div class="profile-image">
                    <img id="profilePreview" src="{% if patient.profile_picture %}{{ patient.profile_picture.url }}{% else %}{% static 'assets/img/image-ph.png' %}{% endif %}"
                        alt="Profile picture"
                        class="img-thumbnail w-25 h-100" style="cursor: pointer;">
                </div>
            </div>
        </div>
        
        <form method="POST" enctype="multipart/form-data" class="needs-validation" novalidate>
            {% csrf_token %}
            <div class="row mb-5">
                <div class="col-md-6 text-center mt-5">
                    <select name="doctor" class="form-select" aria-label="Default select example" required>
                        <option value="">Choose Doctor</option>
                        {% for doctor in doctors %}
                            <option value="{{ doctor.id }}">Dr. {{ doctor.first_name }} {{ doctor.last_name }}</option>
                        {% endfor %}
                    </select>
                    <div class="invalid-feedback">
                        Please select a doctor.
                    </div>
                </div>
                <div class="col-md-6 text-center mt-5">
                    <select name="technician" class="form-select" aria-label="Default select example" required>
                        <option value="">Choose Technician</option>
                        {% for tech in technicians %}
                            <option value="{{ tech.id }}">Tech. {{ tech.first_name }} {{ tech.last_name }}</option>
                        {% endfor %}
                    </select>
                    <div class="invalid-feedback">
                        Please select a technician.
                    </div>
                </div>
                <div class="row mb-5">
                    <div class="col-md-6 text-center">
                        <input type="datetime-local" 
                               name="service_date" 
                               id="service-date" 
                               class="form-control"
                               value="{% now 'Y-m-d\TH:i' %}">
                        <small class="text-muted">Leave empty to use current date and time</small>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="border p-3">
                        <h5 class="text-center">Services</h5>

                        {% for service in services %}
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input service-checkbox" type="checkbox" name="service_ids" value="{{ service.id }}" id="service-{{ service.id }}" data-id="{{ service.id }}" data-price="{{ service.unit_price }}">
                                    <label class="form-check-label" for="service-{{ service.id }}">
                                        {{ service.name }}
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label for="number_of_units_{{ service.id }}" class="form-label m-0">Number of units</label>
                                <input type="number" name="number_of_units_{{ service.id }}" class="form-control mb-4 number-of-units" placeholder="Number of units" min="1" value="1" data-id="{{ service.id }}">
                            </div>
                            <div class="col-md-3">
                                <label for="unitprice-{{ service.id }}" class="form-label m-0">Unit Price</label>
                                <input type="text" id="unitprice-{{ service.id }}" class="form-control mb-4" value="{{ service.unit_price }}" disabled>
                            </div>
                            <div class="col-md-3">
                                <label for="discount_{{ service.id }}" class="form-label m-0">Discount</label>
                                <input type="number" name="discount_{{ service.id }}" class="form-control mb-4 discount" placeholder="Discount" min="0" value="0" data-id="{{ service.id }}">
                            </div>
                        </div>
                        {% endfor %}      
                    </div>
                </div>

                <div class="col-md-6">
                    <table class="table table-bordered text-center">
                        <thead class="table-secondary">
                            <tr>
                                <th>Service</th>
                                <th>Units</th>
                                <th>Unit Price</th>
                                <th>Total Price</th>
                            </tr>
                        </thead>
                        <tbody id="service-summary">
                            <!-- JavaScript will populate this dynamically -->
                        </tbody>
                        <tr>
                            <td colspan="3" class="text-end">Total Price:</td>
                            <td id="total-invoice">0$</td>
                        </tr>
                        <tr>
                            <td colspan="3" class="text-end">Total Discount:</td>
                            <td id="total-discount">0$</td>
                        </tr>
                        <tr>
                            <td colspan="3" class="text-end">Total Invoice: </td>
                            <td id="final-price">0$</td>
                        </tr>
                    </table>
                    <div class="input-group">
                        <button type="submit" class="btn btn-success w-100 rounded mt-2">Add Service</button>
                        <button type="button" class="btn btn-primary w-100 rounded mt-2" data-bs-toggle="modal" data-bs-target="#reservationModal">Reserve Service</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

<!-- Reservation Modal -->
<div class="modal fade" id="reservationModal" tabindex="-1" aria-labelledby="reservationModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="reservationModalLabel">Reserve Service</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="reservationForm" method="post">
            {% csrf_token %}
            <input type="hidden" name="patient_id" value="{{ patient.id }}">
            <div class="mb-3">
              <label for="service" class="form-label">Service</label>
              <select name="service" class="form-select" required>
                  {% for service in services %}
                      <option value="{{ service.id }}">{{ service.name }}</option>
                  {% endfor %}
              </select>
            </div>
            <div class="mb-3">
              <label for="reservation_date" class="form-label">Reservation Date</label>
              <input type="datetime-local" name="reservation_date" class="form-control" min="{{ now|date:"Y-m-d\TH:i" }}" required>
            </div>
            <div class="mb-3">
              <label for="doctor" class="form-label">Doctor</label>
              <select name="doctor" class="form-select" required>
                  {% for doctor in doctors %}
                      <option value="{{ doctor.id }}">Dr. {{ doctor.first_name }} {{ doctor.last_name }}</option>
                  {% endfor %}
              </select>
            </div>
            <div class="mb-3">
              <label for="technician" class="form-label">Technician</label>
              <select name="technician" class="form-select" required>
                  {% for tech in technicians %}
                      <option value="{{ tech.id }}">Tech. {{ tech.first_name }} {{ tech.last_name }}</option>
                  {% endfor %}
              </select>
            </div>
            <div class="mb-3">
              <label for="notes" class="form-label">Notes</label>
              <textarea name="notes" class="form-control" rows="3"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Reserve</button>
          </form>
        </div>
      </div>
    </div>
</div>

<!-- Toast Container -->
<div class="toast-container">
</div>

{% comment %} <!-- Bootstrap Bundle JS from CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> {% endcomment %}
<script>
    const serviceCheckboxes = document.querySelectorAll('.service-checkbox');
    const numberOfUnitsInputs = document.querySelectorAll('.number-of-units');
    const discountInputs = document.querySelectorAll('.discount');

    serviceCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', calculateTotalInvoice);
    });

    numberOfUnitsInputs.forEach(input => {
        input.addEventListener('input', calculateTotalInvoice);
    });

    discountInputs.forEach(input => {
        input.addEventListener('input', calculateTotalInvoice);
    });

    function calculateTotalInvoice() {
        let totalInvoice = 0;
        let totalDiscount = 0;
        let totalPrice = 0;
        const summaryTable = document.getElementById('service-summary');
        summaryTable.innerHTML = ''; // Clear previous summary

        const checkboxes = document.querySelectorAll('.service-checkbox:checked');
        checkboxes.forEach((checkbox) => {
            const serviceId = checkbox.getAttribute('data-id');
            const unitPrice = parseFloat(checkbox.getAttribute('data-price'));
            const numberOfUnitsInput = document.querySelector(`.number-of-units[data-id="${serviceId}"]`);
            const numberOfUnits = parseInt(numberOfUnitsInput.value) || 1;
            const discountInput = document.querySelector(`.discount[data-id="${serviceId}"]`);
            const discount = parseFloat(discountInput.value) || 0;
            const totalServicePrice = unitPrice * numberOfUnits;
            const discountedPrice = totalServicePrice - discount;

            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${checkbox.nextElementSibling.innerText}</td>
                <td>${numberOfUnits}</td>
                <td>${unitPrice.toFixed(2)}$</td>
                <td>${discountedPrice.toFixed(2)}$</td>
            `;
            summaryTable.appendChild(row);
            totalInvoice += totalServicePrice;
            totalDiscount += discount;
            totalPrice += discountedPrice;
        });

        document.getElementById('total-invoice').innerText = totalInvoice.toFixed(2) + '$';
        document.getElementById('total-discount').innerText = totalDiscount.toFixed(2) + '$';
        document.getElementById('final-price').innerText = totalPrice.toFixed(2) + '$';

        return totalPrice;
    }

    calculateTotalInvoice();

    // Bootstrap form validation
    (function () {
        'use strict'
        var forms = document.querySelectorAll('.needs-validation');
        Array.prototype.slice.call(forms)
            .forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
    })();

    document.getElementById('service-date').addEventListener('change', function(event) {
        const doctorId = document.querySelector('select[name="doctor"]').value;
        const serviceDate = event.target.value;
        if (doctorId && serviceDate) {
            fetch(`/api/check-slot/?doctor_id=${doctorId}&service_date=${serviceDate}`)
                .then(response => response.json())
                .then(data => {
                    if (!data.available) {
                        showToast(
                            'Time Slot Unavailable', 
                            'Selected time slot is not available. Please choose another time.',
                            'danger'
                        );
                    } else {
                        showToast(
                            'Time Slot Available', 
                            'Selected time slot is available!',
                            'success'
                        );
                    }
                });
        }
    });

    document.getElementById('reservationForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const form = event.target;
        const formData = new FormData(form);
        const doctorId = form.querySelector('select[name="doctor"]').value;
        const reservationDate = form.querySelector('input[name="reservation_date"]').value;

        // First check slot availability
        fetch(`/reservation/check-slot/?doctor_id=${doctorId}&service_date=${reservationDate}`)
            .then(response => response.json())
            .then(data => {
                if (data.available) {
                    // Proceed with reservation creation
                    submitReservation(form);
                } else {
                    showToast('Error', data.message || 'Time slot is not available', 'danger');
                }
            })
            .catch(error => {
                showToast('Error', 'Failed to check slot availability', 'danger');
            });
    });

    function submitReservation(form) {
        const formData = new FormData(form);
        const patientId = "{{ patient.id }}";

        fetch(`/reservation/new/${patientId}/`, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
            },
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast('Success', 'Reservation created successfully!', 'success');
                form.reset();
                const modalElement = document.getElementById('reservationModal');
                const modalInstance = bootstrap.Modal.getInstance(modalElement);
                if (modalInstance) {
                    modalInstance.hide();
                }
                setTimeout(() => {
                    window.location.reload();
                }, 2000);
            } else {
                showToast('Error', data.error || 'Failed to create reservation', 'danger');
            }
        })
        .catch(error => {
            showToast('Error', error.message, 'danger');
        });
    }

    // Add input event listener to enforce 30-minute intervals
    document.querySelector('input[name="reservation_date"]').addEventListener('change', function(e) {
        const date = new Date(this.value);
        const minutes = date.getMinutes();
        
        // Only adjust if minutes are not already on a 30-minute interval
        if (minutes % 30 !== 0) {
            // Round to nearest 30 minutes
            const roundedMinutes = Math.round(minutes / 30) * 30;
            date.setMinutes(roundedMinutes);
            date.setSeconds(0);
            date.setMilliseconds(0);
            
            // Format date to local datetime string
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const mins = String(date.getMinutes()).padStart(2, '0');
            
            this.value = `${year}-${month}-${day}T${hours}:${mins}`;
        }
    });

    document.getElementById('reservationForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const form = event.target;
        const formData = new FormData(form);
        const patientId = "{{ patient.id }}";

        // Client-side validation for reservation date
        const reservationDateInput = form.querySelector('input[name="reservation_date"]');
        const reservationDate = new Date(reservationDateInput.value);
        const now = new Date();

        if (reservationDate < now) {
            showToast('Invalid Date', 'You cannot select a past date for reservation.', 'danger');
            return;
        }

        fetch(`/reservation/new/${patientId}/`, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
            },
        })
        .then(response => {
            if (response.headers.get('content-type')?.includes('application/json')) {
                return response.json();
            } else {
                return response.text().then(text => { throw new Error(text); });
            }
        })
        .then(data => {
            if (data.success) {
                showToast('Success', 'Reservation created successfully!', 'success');
                form.reset();
                const modalElement = document.getElementById('reservationModal');
                const modalInstance = bootstrap.Modal.getInstance(modalElement);
                if (modalInstance) {
                    modalInstance.hide();
                }
                setTimeout(() => {
                    window.location.reload();
                }, 2000);
            } else {
                showToast('Error', 'Reservation failed: ' + data.error, 'danger');
            }
        })
        .catch(error => {
            showToast('Error', 'An error occurred: ' + error.message, 'danger');
        });
    });

    function showToast(title, message, type = 'success') {
        const toastContainer = document.querySelector('.toast-container');
        const toastHTML = `
            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header bg-${type} text-white">
                    <strong class="me-auto">${title}</strong>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                    ${message}
                </div>
            </div>
        `;
        
        toastContainer.insertAdjacentHTML('beforeend', toastHTML);
        const toastElement = toastContainer.lastElementChild;
        const toast = new bootstrap.Toast(toastElement, {
            autohide: true,
            delay: 5000
        });
        
        toast.show();
        
        toastElement.addEventListener('hidden.bs.toast', () => {
            toastElement.remove();
        });
    }
</script>
{% endblock %}