@extends('layouts.admin')

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

@section('content')
<div class="container py-5">
    <h2 class="text-center mb-4">Request a Quotation</h2>

    {{-- STEP 1: Generate OTP --}}
    <div id="step1">
        <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="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>

<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 showStep(stepNumber) {
        [step1, step2, step3, step4].forEach((step, index) => {
            step.style.display = (index + 1 === stepNumber) ? 'block' : 'none';
        });
    }

    // 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();

        if (!name || !email || !phone) {
            alert('Please fill all fields.');
            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 () => {
        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'
                },
                body: JSON.stringify(payload)
            });

            const data = await res.json();
            if (data.status === 'success') {
                showStep(4);
            } else {
                alert('Error saving project details.');
            }
        } catch (err) {
            console.error(err);
            alert('Something went wrong while saving details.');
        }
    });
});
</script>
@endsection