<?php
require 'config.php';
require_login();

// Service Charge
$card_charge = 3;

require_once 'header.php';
?>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
    /* ========== MODERN BLUE THEME ========== */
    :root {
        --primary: #2563EB;
        --primary-dark: #1D4ED8;
        --accent: #F59E0B;
        --bg-light: #F0F4FF;
        --card-bg: #FFFFFF;
        --text-dark: #1E293B;
        --text-muted: #64748B;
        --border: #E2E8F0;
        --success: #10B981;
        --warning: #F59E0B;
        --danger: #EF4444;
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.06);
        --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.05);
        --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
        --radius: 12px;
        --transition: all 0.2s ease;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Hind Siliguri', sans-serif;
        background: #F0F4FF;
        color: var(--text-dark);
        min-height: 100vh;
    }

    .premium-container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 2rem 1.5rem;
    }

    /* Hero Header */
    .hero-header {
        background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
        border-radius: var(--radius);
        padding: 2rem 2.5rem;
        color: white;
        display: flex;
        align-items: center;
        gap: 1.5rem;
        box-shadow: var(--shadow-md);
        margin-bottom: 2.5rem;
    }
    .hero-icon {
        background: rgba(255,255,255,0.2);
        padding: 1rem;
        border-radius: 50%;
        font-size: 2rem;
    }
    .hero-text h2 {
        font-size: 1.6rem;
        font-weight: 600;
        margin-bottom: 0.3rem;
    }
    .hero-text p {
        opacity: 0.9;
        font-size: 0.95rem;
    }

    /* Premium Card */
    .premium-card {
        background: var(--card-bg);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border);
        overflow: hidden;
        margin-bottom: 2rem;
    }
    .card-header-premium {
        background: #F8FAFC;
        padding: 1rem 1.8rem;
        border-bottom: 1px solid var(--border);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .card-header-premium h5 {
        font-weight: 600;
        color: var(--primary);
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
    }
    .badge-premium {
        background: var(--primary);
        color: white;
        padding: 4px 12px;
        border-radius: 50px;
        font-weight: 600;
        font-size: 0.75rem;
    }

    .charge-alert {
        background: #EFF6FF;
        border-left: 4px solid var(--primary);
        color: #1E40AF;
        padding: 0.8rem 1.5rem;
        margin: 1.5rem;
        border-radius: 8px;
        font-weight: 500;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Upload Zone */
    .upload-zone {
        border: 2px dashed var(--border);
        background: #F8FAFC;
        padding: 2rem;
        border-radius: 12px;
        text-align: center;
        cursor: pointer;
        transition: var(--transition);
        margin: 1.5rem;
    }
    .upload-zone:hover {
        border-color: var(--primary);
        background: #F0F4FF;
    }
    .upload-icon {
        font-size: 2.5rem;
        color: var(--primary);
        margin-bottom: 10px;
    }

    /* Form Section */
    .form-section {
        padding: 0 1.8rem 1.8rem 1.8rem;
    }
    .section-label {
        background: linear-gradient(135deg, #1E3A8A, #2563EB);
        color: white;
        padding: 10px 18px;
        font-weight: 600;
        margin-bottom: 25px;
        border-radius: 8px;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .form-label-custom {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--text-dark);
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .input-custom {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid var(--border);
        border-radius: 8px;
        font-family: 'Hind Siliguri', sans-serif;
        font-size: 0.9rem;
        transition: var(--transition);
        background: white;
    }
    .input-custom:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
        outline: none;
    }

    .preview-box {
        width: 90px;
        height: 90px;
        border: 1px solid var(--border);
        background: white;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .btn-premium {
        background: linear-gradient(135deg, #2563EB, #1D4ED8);
        border: none;
        color: white;
        padding: 14px 48px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 1.05rem;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 4px 6px rgba(37, 99, 235, 0.25);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .btn-premium:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 10px rgba(37, 99, 235, 0.3);
    }

    #loddingPdf {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.95);
        z-index: 9999;
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .loader {
        border: 4px solid rgba(255,255,255,0.1);
        border-top: 4px solid var(--accent);
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Responsive tweaks */
    @media (max-width: 768px) {
        .hero-header {
            flex-direction: column;
            text-align: center;
        }
    }
</style>

<div id="loddingPdf">
    <div class="loader mb-3"></div>
    <div style="color: #fff; font-weight: 600; letter-spacing: 1px;">অনুগ্রহ করে অপেক্ষা করুন...</div>
</div>

<div class="premium-container">
    <!-- Hero Header -->
    <div class="hero-header">
        <div class="hero-icon">
            <i class="fas fa-id-card-alt"></i>
        </div>
        <div class="hero-text">
            <h2>এনআইডি কার্ড জেনারেট পোর্টাল</h2>
            <p>আধুনিক ও দ্রুত ডিজিটাল কার্ড সেবা সেন্টার</p>
        </div>
    </div>

    <!-- Main Card -->
    <div class="premium-card">
        <div class="card-header-premium">
            <h5>
                <i class="fas fa-user-check"></i> এনআইডি মেকার ফরম
            </h5>
            <span class="badge-premium">V2.0</span>
        </div>

        <div class="charge-alert">
            <i class="fas fa-tag"></i>
            প্রতি কার্ড তৈরির ফি: ৳ <?php echo number_format($card_charge, 2); ?> টাকা মাত্র
        </div>

        <!-- PDF Upload Zone -->
        <label for="pdf" class="upload-zone d-block">
            <div class="upload-icon"><i class="fas fa-file-pdf"></i></div>
            <h5 class="fw-bold mb-1" style="color: var(--primary);">সাইন কপি PDF ফাইলটি এখানে দিন</h5>
            <p class="text-muted small mb-0">পিডিএফ আপলোড করলে সব তথ্য স্বয়ংক্রিয়ভাবে পূরণ হবে</p>
            <input type="file" id="pdf" hidden accept="application/pdf">
        </label>

        <!-- Form -->
        <form id="cardForm" action="nid-bn.php" method="POST" target="_blank" class="form-section">
            <div class="section-label">
                <i class="fas fa-user-circle"></i> নাগরিকের ব্যক্তিগত তথ্যাবলি
            </div>

            <div class="row g-4" style="display: flex; flex-wrap: wrap; gap: 20px;">
                <!-- Image uploads -->
                <div class="col-md-6" style="flex: 1 1 300px;">
                    <div style="display: flex; align-items: center; gap: 15px;">
                        <div class="preview-box">
                            <img id="preview1" src="assets/images/placeholder.png" alt="Photo" style="width:100%; height:100%; object-fit:cover;">
                        </div>
                        <div style="flex:1;">
                            <label class="form-label-custom">প্রোফাইল ছবি আপলোড</label>
                            <input type="file" class="form-control form-control-sm" name="imageUrl1" id="imageUrl1" accept="image/*" style="padding:8px;">
                        </div>
                    </div>
                </div>
                <div class="col-md-6" style="flex: 1 1 300px;">
                    <div style="display: flex; align-items: center; gap: 15px;">
                        <div class="preview-box">
                            <img id="preview2" src="assets/images/placeholder.png" alt="Sign" style="width:100%; height:100%; object-fit:contain;">
                        </div>
                        <div style="flex:1;">
                            <label class="form-label-custom">স্বাক্ষর আপলোড</label>
                            <input type="file" class="form-control form-control-sm" name="imageUrl2" id="imageUrl2" accept="image/*" style="padding:8px;">
                        </div>
                    </div>
                </div>

                <!-- NID & PIN -->
                <div style="flex:1 1 200px;">
                    <label class="form-label-custom"><i class="fas fa-fingerprint"></i> এনআইডি নম্বর</label>
                    <input type="text" name="nid" id="nid" class="input-custom" placeholder="NID Number" required>
                </div>
                <div style="flex:1 1 200px;">
                    <label class="form-label-custom"><i class="fas fa-lock"></i> পিন নম্বর</label>
                    <input type="text" name="pin" id="pin" class="input-custom" placeholder="PIN">
                </div>
                <div style="flex:1 1 200px;">
                    <label class="form-label-custom"><i class="fas fa-tint"></i> রক্তের গ্রুপ</label>
                    <select name="bloodGroup" id="bloodGroup" class="input-custom">
                        <option value="">নির্বাচন করুন</option>
                        <option value="A+">A+</option>
                        <option value="A-">A-</option>
                        <option value="B+">B+</option>
                        <option value="B-">B-</option>
                        <option value="O+">O+</option>
                        <option value="O-">O-</option>
                        <option value="AB+">AB+</option>
                        <option value="AB-">AB-</option>
                    </select>
                </div>

                <!-- Names -->
                <div style="flex:1 1 300px;">
                    <label class="form-label-custom">নাম (বাংলা)</label>
                    <input type="text" name="nameBangla" id="nameBangla" class="input-custom">
                </div>
                <div style="flex:1 1 300px;">
                    <label class="form-label-custom">নাম (ইংরেজি)</label>
                    <input type="text" name="nameEnglish" id="nameEnglish" class="input-custom" style="text-transform: uppercase;">
                </div>

                <!-- DOB, Father, Mother -->
                <div style="flex:1 1 200px;">
                    <label class="form-label-custom"><i class="fas fa-calendar-alt"></i> জন্ম তারিখ</label>
                    <input type="text" name="dob" id="dob" class="input-custom" placeholder="DD-MM-YYYY">
                </div>
                <div style="flex:1 1 200px;">
                    <label class="form-label-custom">পিতার নাম</label>
                    <input type="text" name="nameFather" id="fatherName" class="input-custom">
                </div>
                <div style="flex:1 1 200px;">
                    <label class="form-label-custom">মাতার নাম</label>
                    <input type="text" name="nameMother" id="motherName" class="input-custom">
                </div>

                <!-- Issue, Birthplace -->
                <div style="flex:1 1 200px;">
                    <label class="form-label-custom">ইস্যু তারিখ</label>
                    <input type="text" name="issueDate" id="issueDate" class="input-custom">
                </div>
                <div style="flex:1 1 400px;">
                    <label class="form-label-custom">জন্মস্থান</label>
                    <input type="text" name="birthPlace" id="birthPlace" class="input-custom">
                </div>

                <!-- Full Address -->
                <div style="flex:1 1 100%;">
                    <label class="form-label-custom"><i class="fas fa-map-marker-alt"></i> বর্তমান ঠিকানা</label>
                    <textarea name="fulladdress" id="fulAddress" class="input-custom" rows="2"></textarea>
                </div>

                <input type="hidden" name="imageUrl12" id="imageUrl12">
                <input type="hidden" name="imageUrl22" id="imageUrl22">
            </div>

            <div class="text-center mt-5 mb-3">
                <button type="button" id="btnDownload" class="btn-premium">
                    <i class="fas fa-magic"></i> কার্ড জেনারেট করুন
                </button>
            </div>
        </form>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
    const MainSwal = Swal.mixin({
        confirmButtonColor: '#2563EB',
        cancelButtonColor: '#d33',
    });

    // PDF Parser Logic
    $("#pdf").change(function() {
        if (!this.files[0]) return;
        const formData = new FormData();
        formData.append('pdf', this.files[0]);
        $("#loddingPdf").css("display", "flex");

        fetch('api_proxy_one.php', { method: 'POST', body: formData })
        .then(res => res.json())
        .then(data => {
            $("#loddingPdf").hide();
            if (data.status === "success") {
                const d = data.data;
                $('#nid').val(d.nationalId || '');
                $('#pin').val(d.pin || '');
                $('#nameBangla').val(d.nameBangla || '');
                $('#nameEnglish').val(d.nameEnglish || '');
                $('#dob').val(d.dateOfBirth || '');
                $('#fatherName').val(d.fatherName || '');
                $('#motherName').val(d.motherName || '');
                $('#bloodGroup').val(d.bloodGroup || d.BloodGroup || '');
                $('#birthPlace').val(d.birthPlace || '');
                $('#fulAddress').val(d.address || '');
                $('#issueDate').val(d.dateOfToday || '');

                if (d.userIMG) { $('#preview1').attr('src', d.userIMG); $('#imageUrl12').val(d.userIMG); }
                if (d.signIMG) { $('#preview2').attr('src', d.signIMG); $('#imageUrl22').val(d.signIMG); }

                MainSwal.fire('অভিনন্দন', 'পিডিএফ থেকে সব তথ্য সফলভাবে সংগ্রহ করা হয়েছে।', 'success');
            } else {
                MainSwal.fire('Error', 'PDF ফাইলটি পড়া সম্ভব হচ্ছে না', 'error');
            }
        }).catch(err => {
            $("#loddingPdf").hide();
            MainSwal.fire('ত্রুটি', 'সার্ভারে সংযোগ বিচ্ছিন্ন হয়েছে', 'error');
        });
    });

    // Image Handlers
    const readURL = (input, previewId, hiddenId) => {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $(previewId).attr('src', e.target.result);
                $(hiddenId).val(e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $('#imageUrl1').change(function() { readURL(this, '#preview1', '#imageUrl12'); });
    $('#imageUrl2').change(function() { readURL(this, '#preview2', '#imageUrl22'); });

    // Submit Logic
    $('#btnDownload').on('click', function() {
        const nid = $('#nid').val().trim();
        if (!nid) {
            MainSwal.fire('মনোযোগ দিন', 'এনআইডি নম্বরটি দিতে হবে', 'warning');
            return;
        }

        MainSwal.fire({
            title: 'নিশ্চিত করুন',
            text: "এই কার্ডটি তৈরি করতে ৩ টাকা চার্জ কাটা হবে। আপনি কি এগোতে চান?",
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'হ্যাঁ, মেক করুন',
            cancelButtonText: 'বাতিল'
        }).then((result) => {
            if (result.isConfirmed) {
                $("#loddingPdf").css("display", "flex");
                $.ajax({
                    url: 'deduct_balance.php',
                    method: 'POST',
                    data: { nid: nid },
                    dataType: 'json',
                    success: function(response) {
                        $("#loddingPdf").hide();
                        if (response.success) {
                            $('#cardForm').submit();
                            MainSwal.fire('সফল', 'পেমেন্ট সফল হয়েছে এবং কার্ড প্রসেস করা হচ্ছে', 'success');
                        } else {
                            MainSwal.fire('ব্যর্থ', response.message || 'পর্যাপ্ত ব্যালেন্স নেই', 'error');
                        }
                    },
                    error: function() {
                        $("#loddingPdf").hide();
                        MainSwal.fire('ত্রুটি', 'নেটওয়ার্ক সংযোগ চেক করুন', 'error');
                    }
                });
            }
        });
    });
});
</script>

<?php require_once 'footer.php'; ?>