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

{% 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 id="timeslots-container">
                        <div class="text-center py-4">
                            <i class="fa fa-spinner fa-spin fa-2x text-muted"></i>
                            <p class="mt-2">{% trans "در حال بارگذاری..." %}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Purchase Modal -->
<div class="modal fade" id="purchaseModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans "انتخاب روش پرداخت" %}</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="timeslot-info mb-3">
                    <h6>{% trans "اطلاعات زمان:" %}</h6>
                    <p id="modal-timeslot-info"></p>
                </div>
                
                <div class="payment-options">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card border-primary">
                                <div class="card-body text-center">
                                    <i class="fa fa-coins fa-2x text-warning mb-2"></i>
                                    <h6>{% trans "پرداخت با کوین" %}</h6>
                                    <p class="text-muted">2000 کوین</p>
                                    <button type="button" class="btn btn-warning btn-sm" onclick="purchaseWithCoins()">
                                        {% trans "خرید با کوین" %}
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card border-success">
                                <div class="card-body text-center">
                                    <i class="fa fa-money fa-2x text-success mb-2"></i>
                                    <h6>{% trans "پرداخت با پول" %}</h6>
                                    <p class="text-muted">200,000 تومان</p>
                                    <button type="button" class="btn btn-success btn-sm" onclick="purchaseWithMoney()">
                                        {% trans "خرید با پول" %}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.timeslot-card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.timeslot-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.timeslot-time {
    font-size: 1.2em;
    font-weight: bold;
    color: #007bff;
}

.timeslot-doctor {
    color: #6c757d;
    font-size: 0.9em;
}

.payment-buttons {
    margin-top: 10px;
}

.btn-payment {
    margin: 2px;
    font-size: 0.8em;
}

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

.modal-content {
    border-radius: 8px;
}

.payment-options .card {
    border-radius: 8px;
    transition: all 0.3s ease;
}

.payment-options .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
</style>

<script>
let currentTimeslotId = null;
let userToken = '{{ user_token }}'; // This should be passed from the view

function loadTimeslots() {
    fetch('/timeslot/available/for/purchase/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRFToken': '{{ csrf_token }}'
        },
        body: new URLSearchParams({
            'token': userToken
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            displayTimeslots(data.data.timeslots, data.data.user_coins);
        } else {
            showError('خطا در بارگذاری زمان‌ها: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showError('خطا در ارتباط با سرور');
    });
}

function displayTimeslots(timeslots, userCoins) {
    const container = document.getElementById('timeslots-container');
    
    if (timeslots.length === 0) {
        container.innerHTML = `
            <div class="text-center py-4">
                <i class="fa fa-calendar-times fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">{% trans "هیچ زمان‌ای در حال حاضر موجود نیست" %}</h5>
                <p class="text-muted">{% trans "لطفاً بعداً دوباره بررسی کنید" %}</p>
            </div>
        `;
        return;
    }
    
    let html = '<div class="row">';
    
    timeslots.forEach(timeslot => {
        const date = new Date(timeslot.start_time * 1000);
        const timeString = date.toLocaleString('fa-IR');
        const canPurchaseWithCoins = userCoins >= timeslot.coin_price;
        
        html += `
            <div class="col-md-6 col-lg-4">
                <div class="timeslot-card">
                    <div class="timeslot-time">${timeString}</div>
                    <div class="timeslot-doctor">${timeslot.doctor_name}</div>
                    <div class="payment-buttons">
                        <button class="btn btn-warning btn-sm btn-payment ${!canPurchaseWithCoins ? 'disabled' : ''}" 
                                onclick="openPurchaseModal(${timeslot.id}, '${timeString}', '${timeslot.doctor_name}', ${canPurchaseWithCoins})">
                            <i class="fa fa-coins"></i> ${timeslot.coin_price} کوین
                        </button>
                        <button class="btn btn-success btn-sm btn-payment" 
                                onclick="openPurchaseModal(${timeslot.id}, '${timeString}', '${timeslot.doctor_name}', true)">
                            <i class="fa fa-money"></i> ${timeslot.money_price.toLocaleString()} تومان
                        </button>
                    </div>
                </div>
            </div>
        `;
    });
    
    html += '</div>';
    container.innerHTML = html;
}

function openPurchaseModal(timeslotId, timeString, doctorName, canPurchaseWithCoins) {
    currentTimeslotId = timeslotId;
    document.getElementById('modal-timeslot-info').innerHTML = `
        <strong>زمان:</strong> ${timeString}<br>
        <strong>دکتر:</strong> ${doctorName}
    `;
    
    // Disable coin button if user doesn't have enough coins
    const coinButton = document.querySelector('.card.border-primary .btn');
    if (!canPurchaseWithCoins) {
        coinButton.disabled = true;
        coinButton.classList.add('disabled');
    } else {
        coinButton.disabled = false;
        coinButton.classList.remove('disabled');
    }
    
    $('#purchaseModal').modal('show');
}

function purchaseWithCoins() {
    if (!currentTimeslotId) return;
    
    fetch('/timeslot/purchase/with/coins/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRFToken': '{{ csrf_token }}'
        },
        body: new URLSearchParams({
            'token': userToken,
            'timeslot_id': currentTimeslotId
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            showSuccess('زمان با موفقیت خریداری شد!');
            $('#purchaseModal').modal('hide');
            loadTimeslots(); // Reload to update the list
        } else {
            showError('خطا در خرید: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showError('خطا در ارتباط با سرور');
    });
}

function purchaseWithMoney() {
    if (!currentTimeslotId) return;
    
    fetch('/timeslot/payment/link/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRFToken': '{{ csrf_token }}'
        },
        body: new URLSearchParams({
            'token': userToken,
            'timeslot_id': currentTimeslotId
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            // Redirect to payment gateway
            window.location.href = data.data.link;
        } else {
            showError('خطا در ایجاد لینک پرداخت: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showError('خطا در ارتباط با سرور');
    });
}

function showSuccess(message) {
    // Create success alert
    const alert = document.createElement('div');
    alert.className = 'alert alert-success alert-dismissible fade show';
    alert.innerHTML = `
        ${message}
        <button type="button" class="close" data-dismiss="alert">
            <span>&times;</span>
        </button>
    `;
    document.querySelector('.content').insertBefore(alert, document.querySelector('.content').firstChild);
    
    // Auto-dismiss after 5 seconds
    setTimeout(() => {
        alert.remove();
    }, 5000);
}

function showError(message) {
    // Create error alert
    const alert = document.createElement('div');
    alert.className = 'alert alert-danger alert-dismissible fade show';
    alert.innerHTML = `
        ${message}
        <button type="button" class="close" data-dismiss="alert">
            <span>&times;</span>
        </button>
    `;
    document.querySelector('.content').insertBefore(alert, document.querySelector('.content').firstChild);
    
    // Auto-dismiss after 5 seconds
    setTimeout(() => {
        alert.remove();
    }, 5000);
}

// Load timeslots when page loads
document.addEventListener('DOMContentLoaded', function() {
    loadTimeslots();
});
</script>
{% endblock %}