@extends('layout.app')
@push('css')
    <link rel="stylesheet" href="https://unpkg.com/iv-viewer/dist/iv-viewer.css">
    <style>
        span.msg,
        span.choose {
            color: #555;
            padding: 5px 0 10px;
            display: inherit
        }

        .container {
            width: 500px;
            margin: 50px auto 0;
            text-align: center
        }

        /*Styling Selectbox*/
        .dropdown {
            width: 300px;
            display: inline-block;
            background-color: #fff;
            border-radius: 2px;
            box-shadow: 0 0 2px rgb(204, 204, 204);
            transition: all .5s ease;
            position: relative;
            font-size: 14px;
            color: #474747;
            height: 100%;
            text-align: left
        }

        .dropdown .select {
            cursor: pointer;
            display: block;
            padding: 10px
        }

        .dropdown .select > i {
            font-size: 13px;
            color: #888;
            cursor: pointer;
            transition: all .3s ease-in-out;
            float: right;
            line-height: 20px
        }

        .dropdown:hover {
            box-shadow: 0 0 4px rgb(204, 204, 204)
        }

        .dropdown:active {
            background-color: #f8f8f8
        }

        .dropdown.active:hover,
        .dropdown.active {
            box-shadow: 0 0 4px rgb(204, 204, 204);
            border-radius: 2px 2px 0 0;
            background-color: #f8f8f8
        }

        .dropdown.active .select > i {
            transform: rotate(-90deg)
        }

        .dropdown .dropdown-menu {
            position: absolute;
            background-color: #fff;
            width: 100%;
            left: 0;
            margin-top: 1px;
            box-shadow: 0 1px 2px rgb(204, 204, 204);
            border-radius: 0 1px 2px 2px;
            overflow: hidden;
            display: none;
            max-height: 144px;
            overflow-y: auto;
            z-index: 9
        }

        .dropdown .dropdown-menu li {
            padding: 10px;
            transition: all .2s ease-in-out;
            cursor: pointer
        }

        .dropdown .dropdown-menu {
            padding: 0;
            list-style: none
        }

        .dropdown .dropdown-menu li:hover {
            background-color: #f2f2f2
        }

        .dropdown .dropdown-menu li:active {
            background-color: #e2e2e2
        }

        .filter-options {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }
    </style>

@endpush

@section('content')

    <section class="section-wrapper mb-0">
        <div class="content-wrapper">
            <div class="map-wrapper">
                <div id="map" class="map-container iv-container">
                    <div class="iv-wrap">
                        <div
                            class="iv-snap-view"
                            style="opacity: 0; pointer-events: none"
                        >
                            <div class="iv-snap-image-wrap">
                                <img
                                    class="iv-snap-image"
                                    src="https://cdn.prod.website-files.com/6572df803243003bb3638e4e/666acb4fc4c002f7ca3baa6b_TB%20Store%20Locator%202441x1328px_ENG.jpg"
                                    style="width: 150px; height: 81.6993px"
                                />
                                <div
                                    class="iv-snap-handle"
                                    style="
                      top: 0.808904px;
                      left: -66.8155px;
                      width: 282.146px;
                      height: 80.8904px;
                    "
                                ></div>
                            </div>
                            <div class="iv-zoom-actions iv-zoom-actions--has-buttons">
                                <div class="iv-button-zoom--in" role="button"></div>
                                <div class="iv-zoom-slider">
                                    <div class="iv-zoom-handle" style="left: 0.117143px"></div>
                                </div>
                                <div class="iv-button-zoom--out" role="button"></div>
                            </div>
                        </div>
                        <div class="iv-image-view">
                            <div class="iv-image-wrap">
                                <img
                                    class="iv-image iv-small-image"
                                    src="https://cdn.prod.website-files.com/6572df803243003bb3638e4e/666acb4fc4c002f7ca3baa6b_TB%20Store%20Locator%202441x1328px_ENG.jpg"
                                    style="
                      visibility: visible;
                      width: 927.18px;
                      height: 505px;
                      left: 413px;
                      top: -5px;
                      max-width: none;
                      max-height: none;
                    "
                                />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="map-controls">
                    <a id="zoomin" href="#" class="map-icons zoom w-inline-block"
                    ><img
                            src="https://cdn.prod.website-files.com/6572df803243003bb3638e4e/6572df803243003bb363902c_Plus.svg"
                            loading="lazy"
                            width="24"
                            height="24"
                            alt="zoom-in"
                            class="map-icon-image"/></a
                    ><a id="zoomout" href="#" class="map-icons zoom w-inline-block"
                    ><img
                            src="https://cdn.prod.website-files.com/6572df803243003bb3638e4e/6572df803243003bb363902e_Remove.svg"
                            loading="lazy"
                            width="24"
                            height="24"
                            alt="zoom-out"
                            class="map-icon-image"/></a
                    ><a id="reset" href="#" class="map-icons reset w-inline-block"
                    ><img
                            src="https://cdn.prod.website-files.com/6572df803243003bb3638e4e/6572df803243003bb3639025_Reload.svg"
                            loading="lazy"
                            width="24"
                            height="24"
                            alt="reset"
                            class="map-icon-image"
                        /></a>
                </div>
            </div>
        </div>
    </section>

    <section class="section-wrapper">
        <div class="content-wrapper narrow-content-wrapper">
            <div class="filter-options">
                <div class="">
                    <span class="choose">{{ __("messages.category") }}</span>
                    <div class="dropdown">
                        <div class="select">
                            <span>Select Category</span>
                            <i class="fa fa-chevron-left"></i>
                        </div>
                        <input type="hidden" name="gender">
                        <ul class="dropdown-menu category-menu">
                            <li id="0">Show All</li>
                            @foreach($categories as $category)
                                <li id="{{ $category->id }}">{{ $category->name_en }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                <div>
                    <span class="choose">{{ __("messages.sub_category") }}</span>
                    <div class="dropdown">
                        <div class="select">
                            <span>Select Sub Category</span>
                            <i class="fa fa-chevron-left"></i>
                        </div>
                        <input type="hidden" name="gender">
                        <ul class="dropdown-menu">
                            <li id="0">Show All</li>
                            @foreach($subCategories as $subCategory)
                                <li id="{{ $subCategory->id }}">{{ $subCategory->name_en }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                <div>
                    <label>{{ __("messages.name") }}</label>
                    <input type="text" name="name" class="form-input-3 store-name-search">
                </div>
            </div>
            <hr/>
            <div class="jetboost-list-wrapper-26bp jetboost-list-wrapper-2wx1 jetboost-list-wrapper-peyv w-dyn-list"
                 style="margin-top: 25px">

                <div role="list" id="stores-container" class="outlet-items-list store-locator-list w-dyn-items">
                    @foreach ($stores as $store)
                        <div
                            data-title="{{ $store->name}}"
                            role="listitem"
                            class="outlet-item w-dyn-item">
                            <div id="w-node-ceff18c2-b37a-a032-1611-f246cc550839-76a54b8e"
                                 class="store-locator-item-wrapper">
                                <div class="store-locator-title">{{ $store->name}}</div>
                                <address class="store-locator-divider"></address>
                                <div class="store-locator-number">{{ $store->number}}</div>
                            </div>

                            <div id="w-node-c27a2182-d6dc-47db-05f4-62eeaa7c17af-76a54b8e"
                                 class="w-embed">
                                <input type="hidden"
                                       class="jetboost-list-item"
                                       value="{{ $store->name}}"/>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div
                    role="navigation"
                    aria-label="List"
                    class="w-pagination-wrapper pagination"
                ></div>
            </div>
        </div>
    </section>
@endsection

@push('js')
    <script src="https://unpkg.com/iv-viewer/dist/iv-viewer.js"></script>
    <script>
        //MAP VIEWER
        const container = document.querySelector("#map");
        const viewer = new ImageViewer(container, {
            maxZoom: 800,
            zoomValue: 100,
            snapView: false,
            zoomOnMouseWheel: true,
            hasZoomButtons: true,
            zoomStep: 100
        });

        var language = document.documentElement.getAttribute('lang');

        if (language === 'ar') {
            viewer.load(
                "https://cdn.prod.website-files.com/6572df803243003bb3638e4e/666acb4f96bccc10829e0f31_TB%20Store%20Locator%202441x1328px_ARA.jpg"
            );
            //console.log("ar lang");
        } else {
            viewer.load(
                "https://cdn.prod.website-files.com/6572df803243003bb3638e4e/666acb4fc4c002f7ca3baa6b_TB%20Store%20Locator%202441x1328px_ENG.jpg"
            );
            //console.log("other lang");
        }

        var defaultZoom = 100,
            zoom = defaultZoom,
            zoomIncrement = 100,
            maxZoom = 800;

        jQuery(".zoom").click(function () {
            var $ = jQuery;
            if ($(this).attr("id") === "zoomin") {
                if (zoom === maxZoom) {
                    //console.log("zoomin");
                    return false;
                }
                zoom += zoomIncrement;
                viewer.zoom(zoom);
            }
            if ($(this).attr("id") === "zoomout") {
                if (zoom === defaultZoom) {
                    //console.log("zoomout");
                    return false;
                }
                zoom -= zoomIncrement;
                //console.log(zoom);
                viewer.zoom(zoom);
            }
            //console.log(zoom);
        });
        jQuery(".reset").click(function () {
            viewer.resetZoom();
            zoom = defaultZoom;
        });

    </script>

    <script>
        $(document).ready(function () {
            /*Dropdown Menu*/
            $('.dropdown').click(function () {
                $(this).attr('tabindex', 1).focus();
                $(this).toggleClass('active');
                $(this).find('.dropdown-menu').slideToggle(300);
            });
            $('.dropdown').focusout(function () {
                $(this).removeClass('active');
                $(this).find('.dropdown-menu').slideUp(300);
            });
            $('.dropdown .dropdown-menu li').click(function () {
                $(this).parents('.dropdown').find('span').text($(this).text());
                $(this).parents('.dropdown').find('input').attr('value', $(this).attr('id'));
            });
            /*End Dropdown Menu*/

            let categoryId = 0;
            let name = '';
            $('.dropdown-menu li').click(async function () {
                categoryId = $(this).parents('.dropdown').find('input').val(),
                await fetchStores(categoryId, name)
            });

            $('.store-name-search').on('keyup', async function () {
                console.log('i work')
                name = $(this).val();
                await fetchStores(categoryId, name)
            })
        })

        function fetchStores(categoryId, name = null) {
            console.log(categoryId, name)
            $.ajax({
                url: '{{ route('get-filter-store-locator') }}', // Replace with your actual route
                type: 'GET',
                dataType: 'json',
                data: {category_id: categoryId, name: name}, // Send category ID as data
                success: function (response) {
                    if (response.success) {
                        var storesHtml = ''; // Initialize empty string for stores HTML

                        $.each(response.data, function (index, store) {
                            // Generate HTML for each store based on your store data structure
                            storesHtml += `
                            <div
                                data-title="${store.name}"
                                role="listitem"
                                class="outlet-item w-dyn-item">
                                <div id="w-node-ceff18c2-b37a-a032-1611-f246cc550839-76a54b8e"
                                    class="store-locator-item-wrapper">
                                    <div class="store-locator-title">${store.name}</div>
                                    <address class="store-locator-divider"></address>
                                    <div class="store-locator-number">${store.number}</div>
                                </div>

                                <div id="w-node-c27a2182-d6dc-47db-05f4-62eeaa7c17af-76a54b8e"
                                    class="w-embed">
                                    <input type="hidden"
                                        class="jetboost-list-item"
                                        value="${store.name}" />
                                </div>
                            </div>
                        `;
                        });

                        $('#stores-container').html(storesHtml); // Replace existing store HTML
                    } else {
                        console.error('Error fetching stores:', response.message); // Handle errors
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.error('AJAX error:', textStatus, errorThrown); // Handle AJAX errors
                }
            });
        }
    </script>
@endpush