<?php
if (session_status() === PHP_SESSION_NONE) session_start();
require_once '../config.php';

// Check if patient is logged in
if (!isset($_SESSION['opd_patient'])) {
    header('Location: index.php');
    exit;
}

$patient_id = (int)$_SESSION['opd_patient'];
$patient = $conn->query("SELECT name, mobile FROM opd_patients WHERE id = $patient_id")->fetch_assoc();

if (!$patient) {
    session_destroy();
    header('Location: index.php');
    exit;
}

// Get success/error messages from session
$success = $_SESSION['booking_success'] ?? '';
$error = $_SESSION['booking_error'] ?? '';
unset($_SESSION['booking_success'], $_SESSION['booking_error']);

// Fetch chambers for dropdown
$chambers = $conn->query("SELECT id, name, address FROM chambers WHERE status = 'active' ORDER BY name");
?>
<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>নতুন অ্যাপয়েন্টমেন্ট | <?= htmlspecialchars($brand['name'] ?? 'ওয়ান হোমিওপ্যাথি') ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root{--p:#2d6a4f;--pl:#52b788;--pd:#1b4332}
        *{font-family:'Segoe UI','Hind Siliguri',sans-serif;box-sizing:border-box}
        body{background:linear-gradient(135deg, #f0f2f5, #e8ecf1);min-height:100vh;padding:20px}
        .booking-container{max-width:650px;margin:40px auto}
        .card{border:none;border-radius:24px;box-shadow:0 10px 40px rgba(0,0,0,0.1);overflow:hidden;animation:fadeInUp 0.6s ease}
        @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
        .card-header{background:linear-gradient(135deg,#1b4332,#2d6a4f);color:#fff;padding:25px 30px;text-align:center}
        .card-header h4{font-weight:700;margin:0}
        .card-header small{opacity:0.85}
        .card-body{padding:30px}
        .form-label{font-weight:600;color:#2c3e50;margin-bottom:6px;font-size:0.9rem}
        .form-label .required{color:#dc3545;margin-left:3px}
        .form-control,.form-select{border-radius:12px;border:1px solid #ddd;padding:10px 15px;transition:all 0.3s;font-size:0.95rem}
        .form-control:focus,.form-select:focus{border-color:#2d6a4f;box-shadow:0 0 0 3px rgba(45,106,79,0.15)}
        .btn-book{background:linear-gradient(135deg,#2d6a4f,#52b788);color:#fff;border:none;border-radius:50px;padding:14px;font-weight:700;font-size:1.1rem;width:100%;transition:all 0.3s}
        .btn-book:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(45,106,79,0.35);color:#fff}
        .btn-book:active{transform:translateY(0)}
        .fee-box{background:#e8f5e9;border-radius:15px;padding:15px;text-align:center;border:2px dashed #2d6a4f}
        .fee-amount{font-size:2rem;font-weight:800;color:#2d6a4f}
        .fee-label{font-size:0.85rem;color:#6c757d;font-weight:600}
        .alert{border-radius:12px;padding:12px 18px}
        .alert-success{background:#d4edda;border-color:#c3e6cb;color:#155724}
        .alert-danger{background:#f8d7da;border-color:#f5c6cb;color:#721c24}
        .patient-info{background:#f8faf9;border-radius:12px;padding:12px 18px;display:flex;justify-content:space-between;flex-wrap:wrap;margin-bottom:20px;border:1px solid #e9ecef}
        .patient-info strong{color:#2d6a4f}
        .back-link{color:#6c757d;text-decoration:none;transition:0.3s;font-size:0.9rem}
        .back-link:hover{color:#2d6a4f;text-decoration:underline}
        .form-text{font-size:0.8rem;color:#6c757d;margin-top:4px}
        
        /* Loading spinner for time slots */
        .slot-loading{display:inline-block;width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid #2d6a4f;border-radius:50%;animation:spin 0.8s linear infinite;vertical-align:middle;margin-right:8px}
        @keyframes spin{to{transform:rotate(360deg)}}
        
        @media(max-width:576px){.card-body{padding:20px}.fee-amount{font-size:1.5rem}.patient-info{flex-direction:column;gap:5px}}
    </style>
</head>
<body>
<div class="booking-container">
    <div class="card">
        <div class="card-header">
            <h4><i class="fas fa-calendar-plus me-2"></i> নতুন অ্যাপয়েন্টমেন্ট</h4>
            <small>ডা. মোঃ ফেরদৌস - হোমিওপ্যাথি বিশেষজ্ঞ</small>
        </div>
        <div class="card-body">
            <!-- Patient Info -->
            <div class="patient-info">
                <span><strong>👤 রোগী:</strong> <?= htmlspecialchars($patient['name']) ?></span>
                <span><strong>📞 মোবাইল:</strong> <?= htmlspecialchars($patient['mobile']) ?></span>
            </div>

            <?php if ($success): ?>
                <div class="alert alert-success"><?= $success ?></div>
            <?php elseif ($error): ?>
                <div class="alert alert-danger"><?= $error ?></div>
            <?php endif; ?>

            <form id="bookingForm" method="post" action="process_booking.php" novalidate>
                <!-- Chamber Selection -->
                <div class="mb-3">
                    <label class="form-label">চেম্বার নির্বাচন করুন <span class="required">*</span></label>
                    <select name="chamber_id" id="chamber_id" class="form-select" required>
                        <option value="">-- চেম্বার বাছাই করুন --</option>
                        <?php while ($ch = $chambers->fetch_assoc()): ?>
                            <option value="<?= $ch['id'] ?>"><?= htmlspecialchars($ch['name']) ?> - <?= htmlspecialchars($ch['address']) ?></option>
                        <?php endwhile; ?>
                    </select>
                    <div class="form-text">অ্যাপয়েন্টমেন্ট নিতে চেম্বার নির্বাচন করুন।</div>
                </div>

                <!-- Appointment Date -->
                <div class="mb-3">
                    <label class="form-label">তারিখ <span class="required">*</span></label>
                    <input type="date" name="appointment_date" id="appointment_date" class="form-control" min="<?= date('Y-m-d', strtotime('+3 days')) ?>" required>
                    <div class="form-text">অ্যাপয়েন্টমেন্ট অবশ্যই ৩ দিন আগে বুক করতে হবে।</div>
                </div>

                <!-- Time Slot -->
                <div class="mb-3">
                    <label class="form-label">সময় স্লট <span class="required">*</span></label>
                    <select name="time_slot" id="time_slot" class="form-select" required disabled>
                        <option value="">প্রথমে চেম্বার ও তারিখ নির্বাচন করুন</option>
                    </select>
                    <div class="form-text" id="slotInfo">চেম্বার ও তারিখ নির্বাচন করলে সময় স্লট দেখাবে।</div>
                </div>

                <!-- Patient Category -->
                <div class="mb-3">
                    <label class="form-label">রোগীর ধরণ <span class="required">*</span></label>
                    <select name="patient_category" id="patient_category" class="form-select" required>
                        <option value="regular">সাধারণ (২০০ টাকা)</option>
                        <option value="special">বিশেষ রোগী (৫০০ টাকা)</option>
                        <option value="free_medicine">ফ্রি মেডিসিন ক্যাম্প (১০০ টাকা)</option>
                    </select>
                    <div class="form-text">ফ্রি মেডিসিন ক্যাম্প শুধুমাত্র নির্ধারিত দিনে প্রযোজ্য (ফি ০ টাকা হতে পারে)।</div>
                </div>

                <!-- Booking Type -->
                <div class="mb-3">
                    <label class="form-label">বুকিং ধরণ <span class="required">*</span></label>
                    <select name="booking_type" id="booking_type" class="form-select" required>
                        <option value="online">অনলাইন</option>
                        <option value="offline">অফলাইন</option>
                    </select>
                    <div class="form-text">অনলাইন বুকিং মানে ওয়েবসাইট/অ্যাপের মাধ্যমে, অফলাইন মানে সরাসরি চেম্বারে।</div>
                </div>

                <!-- Fee Display -->
                <div class="fee-box mb-4">
                    <div class="fee-label">মোট ফি</div>
                    <div class="fee-amount" id="fee_display">০ টাকা</div>
                    <input type="hidden" name="fee" id="fee" value="0">
                </div>

                <button type="submit" class="btn-book" id="submitBtn">
                    <i class="fas fa-check-circle me-2"></i> অ্যাপয়েন্টমেন্ট নিশ্চিত করুন
                </button>
            </form>

            <div class="text-center mt-3">
                <a href="dashboard.php?tab=appointments" class="back-link">
                    <i class="fas fa-arrow-left me-1"></i> আমার অ্যাপয়েন্টমেন্টে ফিরুন
                </a>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // =========================================================
    // LOAD TIME SLOTS
    // =========================================================
    function loadTimeSlots() {
        var chamber_id = $('#chamber_id').val();
        var date = $('#appointment_date').val();
        var category = $('#patient_category').val();
        
        if (chamber_id && date) {
            $('#time_slot').prop('disabled', true).html('<option value=""><span class="slot-loading"></span> লোড হচ্ছে...</option>');
            $('#slotInfo').html('<span class="slot-loading"></span> স্লট লোড হচ্ছে...');
            
            $.post('ajax_get_slots.php', { 
                chamber_id: chamber_id, 
                date: date, 
                category: category 
            })
            .done(function(data) {
                $('#time_slot').html(data).prop('disabled', false);
                $('#slotInfo').html('উপলব্ধ স্লট থেকে একটি নির্বাচন করুন।');
                
                // Auto-select if only one option
                var options = $('#time_slot option');
                if (options.length === 2 && options.eq(0).val() === "") {
                    options.eq(1).prop('selected', true);
                } else if (options.length === 1 && options.eq(0).val() !== "") {
                    options.eq(0).prop('selected', true);
                }
            })
            .fail(function() {
                $('#time_slot').html('<option value="">স্লট লোড করতে ব্যর্থ</option>').prop('disabled', false);
                $('#slotInfo').html('❌ স্লট লোড করতে সমস্যা হয়েছে। আবার চেষ্টা করুন।');
            });
        } else {
            $('#time_slot').html('<option value="">প্রথমে চেম্বার ও তারিখ নির্বাচন করুন</option>').prop('disabled', true);
            $('#slotInfo').html('চেম্বার ও তারিখ নির্বাচন করলে সময় স্লট দেখাবে।');
        }
    }

    // =========================================================
    // UPDATE FEE
    // =========================================================
    function updateFee() {
        var category = $('#patient_category').val();
        var chamber_id = $('#chamber_id').val();
        var date = $('#appointment_date').val();
        
        if (chamber_id && date && category) {
            $.post('calculate_fee.php', { 
                category: category, 
                chamber_id: chamber_id, 
                date: date 
            })
            .done(function(fee) {
                var feeText = fee + ' টাকা';
                if (fee == 0) {
                    feeText = '০ টাকা (ফ্রি)';
                }
                $('#fee_display').text(feeText);
                $('#fee').val(fee);
            })
            .fail(function() {
                $('#fee_display').text('ফি নির্ধারণে সমস্যা');
            });
        } else {
            $('#fee_display').text('০ টাকা');
            $('#fee').val('0');
        }
    }

    // =========================================================
    // EVENT HANDLERS
    // =========================================================
    $('#chamber_id, #appointment_date, #patient_category').on('change', function() {
        loadTimeSlots();
        updateFee();
    });

    // =========================================================
    // FORM VALIDATION
    // =========================================================
    $('#bookingForm').on('submit', function(e) {
        var chamber = $('#chamber_id').val();
        var date = $('#appointment_date').val();
        var timeSlot = $('#time_slot').val();
        
        if (!chamber || !date || !timeSlot) {
            e.preventDefault();
            alert('দয়া করে চেম্বার, তারিখ এবং সময় স্লট নির্বাচন করুন।');
            return false;
        }
        return true;
    });

    // =========================================================
    // INITIAL LOAD - Set default date to +3 days
    // =========================================================
    var today = new Date();
    var minDate = new Date(today);
    minDate.setDate(minDate.getDate() + 3);
    var year = minDate.getFullYear();
    var month = String(minDate.getMonth() + 1).padStart(2, '0');
    var day = String(minDate.getDate()).padStart(2, '0');
    $('#appointment_date').val(year + '-' + month + '-' + day);
    
    // Trigger initial load
    setTimeout(function() {
        loadTimeSlots();
        updateFee();
    }, 300);
});
</script>
</body>
</html>