@extends('layouts.webpage.main_two')

@section('page-title', 'Request Quotation')

@section('content')

    {{-- ================= HERO ================= --}}
    <section class="hero-section about-ban" style="background-image: url('{{ asset('uploads/hero_quotation/' . $hero_request->image_url) }}')">
        <div class="hero-content about-inner text-center">
            <!-- <h1 class="about-page">Meking Ai Estimator</h1> -->
        </div>
    </section>

    {{-- ================= STYLES ================= --}}
    <style>
        .req-qt {
            background: #f5f7fb;
            font-family: Inter, sans-serif;
        }

        .top-header {
            background: linear-gradient(90deg, #2d3a4f, #1f2937);
            color: #fff;
            padding: 12px 20px;
        }

        .top-header .btn {
            background: #ff7a00;
            border: none;
        }

        .main-wrapper {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, .08);
            overflow: hidden;
            padding: 15px 0;
        }

        .steps {
            background: #ffffffc7;
            padding: 25px;
            min-height: 100%;
        }

        .steps .nav-link {
            display: flex;
            gap: 12px;
            align-items: center;
            color: #6b7280;
            border-radius: 8px;
            margin-bottom: 12px;
            font-weight: 500;
            border: none;
            background: transparent;
            width: 100%;
            text-align: left;
        }

        .steps .nav-link span {
            width: 26px;
            height: 26px;
            border: 1px solid #122f55;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
        }

        .steps .nav-link.active {
            background: #eef2ff;
            color: #111827;
        }

        .steps .nav-link.active span {
            background: #122f55;
            color: #fff;
        }

        .form-section {
            padding: 25px;
        }

        .form-control,
        .form-select {
            height: 48px;
        }

        .next-btn {
            background: #ff7a00;
            color: #fff;
            font-weight: 600;
        }

        .next-btn:hover {
            background: #fff;
            color: #ff7a00;
            border: 1px solid #ff7a00;
        }

        .build-card {
            background: #fff;
            border-radius: 12px;
            padding: 12px;
            height: 100%;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .build-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
        }

        /* Active card */
        .build-card.active {
            border-color: #ff7a00;
            box-shadow: 0 12px 35px rgba(255, 122, 0, 0.25);
        }

        .build-card img {
            width: 100%;
            border-radius: 10px;
            margin-bottom: 15px;
        }

        .build-card h6 {
            font-weight: 700;
            margin-bottom: 6px;
        }

        .build-card p {
            font-size: 14px;
            color: #666;
            margin-bottom: 0;
        }
        .iti.iti--allow-dropdown.iti--separate-dial-code.iti--show-flags {
            width: 100%;
        }
        .dt-location{ 
            background: #ff7a00;
            color: #fff;
            font-weight: 600;
        }
         .dt-location:hover {
            background: #fff;
            color: #ff7a00;
            border: 1px solid #ff7a00;
        }
    </style>

    {{-- ================= FORM ================= --}}
    <section class="req-qt p-1">
        <div class="container my-4">

            <!-- <div class="top-header d-flex justify-content-between align-items-center mb-3">
                <div class="fw-bold">MEKING <span class="text-warning">STEEL</span></div>
                <button class="btn btn-warning text-white">Get Instant Quote</button>
            </div> -->

            <div class="row main-wrapper">

                {{-- ================= SIDEBAR STEPS ================= --}}
                <div class="col-lg-3 p-0">
                    <div class="steps nav flex-column nav-pills">
                        <button class="nav-link active"  data-step="1">
                            <span>1</span> Project Info
                        </button>
                        <button class="nav-link"  data-step="2">
                            <span>2</span> Site & Location
                        </button>
                        <button class="nav-link"  data-step="3">
                            <span>3</span> Size & Dimensions
                        </button>
                        <button class="nav-link"  data-step="4">
                            <span>4</span> Cost Summary
                        </button>
                    </div>
                </div>

                {{-- ================= FORM CONTENT ================= --}}
                <div class="col-lg-9">
                    <div class="form-section tab-content">

                        <form id="quotationForm">

                            {{-- ================= STEP 1 ================= --}}
                            <!-- <div class="tab-pane fade show active" id="step1">
                                    <h2 class="mb-3">Tell Us About You</h2>
                                    <p class="text-muted">Get a smart estimate in minutes.</p>


                                    <input id="name" name="name" class="form-control mb-3" placeholder="Your Name">
                                    <input id="email" name="email" class="form-control mb-3" placeholder="Email">
                                    <input id="title" name="title" class="form-control mb-3" placeholder="Company Name">
                                        <div class="row g-2 mb-4">
                                            <div class="col-4">
                                                <select class="form-select">
                                                    <option>+91</option>
                                                    <option>+1</option>
                                                </select>
                                            </div>
                                            <div class="col-8">
                                                <input class="form-control" id="phone" name="phone" placeholder="Mobile Number">
                                            </div>
                                        </div>

                                    <button type="button" id="sendOtpBtn" class="btn next-btn w-100">
                                        Generate OTP →
                                    </button>

                                     <div id="otpSection"  class="d-none text-center">
                                    <h4 class="mb-3">Enter OTP</h4>

                                    <div class="d-flex justify-content-center gap-2 mb-4">
                                        @for($i = 0; $i < 4; $i++)
                                            <input maxlength="1" class="otp-input form-control text-center" style="width:50px">
                                        @endfor
                                    </div>

                                    <button type="button" id="verifyOtpBtn" class="btn next-btn w-100">
                                        Verify OTP →
                                    </button>
                                </div>
                                </div> -->

                            <div class="tab-pane show active" id="step1">

                                <!-- Generate OTP SECTION -->
                                <div id="generateOtpSection">
                                    <h2 class="mb-3">Tell Us About You</h2>
                                    <p class="text-muted">Get a smart estimate in minutes.</p>

                                    <input id="name" name="name" class="form-control mb-3" placeholder="Your Name">
                                    <input id="email" name="email" class="form-control mb-3" placeholder="Email">
                                    <input id="title" name="title" class="form-control mb-3" placeholder="Company Name">

                                    <div class="row g-2 mb-4">
                                        <div class="col-4">
                                            <select class="form-select">
                                                <option>+91</option>
                                                <option>+1</option>
                                            </select>
                                        </div>
                                        <div class="col-8">
                                            <input type="tel" pattern="[0-9]*" inputmode="numeric" class="form-control" id="phone" name="phone" placeholder="Mobile Number">
                                        </div>
                                    </div>

                                    <button type="button" id="sendOtpBtn" class="btn next-btn w-100">
                                        Generate OTP →
                                    </button>
                                </div>

                                <!-- Verify OTP SECTION -->
                                <div id="otpSection" class="d-none text-center">
                                    <h4 class="mb-3">Enter OTP</h4>
                                    <p>Please check the OTP sent to your email address.</p>
                                    <div class="d-flex justify-content-center gap-2 mb-4">
                                        @for($i = 0; $i < 4; $i++)
                                            <input maxlength="1" class="otp-input form-control text-center" style="width:50px">
                                        @endfor
                                    </div>

                                    <button type="button" id="verifyOtpBtn" class="btn next-btn w-100">
                                        Verify OTP →
                                    </button>
                                </div>

                            </div>


                            {{-- ================= STEP 2 ================= --}}
                            <div class="tab-pane d-none" id="step2">
                                <h2 class="mb-3">Project Details</h2>
                                <hr>
                               <h3 class="mb-3">Project Type</h3>
                                <input type="hidden" name="project_type" id="project_type">

                                <!-- CAROUSEL WRAPPER -->
                                <div class="p-type owl-carousel mb-3">

                                    @foreach($projectTypes as $index => $type)
                                        <div class="build-card {{ $loop->first ? 'active' : '' }}" data-value="{{ $type->name }}">
                                            <img src="{{ $images[$index] ?? asset('assets/images/placeholder.jpg') }}" alt="{{ $type->name }}">
                                            <h6>{{ $type->name }}</h6>
                                            <!-- <p>{{ $type->description ?? 'Default description' }}</p> -->
                                        </div>
                                    @endforeach
                                </div>


                                <hr>
                                <h3 class="mb-3">Location</h3>
                                <!-- <input class="form-control mb-4" id="location" name="location" placeholder="Detecting location..." readonly> -->
                                <div class="mb-3 position-relative">
                                    <input type="text" class="form-control mb-2" id="location" name="location" placeholder="Enter location or detect current location...">
                                    <button type="button" class="btn dt-location mb-sm-0 mb-2" onclick="detectLocationAndWind()">
                                        Detect Location
                                    </button>
                                </div>
                                <button type="button" class="btn btn-outline-secondary" onclick="goBack(1)">
                                    ← Back
                                </button>

                                <button type="button" class="btn next-btn ">
                                    Next → Site & Location
                                </button>
                            </div>


                            {{-- ================= STEP 3 ================= --}}
                            <!-- <div id="step3" class="d-none">
                                    <h4 class="mb-4 text-center">Building Details</h4>

                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label>Length (m)</label>
                                            <input id="length_m" type="number" class="form-control">
                                        </div>

                                        <div class="col-md-4">
                                            <label>Width (m)</label>
                                            <input id="width_m" type="number" class="form-control">
                                        </div>

                                        <div class="col-md-4">
                                            <label>Clear Height (m)</label>
                                            <input id="clear_height_m" type="number" class="form-control">
                                        </div>

                                        <div class="col-md-4">
                                            <label>Wind Speed</label>
                                            <select id="wind_speed" class="form-select">
                                                <option value="140">140 kmph</option>
                                                <option value="170">170 kmph</option>
                                                <option value="180">180 kmph</option>
                                                <option value="200">200 kmph</option>
                                            </select>
                                        </div>

                                        <div class="col-md-4">
                                            <label>Frame Type</label>
                                            <select id="frame_type" class="form-select">
                                                <option value="Clear Span">Clear Span</option>
                                                <option value="MS-01">MS-01</option>
                                                <option value="MS-02">MS-02</option>
                                            </select>
                                        </div>

                                        <div class="col-md-4">
                                            <label>Overhead Crane</label>
                                            <select id="crane_required" class="form-select">
                                                <option value="0">No</option>
                                                <option value="1">Yes</option>
                                            </select>
                                        </div>

                                        <div class="col-md-4">
                                            <label>Roofing System</label>
                                            <select id="roofing_system" class="form-select">
                                                <option value="screw_down">Screw Down</option>
                                                <option value="standing_seam">Standing Seam</option>
                                            </select>
                                        </div>
                                    </div>

                                    <button type="button" id="calculateBtn" class="btn next-btn w-100 mt-4">
                                        Generate Estimate →
                                    </button>
                                </div> -->

                            <div id="step3" class="d-none">
                                <h4 class="mb-4 text-center">Size & Dimensions</h4>

                                <div class="row bg-white rounded p-3">

                                    <!-- ===== Sliders Section ===== -->
                                    <div class="col-12">

                                        <!-- Length Slider -->
                                        <div class="mb-3">
                                            <label class="d-flex justify-content-between">
                                                <span>Length</span>
                                                <span class="range-value" id="lengthValue">0 m</span>
                                            </label>
                                            <input type="range" class="form-range" min="1" max="1000"
                                                oninput="length_m.value=this.value; lengthValue.innerText=this.value+' m'">
                                        </div>

                                        <!-- Width Slider -->
                                        <div class="mb-3">
                                            <label class="d-flex justify-content-between">
                                                <span>Width</span>
                                                <span class="range-value" id="widthValue">0 m</span>
                                            </label>
                                            <input type="range" class="form-range" min="1" max="1000"
                                                oninput="width_m.value=this.value; widthValue.innerText=this.value+' m'">
                                        </div>

                                        <!-- Height Slider -->
                                        <div class="mb-4">
                                            <label class="d-flex justify-content-between">
                                                <span>Height</span>
                                                <span class="range-value" id="heightValue">0 m</span>
                                            </label>
                                            <input type="range" class="form-range" min="1" max="1000"
                                                oninput="clear_height_m.value=this.value; heightValue.innerText=this.value+' m'">
                                        </div>

                                    </div>

                                    <!-- ===== Input Section ===== -->
                                    <div class="col-12">
                                        <div class="row g-3">

                                            <div class="col-md-4">
                                                <label>Length (m)</label>
                                                <input id="length_m" type="number" class="form-control"
                                                    oninput="lengthValue.innerText=this.value+' m'">
                                            </div>

                                            <div class="col-md-4">
                                                <label>Width (m)</label>
                                                <input id="width_m" type="number" class="form-control"
                                                    oninput="widthValue.innerText=this.value+' m'">
                                            </div>

                                            <div class="col-md-4">
                                                <label>Clear Height (m)</label>
                                                <input id="clear_height_m" type="number" class="form-control"
                                                    oninput="heightValue.innerText=this.value+' m'">
                                            </div>

                                            <div class="col-md-4">
                                                <label>Wind Speed</label>
                                                <select id="wind_speed" class="form-select">
                                                    <option value="140">140 kmph</option>
                                                    <option value="170">170 kmph</option>
                                                    <option value="180">180 kmph</option>
                                                    <option value="200">200 kmph</option>
                                                </select>
                                            </div>

                                            <!-- <div>
                                                <label>Wind Speed (km/h)</label>
                                                <input type="hidden" class="form-control mb-4" id="wind_speed" name="wind_speed" placeholder="Fetching wind speed..." readonly>
                                            </div> -->

                                            <!-- <div class="col-md-4">
                                                <label>Frame Type</label>
                                                <select id="frame_type" class="form-select">
                                                    <option value="Clear Span">Clear Span</option>
                                                    <option value="MS-01">MS-01</option>
                                                    <option value="MS-02">MS-02</option>
                                                </select>
                                            </div> -->

                                            <div class="col-md-4">
                                                <label>Frame Type</label>
                                                <select id="frame_type" name="frame_type" class="form-select" required>
                                                    <option value="">Select Frame Type</option>

                                                    @foreach($frameTypes as $frame)
                                                        <option value="{{ $frame->name }}">
                                                            {{ $frame->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-4">
                                                <label>Overhead Crane</label>
                                                <select id="crane_required" class="form-select">
                                                    <option value="0">No</option>
                                                    <option value="1">Yes</option>
                                                </select>
                                            </div>

                                            <div class="col-md-4">
                                                <label>Roofing System</label>
                                                <select id="roofing_system" class="form-select">
                                                    <option value="screw_down">Screw Down</option>
                                                    <option value="standing_seam">Standing Seam</option>
                                                </select>
                                            </div>

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

                                <button type="button" class="btn btn-outline-secondary" onclick="goBack(2)">
                                    ← Back
                                </button>

                                <button type="button" id="calculateBtn" class="btn next-btn ">
                                    Generate Estimate →
                                </button>
                            </div>



                            {{-- ================= STEP 4 ================= --}}
                            <div id="step4" class="d-none text-center">
                                <h4 class="text-success mb-3">Estimated Cost</h4>
                                <h2 id="finalCost" class="fw-bold">₹ 0</h2>
                                <p id="costInWords" class="fw-normal"></p>
                                <h2 id="thanks"></h2>
                                <p>Note: Final cost may vary based on site inspection and material selection</p>
                                <p>Our experts are reviewing your project. You’ll hear from us within 24–48 hours.</p>

                                <a href="{{ route('homepage') }}" class="btn btn-outline-secondary mt-3">
                                    Back to Home
                                </a>
                            </div>

                        </form>

                    </div>
                </div>

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

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

    {{-- ================= SCRIPT (UNCHANGED) ================= --}}
    <!-- <script>
            const csrf = document.querySelector('meta[name="csrf-token"]').content;
            let quotationId = null;

            // Step visibility function
            function showStep(step) {
                const steps = ['step1', 'step2', 'step3', 'step4'];

                steps.forEach((id, index) => {
                    const el = document.getElementById(id);
                    if (!el) return;

                    el.classList.toggle('d-none', index + 1 !== step);
                    el.classList.toggle('show', index + 1 === step);
                    el.classList.toggle('active', index + 1 === step);
                });

                document.querySelectorAll('.steps .nav-link').forEach((btn, index) => {
                    btn.classList.toggle('active', index + 1 === step);
                });
            }


            // ================= STEP 1: SEND OTP =================
            document.getElementById('sendOtpBtn').onclick = async () => {
                try {
                    const res = await fetch('{{ route("g.otp") }}', {
                        method:'POST',
                        headers:{
                            'X-CSRF-TOKEN': csrf,
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            name: document.getElementById('name').value,
                            email: document.getElementById('email').value,
                            title: document.getElementById('title').value,
                            phone: document.getElementById('phone').value
                        })
                    });

                    let data;
                    try { data = await res.json(); }
                    catch(err) { 
                        const text = await res.text();
                        console.error('Invalid JSON from server:', text);
                        alert('Server error. Check console.');
                        return;
                    }

                    if(!res.ok || data.status === 'error'){
                        alert(data.message || Object.values(data.errors || {}).flat().join('\n'));
                        return;
                    }

                    quotationId = data.quotation_id;

                    document.getElementById('generateOtpSection').classList.add('d-none');
                    document.getElementById('otpSection').classList.remove('d-none');

                    // ✅ AUTO-FILL OTP (DEV ONLY)
                    if (data.otp) {
                        const inputs = document.querySelectorAll('.otp-input');

                        data.otp.toString().split('').forEach((digit, index) => {
                            if (inputs[index]) {
                                inputs[index].value = digit;
                            }
                        });

                        console.log('OTP auto-filled:', data.otp);
                    }
                    // showStep(1);


                } catch(err) {
                    console.error('Fetch failed:', err);
                    alert('Server unreachable. Check console.');
                }
            };

            // ================= STEP 2: VERIFY OTP =================
            document.getElementById('verifyOtpBtn').onclick = async () => {
                const otp = [...document.querySelectorAll('.otp-input')].map(i=>i.value).join('');
                try {
                    const res = await fetch('{{ route("v.otp") }}', {
                        method: 'POST',
                        headers:{'X-CSRF-TOKEN':csrf,'Content-Type':'application/json'},
                        body: JSON.stringify({request_quotation_id: quotationId, otp})
                    });

                    let data;
                    try { data = await res.json(); }
                    catch(err){ 
                        const text = await res.text();
                        console.error('Invalid JSON from server:', text);
                        alert('Server error. Check console.');
                        return;
                    }

                    if(!res.ok || data.status === 'error'){
                        alert(data.message || 'Invalid OTP');
                        return;
                    }

                    showStep(2);

                } catch(err){
                    console.error('Fetch failed:', err);
                    alert('Server unreachable. Check console.');
                }
            };

            // ================= STEP 3 & 4: STORE STRUCTURE & GENERATE ESTIMATE =================
            document.getElementById('calculateBtn').onclick = async () => {
                if (!quotationId) {
                    alert('Quotation ID missing! Complete Step 1 & 2 first.');
                    return;
                }

                const payload = {
                    quotation_id: quotationId,
                    length: parseFloat(document.getElementById('length_m').value) || 0,
                    width: parseFloat(document.getElementById('width_m').value) || 0,
                    height: parseFloat(document.getElementById('clear_height_m').value) || 0,
                    wind_speed: parseFloat(document.getElementById('wind_speed').value) || 0,
                    frame_type: document.getElementById('frame_type').value,
                    crane_required: parseInt(document.getElementById('crane_required').value),
                    roofing: document.getElementById('roofing_system').value
                };

                try {
                    // --- Store structure ---
                    const resStore = await fetch('{{ route("quotation.structure.store") }}', {
                        method: 'POST',
                        headers: { 'X-CSRF-TOKEN': csrf, 'Content-Type': 'application/json' },
                        body: JSON.stringify(payload)
                    });

                    const storeText = await resStore.text(); // read **once**
                    let storeData;
                    try { storeData = JSON.parse(storeText); }
                    catch(err) {
                        console.error('Invalid JSON from storeStructure:', storeText);
                        alert('Error storing structure. Check console.');
                        return;
                    }

                    if (!resStore.ok || storeData.status === 'error') {
                        alert(storeData.message || 'Error storing structure');
                        return;
                    }

                    console.log('Structure stored successfully:', storeData);

                    // --- Generate estimate ---
                    const resEstimate = await fetch('{{ route("quotation.estimate") }}', {
                        method: 'POST',
                        headers: { 'X-CSRF-TOKEN': csrf, 'Content-Type': 'application/json' },
                        body: JSON.stringify({ request_quotation_id: quotationId })
                    });

                    const estimateText = await resEstimate.text(); // read **once**
                    let estimateData;
                    try { estimateData = JSON.parse(estimateText); }
                    catch(err) {
                        console.error('Invalid JSON from generateEstimate:', estimateText);
                        alert('Error fetching estimate. Check console.');
                        return;
                    }

                    if (!resEstimate.ok || estimateData.status === 'error') {
                        alert(estimateData.message || 'Error fetching estimate');
                        return;
                    }

                    const estimateCost = Number(
                        estimateData.estimate_cost ??
                        estimateData.total_cost ??
                        estimateData.data?.estimate_cost ??
                        0
                    );

                    // const priceSqft = Number(
                    //     estimateData.price_per_sqft ??
                    //     estimateData.data?.price_per_sqft ??
                    //     0
                    // );

                    console.log('Estimate API response:', estimateData);

                    document.getElementById('finalCost').innerText =
                        '₹ ' + estimateCost.toLocaleString('en-IN');

                    // document.getElementById('priceSqft').innerText =
                    //     '₹ ' + priceSqft.toLocaleString('en-IN');

                    showStep(4);

                } catch(err) {
                    console.error('Fetch failed:', err);
                    alert('Server unreachable. Check console.');
                }
            };

            </script> -->
        <script>
            function numberToWords(num) {
                const ones = ["", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine"];
                const tens = ["", "", "Twenty", "Thirty", "Forty", "Fifty", "Sixty", "Seventy", "Eighty", "Ninety"];
                const teens = ["Ten", "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen", "Eighteen", "Nineteen"];

                if (num === 0) return "Zero";

                function getWords(n) {
                    let word = "";
                    if (n > 99) {
                        word += ones[Math.floor(n / 100)] + " Hundred ";
                        n %= 100;
                    }
                    if (n > 19) {
                        word += tens[Math.floor(n / 10)] + " ";
                        n %= 10;
                    } else if (n >= 10) {
                        word += teens[n - 10] + " ";
                        n = 0;
                    }
                    if (n > 0) word += ones[n] + " ";
                    return word.trim();
                }

                let crore = Math.floor(num / 10000000);
                let lakh = Math.floor((num % 10000000) / 100000);
                let thousand = Math.floor((num % 100000) / 1000);
                let hundred = Math.floor(num % 1000);

                let result = "";
                if (crore) result += getWords(crore) + " Crore ";
                if (lakh) result += getWords(lakh) + " Lakh ";
                if (thousand) result += getWords(thousand) + " Thousand ";
                if (hundred) result += getWords(hundred) + " ";

                return result.trim() + " Rupees";
            }
        </script>

    <script>



        /* ================= GLOBALS ================= */
        const csrf = document.querySelector('meta[name="csrf-token"]').content;
        let quotationId = null;
        let currentStep = 1;
        let step1Completed = false;
        let step2Completed = false;
        let step3Completed = false;


        /* ================= STEP HANDLER ================= */
        function showStep(step) {
            currentStep = step;
            const steps = ['step1', 'step2', 'step3', 'step4'];

            steps.forEach((id, index) => {
                const el = document.getElementById(id);
                if (!el) return;

                const isActive = index + 1 === step;
                el.classList.toggle('d-none', !isActive);
                el.classList.toggle('show', isActive);
                el.classList.toggle('active', isActive);
            });

            document.querySelectorAll('.steps .nav-link').forEach((btn, index) => {
                btn.classList.toggle('active', index + 1 === step);
            });
        }

              function goBack(step) {
                    showStep(step);
                }
        //   ================= NAVIGATION =================       

           document.querySelectorAll('.steps .nav-link').forEach(btn => {
                btn.addEventListener('click', () => {
                    const targetStep = Number(btn.dataset.step);

                    // ✅ Always allow BACK
                    if (targetStep < currentStep) {
                        showStep(targetStep);
                        return;
                    }

                    // ⛔ Forward guards
                    if (targetStep > 1 && !step1Completed) {
                        alert('Please complete Step 1 first');
                        return;
                    }

                    if (targetStep > 2 && !step2Completed) {
                        alert('Please complete Step 2 first');
                        return;
                    }

                    if (targetStep > 3 && !step3Completed) {
                        alert('Please complete Step 3 first');
                        return;
                    }

                    showStep(targetStep);
                });
            });



        /* ================= STEP 1 : SEND OTP ================= */
        document.getElementById('sendOtpBtn').addEventListener('click', async () => {
            try {
                const payload = {
                    name: document.getElementById('name').value,
                    email: document.getElementById('email').value,
                    title: document.getElementById('title').value,
                    phone: document.getElementById('phone').value
                };

                const res = await fetch('{{ route("g.otp") }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrf,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(payload)
                });

                const text = await res.text();
                let data;

                try {
                    data = JSON.parse(text);
                } catch {
                    console.error('Invalid JSON from OTP API:', text);
                    alert('Server error. Check console.');
                    return;
                }

                if (!res.ok || data.status === 'error') {
                    alert(data.message || Object.values(data.errors || {}).flat().join('\n'));
                    return;
                }

                quotationId = data.quotation_id;

                // UI toggle inside Step 1
                document.getElementById('generateOtpSection').classList.add('d-none');
                document.getElementById('otpSection').classList.remove('d-none');

                // DEV auto-fill OTP
                if (data.otp) {
                    document.querySelectorAll('.otp-input').forEach((input, i) => {
                        input.value = data.otp.toString()[i] || '';
                    });
                }

            } catch (err) {
                console.error('OTP request failed:', err);
                alert('Server unreachable.');
            }
        });

        /* ================= STEP 1 : VERIFY OTP ================= */
        document.getElementById('verifyOtpBtn').addEventListener('click', async () => {
            try {
                const otp = [...document.querySelectorAll('.otp-input')]
                    .map(i => i.value)
                    .join('');

                    // Validate without showing OTP
                    if (otp.length !== 4 || !/^\d{4}$/.test(otp)) {
                        alert('Enter valid OTP');
                        return;
                    }


                const res = await fetch('{{ route("v.otp") }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrf,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        request_quotation_id: quotationId,
                        otp
                    })
                });

                const text = await res.text();
                let data;

                try {
                    data = JSON.parse(text);
                } catch {
                    console.error('Invalid JSON from Verify OTP:', text);
                    alert('Server error. Check console.');
                    return;
                }

                if (!res.ok || data.status === 'error') {
                    alert(data.message || 'Invalid OTP');
                    return;
                }

                /* ✅ RESET STEP 1 UI (IMPORTANT) */
                document.getElementById('otpSection').classList.add('d-none');
                document.getElementById('generateOtpSection').classList.remove('d-none');

                /* Optional: lock mobile field so user can’t change after OTP */
                document.getElementById('phone').readOnly = true;
                step1Completed = true;
                showStep(2);

            } catch (err) {
                console.error('OTP verification failed:', err);
                alert('Server unreachable.');
            }
        });



        /* ================= STEP 2 : SAVE PROJECT DETAILS ================= */
       document.addEventListener('DOMContentLoaded', function () {

            const buildCards = document.querySelectorAll('#step2 .build-card');
            const projectTypeInput = document.getElementById('project_type');

            buildCards.forEach(card => {
                card.addEventListener('click', function () {

                    // Remove active from all cards
                    buildCards.forEach(c => c.classList.remove('active'));

                    // Activate clicked card
                    this.classList.add('active');

                    // Store selected project type
                    projectTypeInput.value = this.dataset.value;
                });
            });

            // Set default value if any card is already active
            const activeCard = document.querySelector('#step2 .build-card.active');
            if (activeCard) {
                projectTypeInput.value = activeCard.dataset.value;
            }
        });

            // Next button on Step 2
            const step2NextBtn = document.querySelector('#step2 .next-btn');
            if (step2NextBtn) {
                step2NextBtn.addEventListener('click', async function () {
                    if (!quotationId) {
                        alert('Quotation ID missing! Complete Step 1 first.');
                        return;
                    }

                    // Get selected project type
                    // const selectedCard = document.querySelector('#step2 .build-card.active');
                    // if (!selectedCard) {
                    //     alert('Please select a project type!');
                    //     return;
                    // }
                    // const projectType = selectedCard.querySelector('h6').innerText;

                    // Get selected project type (from hidden input)
                    const projectType = document.getElementById('project_type').value;

                    if (!projectType) {
                        alert('Please select a project type!');
                        return;
                    }

                    // Get location
                    const location = document.querySelector('#location').value.trim();
                    if (!location) {
                        alert('Please enter a location!');
                        return;
                    }

                    // Prepare payload
                    const payload = {
                        quotation_id: quotationId,
                        projectType: projectType,
                        location: location,
                        // Optional: add extra fields if present
                        area: document.querySelector('input[name="area"]')?.value || '',
                        material: document.querySelector('select[name="material"]')?.value || '',
                        steelType: document.querySelector('select[name="steelType"]')?.value || '',
                        color: document.querySelector('input[name="color"]')?.value || '',
                        desc: document.querySelector('textarea[name="desc"]')?.value || ''
                    };

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

                        const text = await res.text();
                        let data;
                        try {
                            data = JSON.parse(text);
                        } catch {
                            console.error('Invalid JSON from Step 2 save:', text);
                            alert('Server error. Check console.');
                            return;
                        }

                        if (!res.ok || data.status === 'error') {
                            alert(data.message || 'Error saving project details');
                            return;
                        }

                        // alert(data.message || 'Project details saved successfully!');
                        // Move to Step 3
                        step2Completed = true;  
                        showStep(3);

                    } catch (err) {
                        console.error('Step 2 save failed:', err);
                        alert('Server unreachable.');
                    }
                });
            }




        /* ================= STEP 3 : STORE STRUCTURE + ESTIMATE ================= */
        document.getElementById('calculateBtn').addEventListener('click', async () => {
            if (!quotationId) {
                alert('Quotation ID missing! Complete Step 1 & 2 first.');
                return;
            }

            const windSpeedValue = document.getElementById('wind_speed').value;
            console.log('Wind speed before save:', windSpeedValue);

            const payload = {
                quotation_id: quotationId,
                length: Number(length_m.value) || 0,
                width: Number(width_m.value) || 0,
                height: Number(clear_height_m.value) || 0,
                wind_speed: windSpeedValue ? Number(windSpeedValue) : 0,
                frame_type: frame_type.value,
                crane_required: Number(crane_required.value),
                roofing: roofing_system.value
            };

            try {
                /* ---- Store Structure ---- */
                const storeRes = await fetch('{{ route("quotation.structure.store") }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrf,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(payload)
                });

                const storeText = await storeRes.text();
                const storeData = JSON.parse(storeText);

                if (!storeRes.ok || storeData.status === 'error') {
                    alert(storeData.message || 'Error storing structure');
                    return;
                }

                /* ---- Generate Estimate ---- */
                const estRes = await fetch('{{ route("quotation.estimate") }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrf,
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ request_quotation_id: quotationId })
                });

                const estText = await estRes.text();
                const estData = JSON.parse(estText);

                if (!estRes.ok || estData.status === 'error') {
                    alert(estData.message || 'Error generating estimate');
                    return;
                }

                const cost =
                    estData.estimate_cost ??
                    estData.total_cost ??
                    estData.data?.estimate_cost ??
                    0;

                finalCost.innerText = '₹ ' + Number(cost).toLocaleString('en-IN');
                document.getElementById('costInWords').innerText = numberToWords(Number(cost));
                const thanksEl = document.getElementById('thanks');
                if (thanksEl) {
                    thanksEl.innerHTML = `
                                    Thank You!<br>
                                   Your Project Details Have Been Received
                                `;
                }
                step3Completed = true;
                showStep(4);



            } catch (err) {
                console.error('Estimate flow failed:', err);
                alert('Server unreachable.');
            }
        });
    </script>

    <script>
        document.querySelectorAll('.otp-input').forEach((input, index, inputs) => {

                input.addEventListener('input', () => {
                    // allow only one digit
                    input.value = input.value.replace(/\D/g, '').slice(0, 1);

                    // move to next input automatically
                    if (input.value && inputs[index + 1]) {
                        inputs[index + 1].focus();
                    }
                });

                input.addEventListener('keydown', (e) => {
                    // go back on backspace
                    if (e.key === 'Backspace' && !input.value && inputs[index - 1]) {
                        inputs[index - 1].focus();
                    }
                });
            });

    </script>
@endsection