<?php
ob_start();
header('Content-Type: text/html; charset=utf-8');
include 'includes/header.php';
?>

<style>
/* Glassmorphism & Dynamic Design */
.support-wrapper {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    padding: 2rem;
}
.support-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    padding: 3rem 2.5rem;
    max-width: 500px;
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.support-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}
.support-icon {
    font-size: 3.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
    display: inline-block;
}
.support-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #2d3748;
    margin-bottom: 0.5rem;
    font-family: 'SolaimanLipi', sans-serif;
}
.support-subtitle {
    color: #718096;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}
.input-group-custom {
    position: relative;
    margin-bottom: 1.5rem;
}
.input-group-custom i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #a0aec0;
    font-size: 1.1rem;
}
.form-control-custom {
    width: 100%;
    padding: 14px 16px 14px 45px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    color: #2d3748;
    background: #f7fafc;
    transition: all 0.3s ease;
}
.form-control-custom:focus {
    outline: none;
    border-color: #667eea;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
}
.btn-action {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.btn-duplicate {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
    color: #b83253;
    margin-bottom: 1rem;
}
.btn-duplicate:hover {
    background: linear-gradient(135deg, #fecfef 0%, #ff9a9e 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(255, 154, 158, 0.3);
}
.btn-print {
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
    color: #0b683b;
}
.btn-print:hover {
    background: linear-gradient(135deg, #8fd3f4 0%, #84fab0 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(132, 250, 176, 0.3);
}
</style>

<div class="support-wrapper">
    <div class="support-card text-center">
        <div class="support-icon"><i class="fas fa-headset"></i></div>
        <h2 class="support-title">স্মার্ট সাপোর্ট পোর্টাল</h2>
        <p class="support-subtitle">শুধুমাত্র আবেদন নম্বর ও জন্ম তারিখ দিয়ে সব কাজ এক জায়গায়!</p>

        <form id="supportForm" method="POST" target="_blank">
            <div class="input-group-custom text-start">
                <i class="fas fa-hashtag"></i>
                <input type="text" id="common_app_id" class="form-control-custom" placeholder="আবেদন নম্বর (যেমন: 260069955)" required>
            </div>
            
            <div class="input-group-custom text-start">
                <i class="fas fa-calendar-alt"></i>
                <input type="date" id="common_dob" class="form-control-custom" required>
            </div>

            <button type="button" class="btn-action btn-duplicate" onclick="submitForm('duplicate')">
                <i class="fas fa-clone"></i> পসিবল ডুপ্লিকেট চেক করুন
            </button>
            
            <button type="button" class="btn-action btn-print" onclick="submitForm('print')">
                <i class="fas fa-print"></i> আবেদন প্রিন্ট করুন
            </button>
        </form>
    </div>
</div>

<!-- পাবলিক সার্ভিস সেকশন -->
<div class="container mb-5">
    <div class="text-center mb-4">
        <h3 style="font-family: 'SolaimanLipi', sans-serif; font-weight: 700; color: #2d3748;">পাবলিক সার্ভার সেবাসমূহ (সরাসরি লিংক)</h3>
        <p class="text-muted">লগিন ছাড়াই সরাসরি ব্রাউজার থেকে এই সেবাগুলো ব্যবহার করা যাবে</p>
    </div>
    <div class="row g-4">
        <!-- Application Status -->
        <div class="col-md-4">
            <a href="https://bdris.gov.bd/br/application/status" target="_blank" class="text-decoration-none">
                <div class="card p-4 h-100 shadow-sm border-0" style="border-radius: 16px; background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); color: white; transition: transform 0.3s;">
                    <div class="text-center">
                        <i class="fas fa-search mb-2" style="font-size: 2.5rem;"></i>
                        <h5 class="fw-bold">আবেদনের বর্তমান অবস্থা</h5>
                        <p class="mb-0 small">আবেদন অনুমোদিত হয়েছে কিনা চেক করুন</p>
                    </div>
                </div>
            </a>
        </div>
        <!-- eVerify -->
        <div class="col-md-4">
            <a href="https://everify.bdris.gov.bd/" target="_blank" class="text-decoration-none">
                <div class="card p-4 h-100 shadow-sm border-0" style="border-radius: 16px; background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); color: #0b683b; transition: transform 0.3s;">
                    <div class="text-center">
                        <i class="fas fa-certificate mb-2" style="font-size: 2.5rem;"></i>
                        <h5 class="fw-bold">জন্ম/মৃত্যু যাচাই</h5>
                        <p class="mb-0 small">অনলাইনে নিবন্ধন যাচাই করুন</p>
                    </div>
                </div>
            </a>
        </div>
        <!-- New Birth Reg -->
        <div class="col-md-4">
            <a href="https://bdris.gov.bd/br/application" target="_blank" class="text-decoration-none">
                <div class="card p-4 h-100 shadow-sm border-0" style="border-radius: 16px; background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); color: white; transition: transform 0.3s;">
                    <div class="text-center">
                        <i class="fas fa-user-plus mb-2" style="font-size: 2.5rem;"></i>
                        <h5 class="fw-bold">নতুন জন্ম নিবন্ধন</h5>
                        <p class="mb-0 small">নতুন নিবন্ধনের জন্য আবেদন করুন</p>
                    </div>
                </div>
            </a>
        </div>
        <!-- Birth Correction -->
        <div class="col-md-4">
            <a href="https://bdris.gov.bd/br/correction" target="_blank" class="text-decoration-none">
                <div class="card p-4 h-100 shadow-sm border-0" style="border-radius: 16px; background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); color: #b83253; transition: transform 0.3s;">
                    <div class="text-center">
                        <i class="fas fa-edit mb-2" style="font-size: 2.5rem;"></i>
                        <h5 class="fw-bold">জন্ম তথ্য সংশোধন</h5>
                        <p class="mb-0 small">ভুল তথ্য সংশোধনের আবেদন করুন</p>
                    </div>
                </div>
            </a>
        </div>
        <!-- New Death Reg -->
        <div class="col-md-4">
            <a href="https://bdris.gov.bd/dr/application" target="_blank" class="text-decoration-none">
                <div class="card p-4 h-100 shadow-sm border-0" style="border-radius: 16px; background: linear-gradient(135deg, #cfd9df 0%, #e2ebf0 100%); color: #4a5568; transition: transform 0.3s;">
                    <div class="text-center">
                        <i class="fas fa-book-dead mb-2" style="font-size: 2.5rem;"></i>
                        <h5 class="fw-bold">নতুন মৃত্যু নিবন্ধন</h5>
                        <p class="mb-0 small">মৃত্যু নিবন্ধনের আবেদন করুন</p>
                    </div>
                </div>
            </a>
        </div>
        <!-- Cancel Reg -->
        <div class="col-md-4">
            <a href="https://bdris.gov.bd/br/cancel" target="_blank" class="text-decoration-none">
                <div class="card p-4 h-100 shadow-sm border-0" style="border-radius: 16px; background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%); color: white; transition: transform 0.3s;">
                    <div class="text-center">
                        <i class="fas fa-ban mb-2" style="font-size: 2.5rem;"></i>
                        <h5 class="fw-bold">নিবন্ধন বাতিল</h5>
                        <p class="mb-0 small">দ্বৈত নিবন্ধন বাতিলের আবেদন</p>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

<style>
.container .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}
</style>

<script>
function submitForm(actionType) {
    const appId = document.getElementById('common_app_id').value.trim();
    const dob = document.getElementById('common_dob').value.trim();
    
    if (!appId || !dob) {
        alert("দয়া করে আবেদন নম্বর এবং জন্ম তারিখ দুটিই প্রদান করুন।");
        return;
    }

    const form = document.getElementById('supportForm');
    form.innerHTML = ''; // Clear previous hidden inputs
    
    if (actionType === 'duplicate') {
        form.action = 'duplicates.php';
        form.appendChild(createHiddenInput('search_term', appId));
    } else if (actionType === 'print') {
        form.action = 'print-application.php';
        form.appendChild(createHiddenInput('app_id', appId));
        form.appendChild(createHiddenInput('dob', dob));
        form.appendChild(createHiddenInput('app_type', 'B')); // Default to Birth
    }
    
    // Restore the visible inputs so they don't disappear on submit
    form.appendChild(createHiddenInput('common_app_id_backup', appId));
    
    form.submit();
    
    // Quick reload to restore UI state after submitting to target=_blank
    setTimeout(() => {
        window.location.reload();
    }, 500);
}

function createHiddenInput(name, value) {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = name;
    input.value = value;
    return input;
}
</script>

<?php include 'includes/footer.php'; ?>
