<?php require_once 'includes/header.php'; ?> <?php require_once 'includes/bike_models.php'; ?> <?php $user = null; if (is_customer_logged_in()) { $stmt = $pdo->prepare("SELECT * FROM customers WHERE id = ?"); $stmt->execute([$_SESSION['customer_id']]); $user = $stmt->fetch(); } ?> <section class="py-5 mt-4"> <div class="container py-5"> <div class="text-center mb-5 fade-up"> <h1 class="display-4 fw-bold">Sell Your <span class="text-re-red">Royal Enfield</span></h1> <p class="text-muted lead">Get the best market value with our certified evaluation process.</p> </div> <div class="row justify-content-center fade-up"> <div class="col-lg-8"> <div class="glass-card p-5"> <?php if (isset($_GET['success']) && $_GET['success'] == 1): ?> <div class="alert alert-success alert-dismissible fade show" role="alert"> <strong>Success!</strong> Your bike details have been submitted for evaluation. Reference ID: <?php echo htmlspecialchars($_GET['ref'] ?? ''); ?> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> <?php endif; ?> <form id="sellBikeForm" action="api/submit_sell_request.php" method="POST" enctype="multipart/form-data"> <input type="hidden" name="csrf_token" value="<?= generate_csrf_token() ?>"> <h4 class="mb-4 border-bottom border-secondary pb-2">Customer Details</h4> <div class="row g-3 mb-5"> <div class="col-md-6"> <label class="form-label text-muted">Full Name <span class="text-danger">*</span></label> <input type="text" class="form-control" name="name" value="<?php echo htmlspecialchars($user['name'] ?? ''); ?>" required> </div> <div class="col-md-6"> <label class="form-label text-muted">Phone Number <span class="text-danger">*</span></label> <input type="tel" class="form-control" name="phone" value="<?php echo htmlspecialchars($user['phone'] ?? ''); ?>" required> </div> <div class="col-md-6"> <label class="form-label text-muted">Email Address (Optional)</label> <input type="email" class="form-control" name="email" value="<?php echo htmlspecialchars($user['email'] ?? ''); ?>"> </div> <div class="col-md-6"> <label class="form-label text-muted">City <span class="text-danger">*</span></label> <input type="text" class="form-control" name="city" value="<?php echo htmlspecialchars($user['city'] ?? ''); ?>" required> </div> </div> <h4 class="mb-4 border-bottom border-secondary pb-2">Bike Details</h4> <div class="row g-3 mb-5"> <div class="col-md-6"> <label class="form-label text-muted">Model Name <span class="text-danger">*</span></label> <select class="form-select" name="model_name" required> <option value="" disabled selected>-- Select Royal Enfield Model --</option> <?php foreach ($bike_categories as $category => $models): ?> <optgroup label="<?php echo htmlspecialchars($category); ?>"> <?php foreach ($models as $model): ?> <option value="<?php echo htmlspecialchars($model); ?>"> <?php echo htmlspecialchars($model); ?> </option> <?php endforeach; ?> </optgroup> <?php endforeach; ?> </select> </div> <div class="col-md-6"> <label class="form-label text-muted">Registration Year <span class="text-danger">*</span></label> <input type="number" class="form-control" name="year" min="1990" max="2025" required> </div> <div class="col-md-6"> <label class="form-label text-muted">KM Driven <span class="text-danger">*</span></label> <input type="number" class="form-control" name="km_driven" required> </div> <div class="col-md-6"> <label class="form-label text-muted">Registration Number <span class="text-danger">*</span></label> <input type="text" class="form-control" name="registration_number" placeholder="KA 01 AB 1234" required> </div> <div class="col-12"> <label class="form-label text-muted">Expected Price (₹)</label> <input type="number" class="form-control" name="expected_price"> </div> <div class="col-12"> <label class="form-label text-muted">Description & Condition Notes</label> <textarea class="form-control" name="description" rows="3"></textarea> </div> </div> <h4 class="mb-4 border-bottom border-secondary pb-2">Upload Media</h4> <div class="row g-3 mb-4"> <div class="col-md-6"> <label class="form-label text-muted">Upload Bike Photos</label> <input class="form-control" type="file" id="uploadInput" name="images[]" multiple accept="image/*"> </div> <div class="col-md-6"> <label class="form-label text-muted d-block">Take Photos (Camera)</label> <button type="button" class="btn btn-outline-secondary w-100" id="openCameraBtn"> Open Camera </button> <input type="file" id="cameraHiddenInput" name="images[]" multiple accept="image/*" class="d-none"> </div> <div class="col-12 mt-2 text-center"> <span id="photoCountDisplay" class="badge bg-secondary p-2 fs-6">0 / 20 Photos Selected</span> </div> <div class="col-12 mt-3 mb-2"> <div id="livePhotoPreview" class="d-flex flex-wrap gap-3 justify-content-center"></div> </div> <div class="col-12"> <label class="form-label text-muted">Bike Video (Max 200MB)</label> <input class="form-control" type="file" name="video" accept="video/*"> </div> </div> <div class="mt-5 text-center"> <button type="button" class="btn btn-primary btn-lg px-5" id="previewBtn">Preview Details</button> <p class="text-muted small mt-3">By submitting, you agree to our Terms of Service.</p> </div> </form> </div> </div> </div> </div> </section> <!-- Camera Modal --> <div class="modal fade" id="cameraModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content text-dark"> <div class="modal-header"> <h5 class="modal-title">Take Photo</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body text-center"> <video id="cameraVideo" class="w-100 bg-dark rounded" autoplay playsinline style="min-height: 250px;"></video> <canvas id="cameraCanvas" class="d-none"></canvas> </div> <div class="modal-footer justify-content-center"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Done / Cancel</button> <button type="button" class="btn btn-primary" id="capturePhotoBtn">Capture Photo</button> </div> </div> </div> </div> <!-- Preview Modal --> <div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content text-dark"> <div class="modal-header"> <h5 class="modal-title">Preview Your Details</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="row"> <div class="col-md-6 mb-2"><strong>Name:</strong> <span id="p_name"></span></div> <div class="col-md-6 mb-2"><strong>Phone:</strong> <span id="p_phone"></span></div> <div class="col-md-6 mb-2"><strong>Email:</strong> <span id="p_email"></span></div> <div class="col-md-6 mb-2"><strong>City:</strong> <span id="p_city"></span></div> <div class="col-md-6 mb-2"><strong>Model:</strong> <span id="p_model"></span></div> <div class="col-md-6 mb-2"><strong>Year:</strong> <span id="p_year"></span></div> <div class="col-md-6 mb-2"><strong>KM Driven:</strong> <span id="p_km"></span></div> <div class="col-md-6 mb-2"><strong>Reg No:</strong> <span id="p_reg"></span></div> <div class="col-md-6 mb-2"><strong>Expected Price:</strong> ₹<span id="p_price"></span></div> <div class="col-12 mb-2"><strong>Description:</strong> <span id="p_desc"></span></div> <div class="col-12 mt-3"> <strong>Selected Images:</strong> <div id="p_images" class="d-flex flex-wrap gap-2 mt-2"></div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Edit Details</button> <button type="button" class="btn btn-success" id="confirmSubmitBtn">Confirm & Submit</button> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const previewBtn = document.getElementById('previewBtn'); const confirmBtn = document.getElementById('confirmSubmitBtn'); const form = document.getElementById('sellBikeForm'); // Photo Counting Logic const uploadInput = document.getElementById('uploadInput'); const photoCountDisplay = document.getElementById('photoCountDisplay'); const MAX_PHOTOS = 20; const cameraHiddenInput = document.getElementById('cameraHiddenInput'); let uploadDataTransfer = new DataTransfer(); let cameraDataTransfer = new DataTransfer(); function getTotalPhotos() { let count = 0; if (uploadInput && uploadInput.files) count += uploadInput.files.length; if (cameraHiddenInput && cameraHiddenInput.files) count += cameraHiddenInput.files.length; return count; } function updatePhotoCount() { const total = getTotalPhotos(); if (photoCountDisplay) { photoCountDisplay.innerText = `${total} / ${MAX_PHOTOS} Photos Selected`; if (total >= MAX_PHOTOS) { photoCountDisplay.classList.replace('bg-secondary', 'bg-danger'); } else { photoCountDisplay.classList.replace('bg-danger', 'bg-secondary'); } } return total; } function renderLivePreviews() { const livePhotoPreview = document.getElementById('livePhotoPreview'); if (!livePhotoPreview) return; livePhotoPreview.innerHTML = ''; const renderFiles = (dt, inputElement, sourceName) => { if (!dt || !dt.files) return; Array.from(dt.files).forEach((file, index) => { if (file.type.startsWith('image/')) { const reader = new FileReader(); reader.onload = function(e) { const wrapper = document.createElement('div'); wrapper.className = 'position-relative d-inline-block mt-2'; const img = document.createElement('img'); img.src = e.target.result; img.style.width = '80px'; img.style.height = '80px'; img.style.objectFit = 'cover'; img.className = 'rounded border border-secondary shadow-sm'; const deleteBtn = document.createElement('button'); deleteBtn.type = 'button'; deleteBtn.innerHTML = '&times;'; deleteBtn.className = 'btn btn-danger position-absolute top-0 start-100 translate-middle rounded-circle lh-1 p-0 d-flex align-items-center justify-content-center'; deleteBtn.style.width = '24px'; deleteBtn.style.height = '24px'; deleteBtn.style.fontSize = '16px'; deleteBtn.style.zIndex = '10'; deleteBtn.onclick = function() { const newDt = new DataTransfer(); Array.from(dt.files).forEach((f, i) => { if (i !== index) newDt.items.add(f); }); if (sourceName === 'upload') { uploadDataTransfer = newDt; inputElement.files = uploadDataTransfer.files; } else { cameraDataTransfer = newDt; inputElement.files = cameraDataTransfer.files; } updatePhotoCount(); renderLivePreviews(); }; wrapper.appendChild(img); wrapper.appendChild(deleteBtn); livePhotoPreview.appendChild(wrapper); } reader.readAsDataURL(file); } }); }; renderFiles(uploadDataTransfer, uploadInput, 'upload'); renderFiles(cameraDataTransfer, cameraHiddenInput, 'camera'); } if (uploadInput) { uploadInput.addEventListener('change', function() { // Append newly selected files to our persistent DataTransfer if (uploadInput.files.length > 0) { Array.from(uploadInput.files).forEach(file => { uploadDataTransfer.items.add(file); }); } // Temporarily assign accumulated files uploadInput.files = uploadDataTransfer.files; let currentTotal = getTotalPhotos(); if (currentTotal > MAX_PHOTOS) { alert(`You can only select up to ${MAX_PHOTOS} photos in total.`); const allowedNewFiles = Math.max(0, MAX_PHOTOS - (cameraHiddenInput && cameraHiddenInput.files ? cameraHiddenInput.files.length : 0)); // Truncate the accumulated files to fit the limit const dt = new DataTransfer(); Array.from(uploadDataTransfer.files).slice(0, allowedNewFiles).forEach(file => dt.items.add(file)); uploadDataTransfer = dt; uploadInput.files = uploadDataTransfer.files; } updatePhotoCount(); renderLivePreviews(); }); } // Camera Logic const openCameraBtn = document.getElementById('openCameraBtn'); const cameraModalEl = document.getElementById('cameraModal'); let cameraModal; if (cameraModalEl) { cameraModal = new bootstrap.Modal(cameraModalEl); } const video = document.getElementById('cameraVideo'); const canvas = document.getElementById('cameraCanvas'); const capturePhotoBtn = document.getElementById('capturePhotoBtn'); let stream = null; if (openCameraBtn) { openCameraBtn.addEventListener('click', async function() { try { stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }); video.srcObject = stream; cameraModal.show(); } catch (err) { alert('Error accessing camera. Please ensure you have given permission and are using HTTPS or localhost.'); console.error(err); } }); } function stopCamera() { if (stream) { stream.getTracks().forEach(track => track.stop()); stream = null; } } if (cameraModalEl) { cameraModalEl.addEventListener('hidden.bs.modal', function () { stopCamera(); }); } if (capturePhotoBtn) { capturePhotoBtn.addEventListener('click', function() { if (getTotalPhotos() >= MAX_PHOTOS) { alert(`You have reached the maximum limit of ${MAX_PHOTOS} photos.`); return; } canvas.width = video.videoWidth; canvas.height = video.videoHeight; const ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); canvas.toBlob(function(blob) { const fileName = 'camera_capture_' + Date.now() + '.jpg'; const file = new File([blob], fileName, { type: 'image/jpeg' }); cameraDataTransfer.items.add(file); cameraHiddenInput.files = cameraDataTransfer.files; updatePhotoCount(); renderLivePreviews(); const originalText = capturePhotoBtn.innerText; capturePhotoBtn.innerText = 'Captured!'; capturePhotoBtn.classList.replace('btn-primary', 'btn-success'); setTimeout(() => { capturePhotoBtn.innerText = originalText; capturePhotoBtn.classList.replace('btn-success', 'btn-primary'); }, 1500); }, 'image/jpeg'); }); } if(previewBtn) { previewBtn.addEventListener('click', function() { if (!form.checkValidity()) { form.reportValidity(); return; } document.getElementById('p_name').innerText = form.name.value; document.getElementById('p_phone').innerText = form.phone.value; document.getElementById('p_email').innerText = form.email.value; document.getElementById('p_city').innerText = form.city.value; document.getElementById('p_model').innerText = form.model_name.value; document.getElementById('p_year').innerText = form.year.value; document.getElementById('p_km').innerText = form.km_driven.value; document.getElementById('p_reg').innerText = form.registration_number.value; document.getElementById('p_price').innerText = form.expected_price.value; document.getElementById('p_desc').innerText = form.description.value; const imageContainer = document.getElementById('p_images'); imageContainer.innerHTML = ''; const fileInputs = document.querySelectorAll('input[name="images[]"]'); let hasFiles = false; fileInputs.forEach(input => { if(input.files && input.files.length > 0) { hasFiles = true; Array.from(input.files).forEach(file => { if(file.type.startsWith('image/')) { const reader = new FileReader(); reader.onload = function(e) { const img = document.createElement('img'); img.src = e.target.result; img.style.width = '80px'; img.style.height = '80px'; img.style.objectFit = 'cover'; img.className = 'rounded border border-secondary'; imageContainer.appendChild(img); } reader.readAsDataURL(file); } }); } }); if(!hasFiles) { imageContainer.innerHTML = '<span class="text-muted small">No images selected</span>'; } var previewModal = new bootstrap.Modal(document.getElementById('previewModal')); previewModal.show(); }); } if(confirmBtn) { confirmBtn.addEventListener('click', function() { form.submit(); }); } }); </script> <?php require_once 'includes/footer.php'; ?>