{% extends 'doctor/base.html' %}
{% load static %}
{% load i18n %}
{% load panel_extras %}

{% block sidebar.dashboard %} {% endblock %}
{% block sidebar.patients %} {% endblock %}
{% block sidebar.appointments %} {% endblock %}
{% block sidebar.timeslot %} class="active" {% endblock %}

{% block content %}
<div class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{% trans "ایجاد زمان برای خرید" %}</h4>
                    <p class="card-category">{% trans "زمان‌هایی که کاربران غیر پریمیوم می‌توانند خریداری کنند" %}</p>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <!-- Date Selection -->
                            <div class="date-selection mb-4">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label for="year-select" class="form-label">{% trans "انتخاب سال" %}</label>
                                        <select id="year-select" class="form-control">
                                            <!-- Persian years will be populated dynamically -->
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="month-select" class="form-label">{% trans "انتخاب ماه" %}</label>
                                        <select id="month-select" class="form-control">
                                            <option value="1">{% trans "فروردین" %}</option>
                                            <option value="2">{% trans "اردیبهشت" %}</option>
                                            <option value="3">{% trans "خرداد" %}</option>
                                            <option value="4">{% trans "تیر" %}</option>
                                            <option value="5">{% trans "مرداد" %}</option>
                                            <option value="6">{% trans "شهریور" %}</option>
                                            <option value="7">{% trans "مهر" %}</option>
                                            <option value="8">{% trans "آبان" %}</option>
                                            <option value="9">{% trans "آذر" %}</option>
                                            <option value="10">{% trans "دی" %}</option>
                                            <option value="11">{% trans "بهمن" %}</option>
                                            <option value="12">{% trans "اسفند" %}</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label for="day-select" class="form-label">{% trans "انتخاب روز" %}</label>
                                        <select id="day-select" class="form-control">
                                            <!-- Persian days will be populated dynamically -->
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <!-- Time Slots -->
                            <div class="mb-3">
                                <small class="text-muted">
                                    <i class="fa fa-info-circle"></i> 
                                    {% trans "زمان‌های سبز رنگ قبلاً ایجاد شده‌اند و قابل انتخاب نیستند" %}
                                </small>
                            </div>
                            <div id="time-slots-container">
                                <!-- Time slots will be injected here based on the day selected -->
                            </div>
                            
                            <div class="mt-4">
                                <button id="submit-button" class="btn btn-primary">
                                    {% trans "ثبت زمان‌ها برای خرید" %}
                                </button>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title">{% trans "زمان‌های موجود" %}</h5>
                                </div>
                                <div class="card-body">
                                    {% if existing_timeslots %}
                                        <div class="list-group">
                                            {% for timeslot in existing_timeslots %}
                                            <div class="list-group-item">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <div>
                                                        <strong>{{ timeslot.start_time|date:"Y/m/d" }}</strong><br>
                                                        <small>{{ timeslot.start_time|time:"H:i" }} - {{ timeslot.start_time|add_minutes:timeslot.duration|time:"H:i" }}</small>
                                                    </div>
                                                    <span class="badge badge-{% if timeslot.is_available == 1 %}success{% elif timeslot.is_available == 2 %}warning{% else %}secondary{% endif %}">
                                                        {% if timeslot.is_available == 1 %}
                                                            {% trans "موجود" %}
                                                        {% elif timeslot.is_available == 2 %}
                                                            {% trans "خریداری شده" %}
                                                        {% else %}
                                                            {% trans "رزرو شده" %}
                                                        {% endif %}
                                                    </span>
                                                </div>
                                            </div>
                                            {% endfor %}
                                        </div>
                                    {% else %}
                                        <p class="text-muted text-center">{% trans "هیچ زمان‌ای ایجاد نشده است" %}</p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.days-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.day-btn {
    margin: 3px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-size: 12px;
    min-width: 60px;
}

.day-btn:hover,
.day-btn.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.time-slot {
    display: flex;
    align-items: center;
    margin: 2px;
    padding: 6px 8px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.time-slot:hover {
    background-color: #e9ecef;
}

.time-slot input[type="checkbox"] {
    margin-right: 6px;
}

#time-slots-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 6px;
    max-width: 100%;
    margin: 0 auto;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.list-group-item {
    border-left: none;
    border-right: none;
    padding: 0.75rem;
}

.badge {
    font-size: 0.75em;
}

.date-selection .form-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.date-selection .form-control {
    border-radius: 8px;
    border: 1px solid #ddd;
    padding: 8px 12px;
    font-size: 14px;
}

.date-selection .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.existing-timeslot {
    background-color: #e8f5e8 !important;
    border-color: #28a745 !important;
    opacity: 0.8;
}

.existing-timeslot input[type="checkbox"] {
    cursor: not-allowed;
}

.existing-timeslot:hover {
    background-color: #d4edda !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .days-container {
        justify-content: center;
    }
    
    .day-btn {
        font-size: 11px;
        padding: 6px 10px;
        min-width: 50px;
    }
    
    #time-slots-container {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 4px;
        padding: 10px;
    }
    
    .time-slot {
        font-size: 11px;
        padding: 4px 6px;
    }
    
    .card-body {
        padding: 1rem;
    }
}

.card {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}
</style>

<script>
// Persian calendar conversion functions
function gregorianToPersian(year, month, day) {
    // More accurate Persian calendar conversion
    const persianYear = year - 621;
    let persianMonth, persianDay;
    
    // Approximate conversion based on Persian calendar structure
    if (month >= 3 && month <= 12) {
        persianMonth = month - 2;
        persianDay = day;
    } else {
        persianMonth = month + 10;
        persianDay = day;
        if (month === 1 || month === 2) {
            persianYear -= 1;
        }
    }
    
    return { year: persianYear, month: persianMonth, day: persianDay };
}

function persianToGregorian(persianYear, persianMonth, persianDay) {
    // More accurate Persian to Gregorian conversion
    let gregorianYear = persianYear + 621;
    let gregorianMonth, gregorianDay;
    
    if (persianMonth <= 10) {
        gregorianMonth = persianMonth + 2;
        gregorianDay = persianDay;
    } else {
        gregorianMonth = persianMonth - 10;
        gregorianDay = persianDay;
        gregorianYear += 1;
    }
    
    return { year: gregorianYear, month: gregorianMonth, day: gregorianDay };
}

document.addEventListener('DOMContentLoaded', function() {
    let selectedPersianYear = '1404';
    let selectedPersianMonth = '1';
    let selectedPersianDay = '1';
    let selectedGregorianYear = '2025';
    let selectedGregorianMonth = '3';
    let selectedGregorianDay = '21';
    
    function populatePersianYears() {
        const yearSelect = document.getElementById('year-select');
        yearSelect.innerHTML = '';
        
        // Populate Persian years (current year and next 2 years)
        const currentPersianYear = 1404; // Approximate current Persian year
        for (let year = currentPersianYear; year <= currentPersianYear + 2; year++) {
            const option = document.createElement('option');
            option.value = year;
            option.textContent = year;
            yearSelect.appendChild(option);
        }
    }
    
    function populatePersianDays() {
        const yearSelect = document.getElementById('year-select');
        const monthSelect = document.getElementById('month-select');
        const daySelect = document.getElementById('day-select');
        
        const persianYear = parseInt(yearSelect.value);
        const persianMonth = parseInt(monthSelect.value);
        
        // Clear existing days
        daySelect.innerHTML = '';
        
        // Persian month days (more accurate)
        const persianMonthDays = [31, 31, 31, 31, 31, 31, 30, 30, 30, 30, 30, 30];
        let daysInMonth = persianMonthDays[persianMonth - 1];
        
        // Handle leap year for Esfand (last month)
        if (persianMonth === 12) {
            // More accurate leap year calculation for Persian calendar
            const cycle = Math.floor((persianYear - 1) / 4);
            const isLeapYear = (persianYear - 1) % 4 === 0 && cycle % 4 !== 0;
            if (isLeapYear) {
                daysInMonth = 30; // Esfand has 30 days in leap year
            }
        }
        
        // Populate days
        for (let day = 1; day <= daysInMonth; day++) {
            const option = document.createElement('option');
            option.value = day;
            option.textContent = day;
            daySelect.appendChild(option);
        }
        
        // Update selected day if it's out of range
        if (parseInt(daySelect.value) > daysInMonth) {
            daySelect.value = daysInMonth;
        }
        
        selectedPersianYear = yearSelect.value;
        selectedPersianMonth = monthSelect.value;
        selectedPersianDay = daySelect.value;
        
        // Convert to Gregorian for backend
        const gregorian = persianToGregorian(parseInt(selectedPersianYear), parseInt(selectedPersianMonth), parseInt(selectedPersianDay));
        selectedGregorianYear = gregorian.year;
        selectedGregorianMonth = gregorian.month;
        selectedGregorianDay = gregorian.day;
        
        generateTimeSlots();
    }
    
    function generateTimeSlots() {
        const container = document.getElementById('time-slots-container');
        container.innerHTML = '';
        
        // Use Gregorian dates for backend processing
        const year = parseInt(selectedGregorianYear);
        const month = parseInt(selectedGregorianMonth);
        const day = parseInt(selectedGregorianDay);
        
        // Create date object
        const selectedDate = new Date(year, month - 1, day); // month is 0-indexed
        
        // Get existing timeslots for this date
        const existingTimeslots = {{ existing_timeslots_json|safe }};
        const selectedDateStr = `${year}-${padTime(month)}-${padTime(day)}`;
        
        // Generate time slots for the selected date
        for (let i = 0; i < 52; i++) {
            const hours = 8 + Math.floor(i / 4);
            const minutes = (i % 4) * 15;
            
            let nextHours = hours;
            let nextMinutes = minutes + 15;
            
            if (nextMinutes >= 60) {
                nextHours += 1;
                nextMinutes -= 60;
            }
            
            const startTime = padTime(hours) + ':' + padTime(minutes);
            const endTime = padTime(nextHours) + ':' + padTime(nextMinutes);
            
            // Create unique ID for this specific date and time
            const dateStr = `${year}-${padTime(month)}-${padTime(day)}`;
            const timeSlotId = `${dateStr}_${startTime.replace(':', '')}_${endTime.replace(':', '')}`;
            
            const timeSlotLabel = document.createElement('label');
            timeSlotLabel.className = 'time-slot';
            const checkBox = document.createElement('input');
            checkBox.type = 'checkbox';
            checkBox.id = timeSlotId;
            checkBox.value = `${dateStr}_${startTime}-${endTime}`;
            
            // Check if this timeslot already exists for this date
            const isExisting = existingTimeslots.some(timeslot => {
                const timeslotDate = timeslot.start_time.split('T')[0]; // Get date part only
                const timeslotTime = timeslot.start_time.split('T')[1].substring(0, 5); // Get HH:MM
                return timeslotDate === selectedDateStr && timeslotTime === startTime;
            });
            
            if (isExisting) {
                checkBox.checked = true;
                checkBox.disabled = true;
                timeSlotLabel.classList.add('existing-timeslot');
            }
            
            const labelText = document.createTextNode(`${startTime} - ${endTime}`);
            timeSlotLabel.appendChild(checkBox);
            timeSlotLabel.appendChild(labelText);
            
            // Add visual indicator for existing timeslots
            if (isExisting) {
                const indicator = document.createElement('span');
                indicator.className = 'existing-indicator';
                indicator.textContent = ' ✓';
                indicator.style.color = '#28a745';
                indicator.style.fontWeight = 'bold';
                timeSlotLabel.appendChild(indicator);
            }
            
            container.appendChild(timeSlotLabel);
        }
    }
    
    function padTime(num) {
        return num.toString().padStart(2, '0');
    }
    
    // Add change event listeners to dropdowns
    document.getElementById('year-select').addEventListener('change', populatePersianDays);
    document.getElementById('month-select').addEventListener('change', populatePersianDays);
    document.getElementById('day-select').addEventListener('change', function() {
        selectedPersianDay = this.value;
        // Convert to Gregorian for backend
        const gregorian = persianToGregorian(parseInt(selectedPersianYear), parseInt(selectedPersianMonth), parseInt(selectedPersianDay));
        selectedGregorianYear = gregorian.year;
        selectedGregorianMonth = gregorian.month;
        selectedGregorianDay = gregorian.day;
        generateTimeSlots();
    });
    
    // Submit button event listener
    document.getElementById('submit-button').addEventListener('click', function() {
        const submitButton = this;
        const originalText = submitButton.textContent;
        
        const selectedCheckboxes = document.querySelectorAll('input[type="checkbox"]:checked:not(:disabled)');
        const selectedIds = Array.from(selectedCheckboxes).map(checkbox => checkbox.id);
        
        console.log('Selected IDs:', selectedIds); // Debug log
        
        if (selectedIds.length === 0) {
            alert('{% trans "لطفاً حداقل یک زمان جدید را انتخاب کنید" %}');
            return;
        }
        
        // Show loading state
        submitButton.textContent = '{% trans "در حال ثبت..." %}';
        submitButton.disabled = true;
        
        const formData = new FormData();
        formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
        
        // Add each selected ID individually
        selectedIds.forEach(id => {
            formData.append('selectedIds', id);
        });
        
        formData.append('selectedYear', selectedGregorianYear);
        formData.append('selectedMonth', selectedGregorianMonth);
        formData.append('selectedDay', selectedGregorianDay);
        
        fetch('{% url "panel-doctor-submit-timeslot" %}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            credentials: 'same-origin'
        })
        .then(response => {
            if (response.ok) {
                alert('{% trans "زمان‌ها با موفقیت ایجاد شدند" %}');
                window.location.reload();
            } else {
                alert('{% trans "خطا در ثبت زمان‌ها" %}');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('{% trans "خطا در ثبت زمان‌ها" %}');
        })
        .finally(() => {
            // Restore button state
            submitButton.textContent = originalText;
            submitButton.disabled = false;
        });
    });
    
    // Initialize with current Persian date
    populatePersianYears();
    
    // Get current Gregorian date and convert to Persian
    const now = new Date();
    const currentGregorianYear = now.getFullYear();
    const currentGregorianMonth = now.getMonth() + 1; // getMonth() returns 0-11
    const currentGregorianDay = now.getDate();
    
    // Convert to Persian
    const currentPersian = gregorianToPersian(currentGregorianYear, currentGregorianMonth, currentGregorianDay);
    
    // Set the dropdowns to current Persian date
    document.getElementById('year-select').value = currentPersian.year;
    document.getElementById('month-select').value = currentPersian.month;
    populatePersianDays();
    document.getElementById('day-select').value = currentPersian.day;
    
    // Update the global variables
    selectedPersianYear = currentPersian.year.toString();
    selectedPersianMonth = currentPersian.month.toString();
    selectedPersianDay = currentPersian.day.toString();
    selectedGregorianYear = currentGregorianYear.toString();
    selectedGregorianMonth = currentGregorianMonth.toString();
    selectedGregorianDay = currentGregorianDay.toString();
    
    generateTimeSlots();
});
</script>
{% endblock %}