<?php echo $__env->make('partials.homepage.head', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<div id="agriHero" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="<?php echo e(url('/services.jpg')); ?>" class="d-block w-100">
            </div>
        </div>
    </div>



<div class="container pb-5">
    <div class="row g-4">
        <!-- Left Column (col-md-6): Consultation Form -->
        <?php if(session('success')): ?>
    <div class="text-center col-md-9">
        <div class="mb-4 text-success" style="font-size: 4rem;">✓</div>
        <h3 class="fw-bold">Booking Confirmed!</h3>
        <p class="text-muted">Our engineer will visit on the selected date. You will receive a confirmation call shortly.</p>
        <button onclick="window.location.reload()" class="btn btn-outline-warning rounded-pill px-4 mt-3">Book Another</button>
    </div>
    <?php endif; ?>
    <?php if(!session('success')): ?>
        <div class="col-md-9">
            <div class="card form-card p-4">
                <?php if($errors->any()): ?>
                  <?php echo implode('', $errors->all('<div class="alert alert-danger">:message</div>')); ?>

                <?php endif; ?>
                <h3 class="fw-bold mb-4">Request a Site Survey</h3>
                <form id="consultationForm" method="post" action="<?php echo e(url('/contactus_form')); ?>">
                    <?php echo e(csrf_field()); ?>

                    <!-- Name Field -->
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Full Name *</label>
                        <input name="full_name" type="text" class="form-control form-control-lg bg-light border-0 shadow-sm" placeholder="e.g. Rahul Sharma" required>
                    </div>

                    <!-- Contact and District -->
                    <div class="row">
                        <div class="col-sm-6 mb-3">
                            <label class="form-label small fw-bold">Phone Number *</label>
                            <input name="mobile_no" type="tel" class="form-control form-control-lg bg-light border-0 shadow-sm" placeholder="+91" required>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <label class="form-label small fw-bold">Location *</label>
                            <input name="location" type="text" class="form-control form-control-lg bg-light border-0 shadow-sm" placeholder="City, State" required>
                        </div>
                    </div>

                    <!-- Bill and Property Type -->
                    <div class="row">
                        <div class="col-sm-6 mb-3">
                            <label class="form-label small fw-bold">Monthly Bill (Approx)</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-0">₹</span>
                                <input name="monthly_elecbill" type="number" class="form-control form-control-lg bg-light border-0 shadow-sm" placeholder="3000">
                            </div>
                        </div>
                        <div class="col-sm-6 mb-3">
                            <label class="form-label small fw-bold">Property Type *</label>
                            <div class="d-flex flex-wrap gap-2">
                              <!-- Repeat this pair for each item -->
                              <div class="flex-fill" style="min-width: 100px;">
                                <input name="property_type" type="radio" class="btn-check" id="Residential" autocomplete="off" value="Residential">
                                <label class="btn btn-outline-secondary btn-sm w-100 shadow-sm" for="Residential">Residential</label>
                              </div>
                              
                              <div class="flex-fill" style="min-width: 100px;">
                                <input name="property_type" type="radio" class="btn-check" id="Commercial" autocomplete="off" value="Commercial">
                                <label class="btn btn-outline-secondary btn-sm w-100 shadow-sm" for="Commercial">Commercial</label>
                              </div>
                              
                              <div class="flex-fill" style="min-width: 100px;">
                                <input name="property_type" type="radio" class="btn-check" id="Industrial" autocomplete="off" value="Industrial">
                                <label class="btn btn-outline-secondary btn-sm w-100 shadow-sm" for="Industrial">Industrial</label>
                              </div>

                              <div class="flex-fill" style="min-width: 100px;">
                                <input name="property_type" type="radio" class="btn-check" id="Goverment" autocomplete="off" value="Goverment">
                                <label class="btn btn-outline-secondary btn-sm w-100 shadow-sm" for="Goverment">Goverment</label>
                              </div>
                            </div>
                        </div>
                    </div>

                    <!-- Appointment Date and Time - NEW FIELDS -->
                    <div class="row">
                        <div class="col-sm-6 mb-3">
                            <label class="form-label small fw-bold">Preferred Date</label>
                            <input name="preferred_date" type="date" id="prefDate" class="form-control form-control-lg bg-light border-0 shadow-sm" required>
                        </div>
                        <div class="col-sm-6 mb-4">
                            <label class="form-label small fw-bold">Preferred Time Slot</label>
                            <select name="time_slot" class="form-select form-select-lg bg-light border-0 shadow-sm" required>
                                <option value="" selected disabled>Select Slot</option>
                                <option>Morning (10 AM - 1 PM)</option>
                                <option>Afternoon (1 PM - 4 PM)</option>
                                <option>Evening (4 PM - 7 PM)</option>
                            </select>
                        </div>
                        <div class="col-sm-12 mb-4">
                            <label class="form-label small fw-bold">Specific Requirements</label>
                            <textarea name="comment" class="form-control form-textarea-lg bg-light border-0 shadow-sm" placeholder="Tell us about your solar requirements, questions, or concerns..." rows="4"></textarea>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-solar w-100 py-3 fs-5 shadow">Confirm Booking</button>
                </form>
                <p class="text-center mt-3 small text-muted">
                    Instant Help: <a href="tel:+917317311442" class="text-warning fw-bold text-decoration-none">+91 7317 311 442, +91  7317 311 443</a>
                </p>
            </div>
        </div>
        <?php endif; ?>
        <!-- Right Column (col-md-6): Benefits & Info -->
        <div class="col-md-3">
            <div class="h-100 d-flex flex-column gap-4">
                
                <!-- UPNEDA Status -->
                <!-- <div class="card info-card p-4 shadow-sm">
                    <div class="d-flex align-items-center mb-3">
                        <div class="feature-icon">✓</div>
                        <h5 class="mb-0 fw-bold">UPNEDA Empanelled</h5>
                    </div>
                    <p class="text-secondary mb-0">We handle the entire subsidy process for you, ensuring you save up to <strong>₹78,000</strong> under PM Surya Ghar.</p>
                </div> -->

                <!-- Consultation Benefits -->
                <div class="card border-0 shadow-sm rounded-4 p-4 flex-grow-1">
                    <h5 class="fw-bold mb-4">Site Survey Agenda:</h5>
                    <ul class="list-unstyled">
                        <li class="d-flex align-items-start mb-4">
                            <span class="badge bg-warning-subtle text-warning p-2 me-3">01</span>
                            <div>
                                <h6 class="mb-1">Detailed energy consumption analysis</h6>
                            </div>
                        </li>
                        <li class="d-flex align-items-start mb-4">
                            <span class="badge bg-warning-subtle text-warning p-2 me-3">02</span>
                            <div>
                                <h6 class="mb-1">Customized solar system recommendations</h6>
                            </div>
                        </li>

                        <li class="d-flex align-items-start mb-4">
                            <span class="badge bg-warning-subtle text-warning p-2 me-3">03</span>
                            <div>
                                <h6 class="mb-1">ROI and payback calculations</h6>
                            </div>
                        </li>
                        <li class="d-flex align-items-start mb-4">
                            <span class="badge bg-warning-subtle text-warning p-2 me-3">04</span>
                            <div>
                                <h6 class="mb-1">Government subsidy guidance</h6>
                            </div>
                        </li>
                        <li class="d-flex align-items-start mb-4">
                            <span class="badge bg-warning-subtle text-warning p-2 me-3">05</span>
                            <div>
                                <h6 class="mb-1">Expert advice from Our Engineer</h6>
                            </div>
                        </li>
                        <!--<li class="d-flex align-items-start mb-4">
                            <span class="badge bg-warning-subtle text-warning p-2 me-3">03</span>
                            <div>
                                <h6 class="fw-bold mb-1">On-Spot Quotation</h6>
                                 <p class="small text-muted mb-0">Get a complete price breakdown including panels, structure, and net-metering.</p> 
                            </div>
                        </li>-->
                    </ul>
                    
                    <!-- <div class="p-3 bg-light rounded-3 mt-auto border border-stone-200">
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                                <div class="bg-warning rounded-circle p-2 text-white fw-bold d-flex align-items-center justify-content-center" style="width: 45px; height: 45px;">AD</div>
                            </div>
                            <div class="ms-3">
                                <h6 class="mb-0 fw-bold">Er. Ashish Dixit</h6>
                                <small class="text-muted">Lead Solar Consultant</small>
                            </div>
                        </div>
                    </div> -->
                </div>

            </div>
        </div>
    </div>
</div>

    <div class="container py-5">
        <div class="row g-5">
            



            <div class="col-lg-12">
                <h2 class="fw-bold mb-4">Get In Touch</h2>
                <div class="row g-4 mb-5">
                    <div class="col-md-4">
                        <div class="contact-icon"><i class="bi bi-geo-alt-fill"></i></div>
                        <h6>Head Office</h6>
                        <p class="small text-muted">A-94, Friends Colony, Arjun Gunj Lucknow 226002 Uttar Pradesh INDIA</p>
                        <h6>Branch Office</h6>
                        <p class="small text-muted">Shop No.2 LGF Oneway Height (Opposite Picnic Spot Gate) Faridi Nagar Lucknow Uttar Pradesh 226015 INDIA</p>
                    </div>
                    <div class="col-md-4">
                        <div class="contact-icon"><i class="bi bi-telephone-fill"></i></div>
                        <h6>Support Desk</h6>
                        <p class="small text-muted">+91 8512 084 084</p>
                        <div class="contact-icon"><i class="bi bi-envelope-fill"></i></div>
                        <h6>Email</h6>
                        <p class="small text-muted">info@justsolar.in</p>
                    </div>
                    <div class="col-md-4">
                        <div class="contact-icon"><i class="bi bi-clock-fill"></i></div>
                        <h6>Business Hours</h6>
                        <p class="small text-muted">Monday to Saturday: 9:00 AM to 6:00 PM<br />
Sunday: Closed</p>
                    </div>
                </div>
                <div class="rounded shadow-sm overflow-hidden" style="height: 300px; display: none;">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3502.2690623253754!2d77.21319207550036!3d28.62171127567087!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390cfd36a34117b3%3A0xf65355416df98b76!2sKrishi%20Bhawan!5e0!3m2!1sen!2sin!4v1700000000000" 
                    width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
        </div>
    </div>
    <script>
    // Set minimum date to today for the date picker
    const dateInput = document.getElementById('prefDate');
    const today = new Date().toISOString().split('T')[0];
    dateInput.setAttribute('min', today);


</script>
    <?php echo $__env->make('partials.homepage.footer', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<?php /**PATH /home2/justsolar/public_html/resources/views/front/contactus.blade.php ENDPATH**/ ?>