<?php include __DIR__ . '/../includes/header.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Inquiry Portal — Trader Safety</title>

    <!-- Fonts & Icons -->
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">

    <style>
    :root {
        --ivory:      #FAFAF7;
        --white:      #FFFFFF;
        --navy:       #0F1628;
        --navy-light: #1A233A;
        --gold:       #B8890A;
        --gold-light: #F5EDD3;
        --gold-ring:  #D4A82A;
        --muted:      #7D8799;
        --border:     #EDE9DF;
        --profit:     #0F7A5A;
        --error:      #D93025;
        --sans:       'Plus Jakarta Sans', sans-serif;
        --serif:      'Playfair Display', serif;
        --shadow:     0 20px 50px rgba(15,22,40,0.1);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: var(--ivory); font-family: var(--sans); color: var(--navy); line-height: 1.6; }

    /* --- PREMIUM HEADER --- */
    .hero-section {
        background: var(--navy);
        padding: 80px 20px 140px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .hero-section::after {
        content: ''; position: absolute; inset: 0;
        background: url('https://resources1.interface003.com/web20/img/about/bottom2.png');
        opacity: 0.05; background-size: cover;
    }
    .hero-tag {
        font-size: 11px; font-weight: 800; text-transform: uppercase;
        letter-spacing: 2px; color: var(--gold); margin-bottom: 15px;
        display: block; position: relative; z-index: 2;
    }
    .hero-title {
        font-family: var(--serif); font-size: clamp(28px, 5vw, 42px);
        color: var(--white); margin-bottom: 20px; position: relative; z-index: 2;
    }
    .hero-desc {
        color: rgba(255,255,255,0.6); max-width: 650px; margin: 0 auto;
        font-size: 15px; position: relative; z-index: 2;
    }

    /* --- FORM CONTAINER --- */
    .form-wrapper {
        max-width: 900px; margin: -80px auto 60px;
        padding: 0 20px; position: relative; z-index: 10;
    }
    main {
        background: var(--white); border-radius: 24px;
        padding: 50px; box-shadow: var(--shadow);
        border: 1px solid var(--border);
    }

    .section-title {
        font-family: var(--serif); font-size: 24px; margin-bottom: 30px;
        display: flex; align-items: center; gap: 12px;
    }
    .section-title::before {
        content: ''; width: 4px; height: 24px; background: var(--gold); border-radius: 4px;
    }

    /* --- FORM GRID --- */
    .grid-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
    .full-width { grid-column: span 2; }

    .input-group { margin-bottom: 20px; position: relative; }
    label {
        font-size: 12px; font-weight: 800; text-transform: uppercase;
        color: var(--muted); margin-bottom: 8px; display: block;
    }
    .required { color: var(--gold); }

    input[type="text"], textarea {
        width: 100%; padding: 14px 18px; border-radius: 10px;
        border: 1px solid var(--border); background: var(--ivory);
        font-family: var(--sans); font-size: 15px; transition: all 0.3s ease;
    }
    input:focus, textarea:focus {
        outline: none; border-color: var(--gold); background: var(--white);
        box-shadow: 0 0 0 4px var(--gold-light);
    }

    /* --- PHONE INPUT CUSTOM --- */
    .phone-container { display: flex; gap: 0; }
    .country-trigger {
        background: var(--gold-light); border: 1px solid var(--gold-ring);
        padding: 0 15px; border-radius: 10px 0 0 10px;
        display: flex; align-items: center; gap: 8px; cursor: pointer;
        font-weight: 700; color: var(--gold); font-size: 14px;
    }
    .phone-container input { border-radius: 0 10px 10px 0 !important; }

    /* --- UPLOAD PREVIEW --- */
    .upload-box {
        border: 2px dashed var(--gold-ring); background: var(--gold-light);
        border-radius: 15px; padding: 40px; text-align: center;
        cursor: pointer; transition: 0.3s; margin-top: 20px;
    }
    .upload-box:hover { background: var(--white); border-color: var(--gold); }
    .upload-box i { font-size: 32px; color: var(--gold); margin-bottom: 10px; }
    .upload-box p { font-size: 13px; font-weight: 600; color: var(--gold); }

    .image-preview-list {
        display: flex; flex-wrap: wrap; gap: 15px; margin-top: 20px;
    }
    .preview-item {
        width: 80px; height: 80px; border-radius: 10px; overflow: hidden;
        position: relative; border: 1px solid var(--border);
    }
    .preview-item img { width: 100%; height: 100%; object-fit: cover; }
    .remove-img {
        position: absolute; top: 2px; right: 2px; background: var(--error);
        color: white; border-radius: 50%; width: 18px; height: 18px;
        font-size: 10px; display: flex; align-items: center; justify-content: center;
        cursor: pointer;
    }

    /* --- SUBMIT BUTTON --- */
    .submit-container { text-align: center; margin-top: 40px; }
    .btn-premium {
        background: var(--navy); color: var(--white);
        padding: 18px 60px; border-radius: 50px; border: 2px solid var(--gold);
        font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
        cursor: pointer; transition: 0.4s; font-size: 16px;
        box-shadow: 0 10px 20px rgba(15,22,40,0.2);
    }
    .btn-premium:hover {
        background: var(--gold); transform: translateY(-3px);
        box-shadow: 0 15px 30px rgba(184, 137, 10, 0.3);
    }

    .error-msg { color: var(--error); font-size: 11px; font-weight: 700; margin-top: 5px; display: none; }

    @media (max-width: 768px) {
        .grid-row { grid-template-columns: 1fr; }
        .full-width { grid-column: span 1; }
        main { padding: 30px 20px; }
        .hero-section { padding-bottom: 100px; }
    }
    </style>
</head>
<body>

<section class="hero-section">
    <span class="hero-tag">Official Submission</span>
    <h1 class="hero-title">Broker Information Inquiry</h1>
    <p class="hero-desc">Help us maintain industry transparency. Provide details below to verify regulatory licenses and credit evaluations.</p>
</section>

<div class="form-wrapper">
    <main>
        <h2 class="section-title">Identity & Company</h2>
        
        <div class="grid-row">
            <div class="input-group">
                <label><span class="required">*</span> Full Name</label>
                <input type="text" id="lastName" placeholder="Bittu Kumar Saw">
                <p class="error-msg" id="lastNameError">This field is required</p>
            </div>
            <div class="input-group">
                <label><span class="required">*</span> Email Address</label>
                <input type="text" id="email" placeholder="example@domain.com">
                <p class="error-msg" id="emailError">Please enter a valid email</p>
            </div>
            <div class="input-group full-width">
                <label><span class="required">*</span> Company Name</label>
                <input type="text" id="companyName" placeholder="Enter broker or company name">
                <p class="error-msg" id="companyNameError">Company name is required</p>
            </div>
        </div>

        <h2 class="section-title">Contact Channels</h2>
        <div class="grid-row">
            <div class="input-group">
                <label>Mobile Number</label>
                <div class="phone-container">
                    <div class="country-trigger" id="countrySelector">
                        <img src="https://img.souhei.com.cn/flag/d7ed3e7b4fdbf486/IN.png_wiki-template-global" width="20" id="currentFlag">
                        <span id="currentPrefix">+91</span>
                        <i class="fa-solid fa-chevron-down" style="font-size: 10px;"></i>
                    </div>
                    <input type="text" id="phoneNumber" placeholder="98765 43210">
                </div>
            </div>
            <div class="input-group">
                <label>WhatsApp ID</label>
                <input type="text" id="whatsapp" placeholder="Username / Number">
            </div>
        </div>

        <h2 class="section-title">Update Details</h2>
        <div class="input-group">
            <label><span class="required">*</span> Updated Content / Description</label>
            <textarea id="updatedContent" rows="5" placeholder="Describe the inquiry or update in detail..."></textarea>
            <div style="text-align: right; font-size: 11px; color: var(--muted); margin-top: 5px;">
                <span id="charCount">0</span>/500 characters
            </div>
            <p class="error-msg" id="contentError">Please provide description</p>
        </div>

        <div class="upload-area">
            <label>Supportive Evidence (Screenshots)</label>
            <div class="upload-box" onclick="document.getElementById('fileInput').click()">
                <i class="fa-solid fa-cloud-arrow-up"></i>
                <p>Click to upload or drag images here</p>
                <span>Max 5 files, under 10MB each</span>
            </div>
            <input type="file" id="fileInput" hidden accept="image/*" multiple>
            <div class="image-preview-list" id="imagePreview"></div>
        </div>

        <div class="submit-container">
            <button class="btn-premium" id="submitButton">Submit Inquiry</button>
        </div>
    </main>
</div>

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

<script>
document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('fileInput');
    const imagePreview = document.getElementById('imagePreview');
    const updatedContent = document.getElementById('updatedContent');
    const charCount = document.getElementById('charCount');

    // Char counter
    updatedContent.addEventListener('input', () => {
        charCount.textContent = updatedContent.value.length;
    });

    // Image preview logic
    fileInput.addEventListener('change', function() {
        if (this.files.length > 5) {
            alert("Max 5 images allowed");
            return;
        }
        
        imagePreview.innerHTML = '';
        Array.from(this.files).forEach((file, index) => {
            const reader = new FileReader();
            reader.onload = (e) => {
                const div = document.createElement('div');
                div.className = 'preview-item';
                div.innerHTML = `
                    <img src="${e.target.result}">
                    <div class="remove-img" onclick="this.parentElement.remove()">&times;</div>
                `;
                imagePreview.appendChild(div);
            };
            reader.readAsDataURL(file);
        });
    });

    // Validation
    document.getElementById('submitButton').addEventListener('click', function() {
        let hasError = false;
        const fields = ['lastName', 'email', 'companyName', 'updatedContent'];
        
        fields.forEach(id => {
            const el = document.getElementById(id);
            const err = document.getElementById(id + 'Error') || document.getElementById('contentError');
            if (!el.value.trim()) {
                el.style.borderColor = 'var(--error)';
                if(err) err.style.display = 'block';
                hasError = true;
            } else {
                el.style.borderColor = 'var(--border)';
                if(err) err.style.display = 'none';
            }
        });

        if (!hasError) {
            alert("Bhai, Inquiry Submit Ho Gayi! (Premium Style)");
            // Handle AJAX here
        }
    });
});
</script>