{% extends "base.html" %}

{% block content %}
<section class="container py-5" data-aos="fade-up">
    <div class="text-center mb-5">
        <span class="badge bg-danger mb-2" style="background:linear-gradient(135deg,#c41e3a,#8b0000);padding:8px 20px;border-radius:50px;">
            <i class="fas fa-calendar-check"></i> رزرو نوبت
        </span>
        <h2 class="fw-bold">ثبت درخواست <span style="color:#c41e3a;">تعمیرات دوو</span></h2>
        <p class="text-secondary">با تکمیل فرم زیر، درخواست شما ثبت و تکنسین به محل اعزام می‌شود</p>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card border-0 shadow-lg" style="border-radius:20px;overflow:hidden;">
                <div class="card-body p-4 p-md-5">
                    {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                            {% for category, message in messages %}
                                <div class="alert alert-{{ category }} alert-dismissible fade show">
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}

                    <form method="POST" action="{{ url_for('booking') }}" id="bookingForm">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">نوع سرویس</label>
                                <select name="service_id" class="form-select form-select-lg" required>
                                    <option value="">انتخاب کنید</option>
                                    {% for service in services %}
                                    <option value="{{ service.id }}">{{ service.title }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">منطقه</label>
                                <select name="region_id" class="form-select form-select-lg" required>
                                    <option value="">انتخاب کنید</option>
                                    {% for region in regions %}
                                    <option value="{{ region.id }}">{{ region.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold">آدرس کامل</label>
                                <input type="text" name="address" class="form-control form-control-lg" 
                                       placeholder="خیابان، کوچه، پلاک..." required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">تاریخ مورد نظر (شمسی)</label>
                                <input type="text" name="scheduled_date" class="form-control form-control-lg" 
                                       placeholder="مثال: ۱۴۰۴-۰۴-۲۵" 
                                       id="persianDateInput" required
                                       autocomplete="off">
                                <small class="text-muted">تاریخ را به صورت شمسی وارد کنید (سال-ماه-روز)</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">ساعت مورد نظر</label>
                                <input type="time" name="scheduled_time" class="form-control form-control-lg" required>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold">توضیحات</label>
                                <textarea name="description" class="form-control" rows="4" 
                                          placeholder="مشکل دستگاه، مدل و سایر توضیحات..."></textarea>
                            </div>
                            <div class="col-12">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" name="is_emergency" id="emergency">
                                    <label class="form-check-label" for="emergency">
                                        <span class="text-danger"><i class="fas fa-exclamation-circle"></i> درخواست اضطراری (۲۴ ساعته)</span>
                                    </label>
                                </div>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-danger w-100 btn-lg"
                                        style="background:linear-gradient(135deg,#c41e3a,#8b0000);border:none;border-radius:12px;padding:14px;">
                                    <i class="fas fa-check-circle"></i> ثبت درخواست
                                </button>
                            </div>
                        </div>
                    </form>

                    <div class="mt-4 p-3 bg-light rounded-3">
                        <div class="row text-center">
                            <div class="col-4">
                                <i class="fas fa-clock" style="color:#c41e3a;font-size:1.5rem;"></i>
                                <p class="small mb-0">پاسخگویی<br><strong>۲۴ ساعته</strong></p>
                            </div>
                            <div class="col-4">
                                <i class="fas fa-user-clock" style="color:#c41e3a;font-size:1.5rem;"></i>
                                <p class="small mb-0">اعزام تکنسین<br><strong>کمتر از ۲ ساعت</strong></p>
                            </div>
                            <div class="col-4">
                                <i class="fas fa-shield-alt" style="color:#c41e3a;font-size:1.5rem;"></i>
                                <p class="small mb-0">ضمانت<br><strong>۳ ماهه</strong></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ===== اسکریپت تبدیل تاریخ شمسی ===== -->
<script src="https://cdn.jsdelivr.net/npm/persian-date@1.1.0/dist/persian-date.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var dateInput = document.getElementById('persianDateInput');
    var form = document.getElementById('bookingForm');
    
    // ===== تبدیل تاریخ شمسی به میلادی قبل از ارسال =====
    form.addEventListener('submit', function(e) {
        var persianDateStr = dateInput.value.trim();
        if (persianDateStr) {
            try {
                // تبدیل تاریخ شمسی به میلادی
                var parts = persianDateStr.split('-');
                if (parts.length === 3) {
                    var year = parseInt(parts[0]);
                    var month = parseInt(parts[1]);
                    var day = parseInt(parts[2]);
                    
                    // بررسی معتبر بودن تاریخ
                    if (year > 1300 && year < 1500 && month >= 1 && month <= 12 && day >= 1 && day <= 31) {
                        var persianDate = new PersianDate([year, month, day]);
                        if (persianDate.isValid()) {
                            var gregorian = persianDate.toCalendar('gregorian');
                            var gregorianStr = gregorian.format('YYYY-MM-DD');
                            dateInput.value = gregorianStr;
                            return true;
                        }
                    }
                }
                alert('لطفاً تاریخ را به صورت صحیح وارد کنید (مثال: ۱۴۰۴-۰۴-۲۵)');
                e.preventDefault();
                return false;
            } catch(e) {
                alert('لطفاً تاریخ را به صورت صحیح وارد کنید (مثال: ۱۴۰۴-۰۴-۲۵)');
                e.preventDefault();
                return false;
            }
        }
    });
    
    // ===== اعتبارسنجی لحظه‌ای تاریخ =====
    dateInput.addEventListener('blur', function() {
        var value = this.value.trim();
        if (value) {
            var parts = value.split('-');
            if (parts.length === 3) {
                var year = parseInt(parts[0]);
                var month = parseInt(parts[1]);
                var day = parseInt(parts[2]);
                if (year < 1300 || year > 1500 || month < 1 || month > 12 || day < 1 || day > 31) {
                    this.style.borderColor = 'red';
                } else {
                    this.style.borderColor = 'green';
                }
            } else {
                this.style.borderColor = 'red';
            }
        }
    });
    
    // ===== راهنما برای کاربر =====
    dateInput.addEventListener('focus', function() {
        this.placeholder = 'سال-ماه-روز (مثال: ۱۴۰۴-۰۴-۲۵)';
    });
    
    dateInput.addEventListener('blur', function() {
        if (!this.value) {
            this.placeholder = 'مثال: ۱۴۰۴-۰۴-۲۵';
        }
    });
});
</script>

<style>
    /* استایل تاریخ ورودی */
    #persianDateInput {
        direction: ltr;
        text-align: center;
        font-feature-settings: "ss02";
    }
    #persianDateInput::placeholder {
        text-align: center;
    }
    #persianDateInput:focus {
        border-color: #c41e3a;
        box-shadow: 0 0 0 0.2rem rgba(196, 30, 58, 0.25);
    }
</style>
{% endblock %}