<?php 
/**
 * registration.php - নতুন কানেকশন রেজিস্ট্রেশন পেজ (গুগল স্যাটেলাইট ম্যাপ ইন্টিগ্রেশন ও সার্চ সহ)
 */

include('db_config.php');

// ১. ডাটাবেজে বাংলা ডাটা সাপোর্ট করার জন্য
mysqli_set_charset($conn, "utf8mb4");

include('header.php'); 

// প্যাকেজ লিস্ট সংগ্রহের অংশ
$packages_query = mysqli_query($conn, "SELECT * FROM packages ORDER BY price ASC");

// ফর্ম সাবমিট হ্যান্ডলিং
$message = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // ইনপুট ডাটা গ্রহণ এবং স্যানিটাইজ করা
    $name = mysqli_real_escape_with_string($conn, $_POST['name']);
    $phone = mysqli_real_escape_with_string($conn, $_POST['phone']);
    $package = mysqli_real_escape_with_string($conn, $_POST['package']);
    $contact_time = mysqli_real_escape_with_string($conn, $_POST['contact_time']);
    $reference_user = mysqli_real_escape_with_string($conn, $_POST['reference_user']);
    $nid_number = mysqli_real_escape_with_string($conn, $_POST['nid_number']); 
    $address = mysqli_real_escape_with_string($conn, $_POST['address']);
    $latitude = mysqli_real_escape_with_string($conn, $_POST['latitude']); 
    $longitude = mysqli_real_escape_with_string($conn, $_POST['longitude']); 

    // ডাটাবেজে ডাটা ইনসার্ট করার কুয়েরি
    $sql = "INSERT INTO registrations (name, phone, package, contact_time, reference_user, nid_number, address, latitude, longitude, created_at) 
            VALUES ('$name', '$phone', '$package', '$contact_time', '$reference_user', '$nid_number', '$address', '$latitude', '$longitude', NOW())";

    if (mysqli_query($conn, $sql)) {
        $message = "ধন্যবাদ! আপনার রিকোয়েস্টটি সফলভাবে গ্রহণ করা হয়েছে। আমাদের প্রতিনিধি দ্রুত যোগাযোগ করবেন।";
    } else {
        $message = "দুঃখিত! ডাটা সেভ করতে সমস্যা হয়েছে: " . mysqli_error($conn);
    }
}

// mysqli_real_escape_string এর হেল্পার ফাংশন
function mysqli_real_escape_with_string($conn, $data) {
    if (!$data) return "";
    return mysqli_real_escape_string($conn, htmlspecialchars(strip_tags($data)));
}
?>

<!-- Leaflet CSS for Map and Search Plugin -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />

<style>
    /* ব্যানার সেকশন ডিজাইন */
    .reg-hero-banner {
        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                    url('https://images.unsplash.com/photo-1544197150-b99a580bb7a8?auto=format&fit=crop&w=1350&q=80');
        background-size: cover;
        background-position: center;
        height: 350px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: white;
        margin-bottom: -50px;
    }
    .hero-content h1 {
        font-size: 3rem;
        font-weight: 800;
        margin-bottom: 10px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
    .registration-section {
        padding: 0 0 60px 0;
        background: #f4f7f6;
        min-height: 80vh;
    }
    .reg-card {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 15px 50px rgba(0,0,0,0.15);
        overflow: hidden;
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        z-index: 10;
    }
    .reg-info {
        flex: 1;
        background: linear-gradient(135deg, #00aeef 0%, #0076a3 100%);
        color: white;
        padding: 40px 30px;
        min-width: 300px;
    }
    .reg-form-container {
        flex: 2;
        padding: 40px;
        min-width: 320px;
    }
    .form-group {
        margin-bottom: 15px;
    }
    .form-group label {
        display: block;
        margin-bottom: 5px;
        color: #333;
        font-weight: 600;
        font-size: 0.95rem;
    }
    .form-control {
        width: 100%;
        padding: 10px 15px;
        border: 1px solid #e1e1e1;
        border-radius: 10px;
        font-size: 1rem;
        background: #fafafa;
    }
    .submit-btn {
        background: #57a03a;
        color: white;
        border: none;
        padding: 15px;
        border-radius: 10px;
        font-weight: 700;
        cursor: pointer;
        width: 100%;
        font-size: 1.1rem;
        margin-top: 10px;
        transition: 0.3s;
    }
    .submit-btn:hover { background: #4a8a31; }
    .submit-btn:disabled { background: #cccccc; cursor: not-allowed; opacity: 0.7; }
    .success-alert {
        background: #d4edda;
        color: #155724;
        padding: 15px 25px;
        border-radius: 10px;
        margin-bottom: 30px;
        border-left: 6px solid #28a745;
        max-width: 1100px;
        margin: 0 auto 30px auto;
    }
    .info-list {
        list-style: none;
        padding: 0;
        margin-top: 30px;
    }
    .info-list li {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
    }
    .info-list i {
        margin-right: 15px;
        background: rgba(255,255,255,0.2);
        width: 35px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
    /* Map Styling */
    #map {
        height: 350px;
        width: 100%;
        border-radius: 10px;
        border: 1px solid #ddd;
        margin-top: 5px;
    }
    /* Real-time Validation Styling */
    .error-msg {
        color: #e74c3c;
        font-size: 0.85rem;
        margin-top: 5px;
        display: none;
    }
    .invalid-input {
        border-color: #e74c3c !important;
        background: #fffafa !important;
    }
    
    /* Shape Dividers */
    .divider-top { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; }
    .divider-bottom { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); }
    .divider-top svg, .divider-bottom svg { position: relative; display: block; width: calc(100% + 1.3px); height: 50px; }
</style>

<!--  -->
<section style="padding: 0px 0px 40px 0px; background: #f8f9fa; position: relative;">
    <div class="reg-hero-banner">
        <div class="hero-content">
            <h1>ডিজিটাল দুনিয়ায় স্বাগতম</h1>
            <p>সেরা ইন্টারনেট অভিজ্ঞতার জন্য আজই রেজিস্ট্রেশন করুন</p>
        </div>
    </div>
    <!-- Top Curve Divider -->
    <div class="divider-bottom">
        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5,73.84-4.36,147.54,16.88,218.2,35.26,69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113,2,1200,34.72V0Z" fill="#f8f9fa"></path>
        </svg>
    </div>
</section>
<!--  -->
<section style="padding: 40px 0; background: #f8f9fa; position: relative;">
    <div class="container">
        <div class="registration-section">
    <div class="container">
        <div style="text-align: center; margin-top: 70px; margin-bottom: 40px;">
            <h2 style="font-size: 2.2rem;">নতুন <span style="color:var(--primary-color)">সংযোগের</span> আবেদন</h2>
            <p style="color: #666; font-size: 1.1rem;">আমাদের হাই-স্পিড ইন্টারনেটের সাথে যুক্ত হতে নিচের ফর্মটি পূরণ করুন</p>
        </div>

        <?php if($message): ?>
            <div class="success-alert">
                <strong>সফল!</strong> <?php echo $message; ?>
            </div>
        <?php endif; ?>

        <div class="reg-card">
            <div class="reg-info">
                <h3 style="font-weight: 700; border-bottom: 2px solid rgba(255,255,255,0.2); padding-bottom: 10px;">কেন NetPro বেছে নিবেন?</h3>
                <ul class="info-list">
                    <li><i class="fas fa-rocket"></i> সুপার ফাস্ট ফাইবার অপটিক</li>
                    <li><i class="fas fa-gamepad"></i> লো-ল্যাটেন্সি গেমিং</li>
                    <li><i class="fas fa-video"></i> বাফারলেস 4K স্ট্রিমিং</li>
                    <li><i class="fas fa-headset"></i> ডেডিকেটেড সাপোর্ট টিম</li>
                </ul>
                <div style="margin-top: 40px; background: rgba(255,255,255,0.1); padding: 20px; border-radius: 10px;">
                    <p style="font-size: 0.9rem; margin-bottom: 5px;">সরাসরি কথা বলুন:</p>
                    <a href="tel:+8801200000000" style="color: white; text-decoration: none; font-size: 1.4rem; font-weight: bold;">+৮৮০ ১২০০০০০০০০</a>
                </div>
            </div>

            <div class="reg-form-container">
                <form id="regForm" action="" method="POST">
                    <div class="form-group">
                        <label for="name">আপনার নাম *</label>
                        <input type="text" id="name" name="name" class="form-control" placeholder="যেমন: মো: আরিফ হোসেন" required>
                    </div>

                    <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                        <div class="form-group" style="flex: 1; min-width: 200px;">
                            <label for="phone">মোবাইল নম্বর *</label>
                            <input type="tel" id="phone" name="phone" class="form-control" placeholder="০১XXXXXXXXX" required>
                            <span id="phoneError" class="error-msg">সঠিক ১১ ডিজিটের নম্বর দিন</span>
                        </div>
                        <div class="form-group" style="flex: 1; min-width: 200px;">
                            <label for="nid_number">এনআইডি (NID) নম্বর *</label>
                            <input type="text" id="nid_number" name="nid_number" class="form-control" placeholder="১০ বা ১৭ ডিজিটের নম্বর" required>
                            <span id="nidError" class="error-msg">এনআইডি নম্বর ১০ অথবা ১৭ ডিজিটের হতে হবে</span>
                        </div>
                    </div>

                    <div style="display: flex; gap: 15px; flex-wrap: wrap;">
                        <div class="form-group" style="flex: 1; min-width: 200px;">
                            <label for="package">প্যাকেজ নির্বাচন করুন</label>
                            <select id="package" name="package" class="form-control" required>
                                <option value="" disabled selected>প্যাকেজ বেছে নিন</option>
                                <?php if(mysqli_num_rows($packages_query) > 0): ?>
                                    <?php while($row = mysqli_fetch_assoc($packages_query)): ?>
                                        <option value="<?php echo htmlspecialchars($row['name']); ?>">
                                            <?php echo htmlspecialchars($row['name'] . " - " . $row['price'] . "৳"); ?>
                                        </option>
                                    <?php endwhile; ?>
                                <?php else: ?>
                                    <option value="10mbps">১০ Mbps - ৫০০৳</option>
                                    <option value="20mbps">২০ Mbps - ৮০০৳</option>
                                <?php endif; ?>
                            </select>
                        </div>
                        <div class="form-group" style="flex: 1; min-width: 200px;">
                            <label for="contact_time">আপনাকে কল করার সেরা সময় *</label>
                            <select id="contact_time" name="contact_time" class="form-control" required>
                                <option value="" disabled selected>সময় নির্বাচন করুন</option>
                                <option value="সকাল">সকাল (৯:০০ টা - ১২:০০ টা)</option>
                                <option value="দুপুর">দুপুর (১২:০০ টা - ৩:০০ টা)</option>
                                <option value="বিকাল">বিকাল (৩:০০ টা - ৬:০০ টা)</option>
                                <option value="সন্ধ্যা/রাত">সন্ধ্যা/রাত (৬:০০ টা - ৯:০০ টা)</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="reference_user">রেফারেন্স ইউজার (যদি থাকে)</label>
                        <input type="text" id="reference_user" name="reference_user" class="form-control" placeholder="রেফারেন্স আইডি">
                    </div>

                    <div class="form-group">
                        <label for="address">আপনার বিস্তারিত ঠিকানা *</label>
                        <textarea id="address" name="address" class="form-control" rows="2" placeholder="বাসা, রাস্তা এবং এলাকার নাম..." required></textarea>
                    </div>

                    <div class="form-group">
                        <label>ম্যাপে আপনার লোকেশন চিহ্নিত করুন (সার্চ অপশন ব্যবহার করুন)</label>
                        <p style="font-size: 0.8rem; color: #666; margin-bottom: 5px;">ম্যাপের উপরে থাকা সার্চ আইকনে ক্লিক করে আপনার এলাকাটি খুঁজুন এবং পিনটি সঠিক জায়গায় বসান।</p>
                        <div id="map"></div>
                        <input type="hidden" id="latitude" name="latitude">
                        <input type="hidden" id="longitude" name="longitude">
                    </div>

                    <button type="submit" id="submitBtn" class="submit-btn">আবেদন সম্পন্ন করুন</button>
                </form>
            </div>
        </div>
    </div>
</div>
</section>



<!-- Leaflet JS and Geocoder Plugin -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

<script>
    // ১. লেয়ারগুলো সংজ্ঞায়িত করা
    var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap'
    });

    // গুগল স্যাটেলাইট লেয়ার
    var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
        maxZoom: 20,
        subdomains:['mt0','mt1','mt2','mt3'],
        attribution: '© Google Maps Satellite'
    });

    // ম্যাপ ইনিশিয়ালাইজ করা
    var map = L.map('map', {
        center: [23.8103, 90.4125],
        zoom: 13,
        layers: [googleSat] // ডিফল্ট স্যাটেলাইট ভিউ
    });

    // লেয়ার কন্ট্রোল যোগ করা
    var baseMaps = {
        "Satellite View": googleSat,
        "Normal View": osm
    };
    L.control.layers(baseMaps).addTo(map);

    // ২. সার্চ কন্ট্রোল (Geocoder) যুক্ত করা
    var geocoder = L.Control.geocoder({
        defaultMarkGeocode: false,
        placeholder: "আপনার এলাকা খুঁজুন...",
        errorMessage: "লোকেশনটি পাওয়া যায়নি।"
    })
    .on('markgeocode', function(e) {
        var bbox = e.geocode.bbox;
        var center = e.geocode.center;
        map.fitBounds(bbox);
        updateMarker(center.lat, center.lng);
    })
    .addTo(map);

    var marker;

    // পিন আপডেট করার ফাংশন
    function updateMarker(lat, lng) {
        if (marker) {
            marker.setLatLng([lat, lng]);
        } else {
            marker = L.marker([lat, lng], {draggable: true}).addTo(map);
            marker.on('dragend', function(event) {
                var pos = marker.getLatLng();
                document.getElementById('latitude').value = pos.lat;
                document.getElementById('longitude').value = pos.lng;
            });
        }
        document.getElementById('latitude').value = lat;
        document.getElementById('longitude').value = lng;
    }

    // ম্যাপে ক্লিক করলে পিন বসানোর ফাংশন
    map.on('click', function(e) {
        updateMarker(e.latlng.lat, e.latlng.lng);
    });

    // ইউজারের বর্তমান লোকেশন পাওয়ার চেষ্টা করা
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            map.setView([lat, lng], 18);
            updateMarker(lat, lng);
        }, function() {
            console.log("Geolocation failed.");
        });
    }

    // ৩. রিয়েল-টাইম ভ্যালিডেশন স্ক্রিপ্ট
    const phoneInput = document.getElementById('phone');
    const nidInput = document.getElementById('nid_number');
    const submitBtn = document.getElementById('submitBtn');
    const phoneError = document.getElementById('phoneError');
    const nidError = document.getElementById('nidError');

    function validate() {
        let isPhoneValid = /^01[3-9]\d{8}$/.test(phoneInput.value);
        let isNidValid = /^\d{10}$|^\d{17}$/.test(nidInput.value);

        // মোবাইল ভ্যালিডেশন
        if (phoneInput.value.length > 0 && !isPhoneValid) {
            phoneInput.classList.add('invalid-input');
            phoneError.style.display = 'block';
        } else {
            phoneInput.classList.remove('invalid-input');
            phoneError.style.display = 'none';
        }

        // এনআইডি ভ্যালিডেশন
        if (nidInput.value.length > 0 && !isNidValid) {
            nidInput.classList.add('invalid-input');
            nidError.style.display = 'block';
        } else {
            nidInput.classList.remove('invalid-input');
            nidError.style.display = 'none';
        }

        // বাটন কন্ট্রোল
        if (isPhoneValid && isNidValid) {
            submitBtn.disabled = false;
        } else {
            submitBtn.disabled = true;
        }
    }

    phoneInput.addEventListener('input', validate);
    nidInput.addEventListener('input', validate);
    
    // ইনিশিয়াল চেক
    validate();
</script>

<?php include('footer.php'); ?>