@extends('layouts.webpage.main_two')

@section('page-title', 'RequestQuotation')

@section('content')
<div data-aos="fade-up ">
    <section class="bilt pt-5">
        <div class="container py-5">
            <h3 class="text-center mb-2 fw-bold">Built Strong with Meking</h3>
            <p class="text-center mb-5 text-muted">
                Share your project requirements and we'll craft the ideal steel building solution.
            </p>

            <!-- Stepper -->
            <div class="stepper mb-5">
                <div class="step active" id="step-1-indicator">
                    <div class="icon">1</div>
                    <small>Tell Us Who You Are</small>
                    <p>Provide your name, email, and mobile so we know how to reach you.</p>
                </div>
                <div class="step" id="step-2-indicator">
                    <div class="icon">2</div>
                    <small>Secure Your Access</small>
                    <p>Verify your mobile number with OTP for a secure experience.</p>
                </div>
                <div class="step" id="step-3-indicator">
                    <div class="icon">3</div>
                    <small>Share Project Details</small>
                    <p>Tell us what you’re building. Our team will get back to you with a quote.</p>
                </div>
                <div class="step" id="step-4-indicator">
                    <div class="icon">4</div>
                    <small>Review Estimate</small>
                    <p>Thanks for your details. Here's your estimate and contact info.</p>
                </div>
            </div>

            <form id="quotationForm" onsubmit="return false;">
                {{-- STEP 1 --}}
                <div class="form-section active" id="step1">
                    <h4 class="mb-2">Request a Quotation</h4>
                    <p class="text-black">Please enter your mobile number to begin.</p>

                    <div class="mb-3">
                        <input type="text" class="form-control"   name="name" id="name" placeholder="Enter your name" required>
                    </div>
                    <div class="mb-3">
                        <input type="email" class="form-control"  name="email" id="email" placeholder="Enter your email" required>
                    </div>
                    <div class="mb-3 input-group">
                        <span class="input-group-text">+91</span>
                        <input type="tel" class="form-control"  name="mobile" id="mobile" placeholder="Enter Your Mobile Number" required>
                    </div>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="agree">
                        <label class="form-check-label text-muted" for="agree">
                            By continuing, you agree to our <a href="{{ route('terms.conditions') }}">Terms & Conditions</a> and
                          <a href="{{ route('privacy.policy') }}">Privacy Policy</a>
                        </label>
                    </div>
                    <div class="text-center">
                        <button id="generateOtpBtn" class="btn btn-primary">Generate OTP</button>
                    </div>
                </div>

                 {{-- STEP 2: Verify OTP --}}
                <div id="step2" style="display: none;">
                    <h5 class="text-center mb-3">Enter the 4-digit OTP</h5>
                    <div class="d-flex justify-content-center gap-2 mb-3">
                        <input type="text" maxlength="1" class="otp-input form-control text-center" style="width: 50px; font-size: 24px;">
                        <input type="text" maxlength="1" class="otp-input form-control text-center" style="width: 50px; font-size: 24px;">
                        <input type="text" maxlength="1" class="otp-input form-control text-center" style="width: 50px; font-size: 24px;">
                        <input type="text" maxlength="1" class="otp-input form-control text-center" style="width: 50px; font-size: 24px;">
                    </div>
                    <div class="text-center">
                        <button id="verifyOtpBtn" class="btn btn-success">Verify OTP</button>
                    </div>
                </div>

                 {{-- STEP 3: Project Details --}}
                    <div id="step3" style="display: none;">
                        <h4 class="mb-4 text-center">Share Your Project Details</h4>

                        <div class="row g-3 mb-3">
                            <div class="col-lg-6">
                                <label for="projectType" class="form-label">Project Type</label>
                                <select class="form-select" id="projectType">
                                    <option value="" selected disabled>Select Project Type</option>
                                    @foreach($projectTypes as $type)
                                        <option value="{{ $type->name }}">{{ $type->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-lg-6">
                                <label for="projectLocation" class="form-label">Project Location</label>
                                <input type="text" class="form-control" id="projectLocation" placeholder="Location of Project" />
                            </div>
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-lg-6">
                                <label for="approxArea" class="form-label">Approx. Area (sq.ft)</label>
                                <input type="text" class="form-control" id="approxArea" placeholder="E.g., 25,000" />
                            </div>
                            <div class="col-lg-6">
                                <label for="roofingMaterial" class="form-label">Preferred Roofing/Cladding Material</label>
                                <select class="form-select" id="roofingMaterial">
                                    <option value="" selected disabled>Select Material</option>
                                    @foreach($materialTypes as $material)
                                        <option value="{{ $material->name }}">{{ $material->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row g-3 mb-3">
                            <div class="col-lg-6">
                                <label for="steelType" class="form-label">Steel Type / Grade</label>
                                <select class="form-select" id="steelType">
                                    <option value="" selected disabled>Select Steel Type</option>
                                    @foreach($steelTypes as $steel)
                                        <option value="{{ $steel->name }}">{{ $steel->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-lg-6">
                                <label for="colorPreference" class="form-label">Colour Preference</label>
                                <select class="form-select" id="colorPreference">
                                    <option value="Gray" selected>Gray</option>
                                    <option value="Red">Red</option>
                                    <option value="Blue">Blue</option>
                                    <option value="Green">Green</option>
                                </select>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="title" class="form-label">Project Title</label>
                            <input type="text" name="title" id="title" class="form-control" placeholder="Enter Project Title">
                        </div>

                    
                        <div class="mb-4">
                            <label for="projectDescription" class="form-label">Project Description</label>
                            <textarea class="form-control" id="projectDescription" rows="3"
                                placeholder="Share any special requirements, timeline, or design details."></textarea>
                        </div>

                        <div class="mb-4">
                            <label for="estimate_cost" class="form-label">Estimated Cost</label>
                            <input type="text" name="estimate_cost" id="estimate_cost" class="form-control" placeholder="Enter estimated cost">
                        </div>


                        <div class="text-center">
                            <button id="submitProjectDetailsBtn" class="btn btn-primary">Submit Details</button>
                        </div>
                    </div>

                {{-- STEP 4: Success Message --}}
                    <div id="step4" style="display: none;" class="text-center">
                        <h4 class="text-success mt-4">✅ Quotation Submitted Successfully!</h4>
                        <p class="text-muted">Thank you for sharing your project details. Our team will reach out soon.</p>
                    </div>
                </div>
            </form>
        </div>
    </section>
</div>

<meta name="csrf-token" content="{{ csrf_token() }}">

<script>
document.addEventListener('DOMContentLoaded', () => {
    let quotationId = null;

    const step1 = document.getElementById('step1');
    const step2 = document.getElementById('step2');
    const step3 = document.getElementById('step3');
    const step4 = document.getElementById('step4');
    const generateOtpBtn = document.getElementById('generateOtpBtn');
    const verifyOtpBtn = document.getElementById('verifyOtpBtn');
    const submitProjectDetailsBtn = document.getElementById('submitProjectDetailsBtn');


    
    function updateStepper(stepNumber) {
        const steps = document.querySelectorAll('.stepper .step');
        steps.forEach((step, index) => {
            step.classList.remove('active');
            if (index < stepNumber) {
                step.classList.add('active');
            }
        });
    }

    
    function showStep(stepNumber) {
        [step1, step2, step3, step4].forEach((step, index) => {
            step.style.display = (index + 1 === stepNumber) ? 'block' : 'none';
        });

        updateStepper(stepNumber);
    }

    // Step 1 → Generate OTP
    generateOtpBtn.addEventListener('click', async (event) => {
        event.preventDefault();
        const name = document.getElementById('name').value.trim();
        const email = document.getElementById('email').value.trim();
        const phone = document.getElementById('mobile').value.trim();
        const agree = document.getElementById('agree');

        if (!name || !email || !phone) {
            alert('Please fill all fields.');
            return;
        }

        if (!agree.checked) {
            alert('You must agree to the Terms & Conditions before continuing.');
            return;
        }

        try {
            const res = await fetch('{{ route("g.otp") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector("meta[name='csrf-token']").content,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ name, email, phone })
            });

            const data = await res.json();
            if (data.status === 'success') {
                quotationId = data.quotation_id; // store ID for later
                alert('OTP Sent Successfully: ' + data.otp); // for testing only
                showStep(2);
            } else {
                alert('Error: ' + (data.message || 'Something went wrong.'));
            }
        } catch (err) {
            console.error(err);
            alert('Something went wrong while generating OTP.');
        }
    });

    // Step 2 → Verify OTP
    verifyOtpBtn.addEventListener('click', async (event) => {
        event.preventDefault();
        const phone = document.getElementById('mobile').value.trim();
        const otp = Array.from(document.querySelectorAll('.otp-input'))
            .map(inp => inp.value.trim())
            .join('');

        if (otp.length !== 4) {
            alert('Please enter a valid 4-digit OTP.');
            return;
        }

        try {
            const res = await fetch('{{ route("v.otp") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector("meta[name='csrf-token']").content,
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ phone, otp })
            });

            const data = await res.json();
            if (data.status === "success") {
                alert("✅ OTP Verified Successfully!");
                showStep(3);
            } else {
                alert("⚠️ " + (data.message || "Invalid OTP."));
            }
        } catch (err) {
            console.error(err);
            alert("Something went wrong while verifying OTP.");
        }
    });

    // Step 3 → Submit Project Details
    submitProjectDetailsBtn.addEventListener('click', async () => {
        event.preventDefault();
        const payload = {
            quotation_id: quotationId,
            projectType: document.getElementById('projectType').value,
            location: document.getElementById('projectLocation').value,
            area: document.getElementById('approxArea').value,
            material: document.getElementById('roofingMaterial').value,
            steelType: document.getElementById('steelType').value,
            color: document.getElementById('colorPreference').value,
            desc: document.getElementById('projectDescription').value,
            estimate_cost: document.getElementById('estimate_cost').value,
            title: document.getElementById('title').value,
        };

        try {
            const res = await fetch('{{ route("quotation.store") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector("meta[name='csrf-token']").content,
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify(payload)
            });

            const data = await res.json();
            if (data.status === 'success') {
                showStep(4);
    
                if (data.redirect) {
                    console.log('Redirecting in 10 seconds to:', data.redirect);
                    setTimeout(() => {
                        window.location.href = data.redirect;
                    }, 5000); 
                }
            } else {
                alert('Error saving project details.');
            }
        } catch (err) {
            console.error(err);
            alert('Something went wrong while saving details.');
        }
    });
});
</script>
<script>
    const inputs = document.querySelectorAll('.otp-input');

    inputs.forEach((input, index) => {
        input.addEventListener('input', (e) => {
            const value = e.target.value;
            if (value && index < inputs.length - 1) {
                inputs[index + 1].focus();
            }
        });

        input.addEventListener('keydown', (e) => {
            if (e.key === 'Backspace' && !e.target.value && index > 0) {
                inputs[index - 1].focus();
            }
        });
    });


</script>

<style>
nav a.nav-link {
    color: #000000 !important; 
}

nav a.nav-link:hover {
    color: #000000ff !important; 
}

</style>

@endsection