@extends('layouts.sales.sales') {{-- Change this to your actual sales/admin layout --}}

@section('page-title', 'Add New Lead & Estimate')

@section('content')

    <style>
        .req-qt {
            background: transparent;
            font-family: Inter, sans-serif;
        }

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

        .steps {
            background: #fff;
            padding: 25px;
            min-height: 100%;
            border-right: 1px solid #f0f0f0;
        }

        .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: var(--theme-color1, #ff7a00);
            color: #fff;
            font-weight: 600;
        }

        .next-btn:hover {
            background: #fff;
            color: var(--theme-color1, #ff7a00);
            border: 1px solid var(--theme-color1, #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);
        }

        .build-card.active {
            border-color: var(--theme-color1, #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;
        }

        .dt-location {
            background: var(--theme-color1, #ff7a00);
            color: #fff;
            font-weight: 600;
        }

        .dt-location:hover {
            background: #fff;
            color: var(--theme-color1, #ff7a00);
            border: 1px solid var(--theme-color1, #ff7a00);
        }
    </style>

    <div class="container-fluid py-4">
        <div class="d-flex justify-content-between mb-4">
            <h4 class="fw-bold m-0">Create New Lead & Estimate</h4>
        </div>

        <section class="req-qt">
            <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> Client 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 : CLIENT INFO (No OTP) ================= --}}
                            <div class="tab-pane show active" id="step1">
                                <h4 class="mb-3">Client Details</h4>
                                <p class="text-muted">Enter lead details directly to start an estimate.</p>

                                <div class="mb-3">
                                    <label>Client Name <span class="text-danger">*</span></label>
                                    <input id="name" name="name" class="form-control" placeholder="Enter Name">
                                </div>

                                <div class="mb-3">
                                    <label>Client Email</label>
                                    <input id="email" name="email" type="email" class="form-control"
                                        placeholder="Enter Email">
                                </div>

                                <div class="mb-3">
                                    <label>Company Name</label>
                                    <input id="title" name="title" class="form-control" placeholder="Company Name">
                                </div>

                                <div class="mb-4">
                                    <label>Mobile Number <span class="text-danger">*</span></label>
                                    <div class="row g-2">
                                        <div class="col-3 col-md-2">
                                            <select class="form-select">
                                                <option>+91</option>
                                                <option>+1</option>
                                            </select>
                                        </div>
                                        <div class="col-9 col-md-10">
                                            <input type="tel" class="form-control" id="phone" name="phone"
                                                placeholder="Mobile Number">
                                        </div>
                                    </div>
                                </div>

                                <button type="button" id="saveClientBtn" class="btn next-btn w-100 mt-2">
                                    Save Client & Continue →
                                </button>
                            </div>

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

                                <!-- CAROUSEL WRAPPER : Removed flex-wrap to fix design -->
                                    <div class="p-type owl-carousel mb-3">
                                        @foreach($projectTypes as $index => $type)
                                            <div class="build-card {{ $loop->first ? 'active' : '' }}" style="width: 200px;" data-value="{{ $type->name }}">
                                                <img src="{{ $images[$index] ?? asset('assets/images/placeholder.jpg') }}" alt="{{ $type->name }}">
                                                <h6>{{ $type->name }}</h6>
                                            </div>
                                        @endforeach
                                    </div>

                                    <hr>
                                    <h5 class="mb-3">Location</h5>
                                    <div class="mb-4 position-relative">
                                        <input type="text" class="form-control mb-2" id="location" name="location"
                                            placeholder="Enter location or detect current location...">
                                        <input type="hidden" id="state_code" name="state_code" value="DL">
                                        <button type="button" class="btn dt-location mb-sm-0 mb-2"
                                            onclick="detectLocationAndWind()">
                                            Detect Location
                                        </button>
                                    </div>

                                    <div class="d-flex justify-content-between">
                                        <button type="button" class="btn btn-outline-secondary" onclick="goBack(1)">
                                            ← Back
                                        </button>
                                        <button type="button" id="saveProjectBtn" class="btn next-btn">
                                            Next → Size & Dimensions
                                        </button>
                                    </div>
                                </div>

                                {{-- ================= STEP 3: SIZE & DIMENSIONS ================= --}}
                                <div id="step3" class="d-none">
                                    <h4 class="mb-4 text-center">Size & Dimensions</h4>

                                    <div class="row bg-white rounded p-3 border">
                                        <!-- ===== 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 fw-bold text-primary" id="lengthValue">0 m</span>
                                                </label>
                                                <input type="range" class="form-range" min="1" max="1000" value="0"
                                                    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 fw-bold text-primary" id="widthValue">0 m</span>
                                                </label>
                                                <input type="range" class="form-range" min="1" max="1000" value="0"
                                                    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 fw-bold text-primary" id="heightValue">0 m</span>
                                                </label>
                                                <input type="range" class="form-range" min="1" max="1000" value="0"
                                                    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 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>

                                    <div class="d-flex justify-content-between mt-4">
                                        <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>
                                </div>

                                {{-- ================= STEP 4: COST SUMMARY ================= --}}
                                <div id="step4" class="d-none text-center py-5">
                                    <h4 class="text-success mb-3">Estimated Cost</h4>
                                    <h2 id="finalCost" class="fw-bold display-4">₹ 0</h2>
                                    <h4 id="finalCostUSD" class="fw-semibold text-muted"></h4>
                                    <p id="costInWords" class="fw-normal text-muted mb-4"></p>

                                    <h4 id="thanks" class="text-primary mb-2"></h4>
                                    <p>Note: Final cost may vary based on site inspection and material selection.</p>

                                    <a href="{{ route('sales.dashboard') }}" class="btn btn-outline-secondary mt-4">
                                        Back to Dashboard
                                    </a>
                                </div>

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

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

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

        <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);
            }

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

                    if (targetStep < currentStep) {
                        showStep(targetStep);
                        return;
                    }

                    if (targetStep > 1 && !step1Completed) return alert('Please complete Step 1 first');
                    if (targetStep > 2 && !step2Completed) return alert('Please complete Step 2 first');
                    if (targetStep > 3 && !step3Completed) return alert('Please complete Step 3 first');

                    showStep(targetStep);
                });
            });

            /* ================= STEP 1 : SAVE CLIENT ================= */
            document.getElementById('saveClientBtn').addEventListener('click', async () => {
                const name = document.getElementById('name').value.trim();
                const phone = document.getElementById('phone').value.trim();

                if (!name || !phone) {
                    alert("Name and Mobile Number are required.");
                    return;
                }

                try {
                    const payload = {
                        name: name,
                        email: document.getElementById('email').value,
                        title: document.getElementById('title').value,
                        phone: phone
                    };

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

                    const data = await res.json();

                    if (!res.ok || data.status === 'error') {
                        alert(data.message || 'Error saving client. Please check fields.');
                        return;
                    }

                    quotationId = data.quotation_id;
                    step1Completed = true;
                    showStep(2); // Automatically goes to step 2

                } catch (err) {
                    console.error(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 () {
                        buildCards.forEach(c => c.classList.remove('active'));
                        this.classList.add('active');
                        projectTypeInput.value = this.dataset.value;
                    });
                });

                const activeCard = document.querySelector('#step2 .build-card.active');
                if (activeCard) projectTypeInput.value = activeCard.dataset.value;
            });

            document.getElementById('saveProjectBtn').addEventListener('click', async function () {
                if (!quotationId) return alert('Quotation ID missing! Complete Step 1 first.');

                const projectType = document.getElementById('project_type').value;
                const location = document.getElementById('location').value.trim();
                const stateCode = document.getElementById('state_code').value;

                if (!projectType) return alert('Please select a project type!');
                if (!location) return alert('Please enter a location!');

                const payload = {
                    quotation_id: quotationId,
                    projectType: projectType,
                    location: location,
                    state_code: stateCode
                };

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

                    const data = await res.json();

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

                    step2Completed = true;
                    showStep(3); // Successfully moves to step 3

                } catch (err) {
                    console.error(err);
                    alert('Server unreachable.');
                }
            });

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

                if (!document.getElementById('frame_type').value) {
                    return alert('Please select a Frame Type.');
                }

                const payload = {
                    quotation_id: quotationId,
                    length: Number(document.getElementById('length_m').value) || 0,
                    width: Number(document.getElementById('width_m').value) || 0,
                    height: Number(document.getElementById('clear_height_m').value) || 0,
                    wind_speed: Number(document.getElementById('wind_speed').value) || 0,
                    frame_type: document.getElementById('frame_type').value,
                    crane_required: Number(document.getElementById('crane_required').value),
                    roofing: document.getElementById('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 storeData = await storeRes.json();
                    if (!storeRes.ok || storeData.status === 'error') return alert(storeData.message || 'Error storing structure');

                    /* ---- 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 estData = await estRes.json();
                    if (!estRes.ok || estData.status === 'error') return alert(estData.message || 'Error generating estimate');

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

                    /* ---- Save Final Cost ---- */
                    const saveRes = await fetch('{{ route("quotation.estimate_cost.save") }}', {
                        method: 'POST',
                        headers: { 'X-CSRF-TOKEN': csrf, 'Content-Type': 'application/json' },
                        body: JSON.stringify({ quotation_id: quotationId, estimation_cost: Number(cost) || 0 })
                    });
                    const saveData = await saveRes.json();
                    if (!saveRes.ok || saveData.status === 'error') return alert(saveData.message || 'Error saving estimation cost');

                    /* ---- Show Results ---- */
                    const exchangeRate = 94.30;
                    const costINR = Number(cost);
                    const costUSD = costINR / exchangeRate;

                    document.getElementById('finalCost').innerText = '₹ ' + costINR.toLocaleString('en-IN');
                    document.getElementById('finalCostUSD').innerText = '$ ' + costUSD.toLocaleString('en-US', { maximumFractionDigits: 2 });
                    document.getElementById('costInWords').innerText = numberToWords(costINR);

                    document.getElementById('thanks').innerHTML = 'Lead & Estimate Saved Successfully!';

                    step3Completed = true;
                    showStep(4);

                } catch (err) {
                    console.error(err);
                    alert('Server unreachable or calculation error.');
                }
            });
        </script>

        <!-- ================= GOOGLE MAPS & CAROUSEL INITIALIZATION ================= -->
       <!-- ================= GOOGLE MAPS & LOCATION API ================= -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBE1vb20p5RWGMu4boFq9ldbC_9mdS4VVE&libraries=places&callback=initAutocomplete" async defer></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // --- Initialize Owl Carousel ---
            if (typeof $ !== 'undefined' && $.fn.owlCarousel) {
                $('.p-type.owl-carousel').owlCarousel({
                    margin: 15,
                    nav: false,
                    dots: false,
                    autoWidth: true, 
                    items: 4,
                    responsive: {
                        0: { items: 2 },
                        600: { items: 3 },
                        1000: { items: 4 }
                    }
                });
            }
        });

        function initAutocomplete() {
            const locationInput = document.getElementById("location");

            if (!locationInput) {
                console.error("Location input not found");
                return;
            }

            const autocomplete = new google.maps.places.Autocomplete(locationInput, {
                types: ['geocode'],
                componentRestrictions: { country: "in" }
            });

            autocomplete.addListener("place_changed", function () {
                const place = autocomplete.getPlace();

                if (!place.geometry) {
                    console.log("No place details");
                    return;
                }

                let stateCode = "";
                let stateName = "";

                if (place.address_components) {
                    place.address_components.forEach(component => {
                        if (component.types.includes("administrative_area_level_1")) {
                            stateCode = component.short_name;  // e.g. UP
                            stateName = component.long_name;   // e.g. Uttar Pradesh
                        }
                    });
                }

                // Save state code to hidden input
                const stateInput = document.getElementById("state_code");
                if (stateInput) {
                    stateInput.value = stateCode;
                }
            });
        }
    </script>

    <script>
        async function detectLocationAndWind() {
            const locationInput = document.getElementById('location');
            const windInput = document.getElementById('wind_speed');

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(async function(position) {
                    const lat = position.coords.latitude;
                    const lng = position.coords.longitude;

                    // Get human-readable address using Google Geocoder
                    const geocoder = new google.maps.Geocoder();
                    const latlng = { lat: lat, lng: lng };

                    geocoder.geocode({ location: latlng }, async function(results, status) {
                        if (status === "OK" && results[0]) {
                            locationInput.value = results[0].formatted_address;

                            let state = "";
                            let stateCode = "";

                            let stateComponent = results[0].address_components.find(c =>
                                c.types.includes("administrative_area_level_1")
                            );

                            if (stateComponent) {
                                state = stateComponent.long_name;
                                stateCode = stateComponent.short_name;
                                document.getElementById("state_code").value = stateCode;
                            } else {
                                console.warn("State not detected");
                            }

                            console.log("Detected State:", state);
                            console.log("State Code:", stateCode);

                            // set hidden input value
                            document.getElementById("state_code").value = stateCode;

                            // Fetch wind speed using coordinates (OpenWeatherMap)
                            const apiKey = "c0ea158be5e83b13f6a4e2c0df7d3852"; // Your key
                            const weatherUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&units=metric&appid=${apiKey}`;

                            try {
                                const response = await fetch(weatherUrl);
                                const data = await response.json();

                                if (data.wind && data.wind.speed !== undefined) {
                                    // Convert m/s to km/h
                                    const windKmph = (data.wind.speed * 3.6).toFixed(1);
                                    console.log("Wind speed (km/h):", windKmph);

                                    if(windInput) {
                                        // Auto select the closest wind speed option in the dropdown
                                        let windOptions = [140, 170, 180, 200];
                                        let closest = windOptions.reduce((prev, curr) => 
                                            Math.abs(curr - windKmph) < Math.abs(prev - windKmph) ? curr : prev
                                        );
                                        windInput.value = closest;
                                    }
                                }
                            } catch (err) {
                                console.error("Error fetching wind data:", err);
                            }

                        } else {
                            locationInput.value = "Location not found";
                            console.error("Geocoder failed: " + status);
                        }
                    });

                }, function(error) {
                    locationInput.value = "Geolocation not allowed";
                    console.error("Error getting location:", error);
                });
            } else {
                locationInput.value = "Geolocation not supported";
            }
        }
    </script>
@endsection