@extends('layouts.store.master')
@section('page','Sucursales')
@section('classes_body','no-mg no-pd')
@section('body')
<style>
    .featuredBtn.active {
        background-color: #DA291C !important;
    }

    .featuredBtn {
        background-color: #0077C8 !important;
    }

    .featuredDiv.active {
        color: #DA291C !important;
    }

    .featuredDiv {
        color: #0077C8 !important;
    }
</style>
<section id="sucursales-section">
    <div class="breadcrums wow animate__animated animate__fadeInUp">
        Inicio / Sucursales
    </div>
    <div class="container-fluid p-5">
        <p class="text-center mb-5 wow animate__animated animate__fadeInUp">
            <span class="bold" style="color: #1e77c8; font-size: 18px;">Sucursales</span>
        </p>
        <div class="row">
            <div class="col-lg-4">
                <div class="row" id="div-address">

                </div>
            </div>

            <div class="col-lg-8 wow animate__animated animate__fadeInUp maps" id="place" >

            </div>
        </div>
    </div>
    <h5 class="section-title animate__animated animate__fadeInUp">Conoce nuestras marcas</h5>
    @include('layouts.store.brand_carousel')
   </section>
@endsection
@push('scripts')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" integrity="sha512-AA1Bzp5Q0K1KanKKmvN/4d3IRKVlv9PYgwFPvm32nPO6QS8yH1HO7LbgB1pgiOxPtfeg5zEn2ba64MUcqJx6CA==" crossorigin="anonymous"></script>
        <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script>
            /**
             * order by type
             * @author luis.pena@nuvem.mx
             * @created 2021-06-11
             * @param
             * @return void
             */
            function compare( a, b ) {
                if ( a.type < b.type ){
                   return -1;
                }
                if ( a.type > b.type ){
                   return 1;
                }
                  return 0;
            }


            /**
             * fill office
             * @author luis.pena@nuvem.mx
             * @created 2021-05-10
             * @updated 2021-06-11
             * @param
             * @return void
             */
            $.ajax({
                type: "GET",
                headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'},
                url: '{{ config('store.api_medshipper_url') . "v1/branches"}}',
                data: {
                  enterprising_id: {{ config('store.enterprising_id') }}
                },
                success: function (response) {
                    var flagfirst = 0 ;
                    var arraySort = response.data.sort( compare );
                    arraySort.forEach( function(valor, indice, array) {
                        let divString = '';
                        $('#div-address').append(`<div class="col-12 mt-5 wow animate__animated animate__fadeInUp">
                            <i class="featuredDiv fa fa-map-marker-alt" id="ic-suc-${valor.id}" style="color: #0077c8; float: left; font-size: 18px; margin-right: 10px;"></i>
                            <div>
                                <span id="name-suc-${valor.id}" style="color: #0077c8; letter-spacing: -1px;" class="featuredDiv bold d-block">${valor.type} | ${valor.name}</span>
                                <p style="font-size: 12px;">${valor.street_number}, ${valor.colony},<br /> ${valor.postal_code} ${valor.city}, ${valor.state}.</p>

                                <button id="suc-${valor.id}" style="font-size: 12px; color: white;" type="submit" class="btn featuredBtn blue px-5 py-2">
                                    Mapa
                                </button>
                            </div>
                        </div>`);

                        var addr = valor.street_number +" "+ valor.colony +" " + valor.city +" "+ valor.state;
                        let id_suc = "suc-" + valor.id;
                        let id_ic_suc = "ic-suc-" + valor.id;
                        let id_name_suc = "name-suc-" + valor.id;

                        document.getElementById(id_suc).addEventListener('click', function(){
                            $("button").removeClass("active");
                            $("i").removeClass("active");
                            $("span").removeClass("active");
                            $(this).addClass("active");
                            $("#"+id_ic_suc).addClass("active");
                            $("#"+id_name_suc).addClass("active");
                            var embed = `<iframe style='width: 100%; height: 100%; border:0;'
                            allowfullscreen=''
                            loading='lazy'
                            src='https://maps.google.com/maps?&amp;q=`+
                            encodeURIComponent( addr ) +
                            `&amp;output=embed'></iframe>`;

                            $('#place').html(embed);
                        });
                        if (flagfirst == 0) {
                            var embed = `<iframe style='width: 100%; height: 100%; border:0;'
                            allowfullscreen=''
                            loading='lazy'
                            src='https://maps.google.com/maps?&amp;q=`+
                            encodeURIComponent( addr ) +
                            `&amp;output=embed'></iframe>`;

                            $('#place').html(embed);
                            flagfirst = 1;
                        }
                    });
                }
            });
        </script>
        @include('layouts.store.scripts.menu-footer');
        <script type="text/javascript" src="{{asset('/js/slick.min.js')}}"></script>
        <script src="https://wowjs.uk/dist/wow.min.js"></script>
        <script>
         new WOW().init();
        </script>

    @endpush