{{-- {{ dd($markers) }} --}}

@extends('layouts.master-new')
@section('content')
    <div class="container bg-secundary" style="margin-top: 80px;">
        <div class="columns">
            <div class="col-12 col-mx-auto text-center p-centered pb-5">
                <ul class="tab tab-block tab-sp" id="tabs">
                    @foreach ($categories as $cat)                        
                        <li id="mylink" class="tab-item {{ $cat->id == $category ? 'active' : '' }} d-ib text-tertiary text-white" id="tabs">
                            <a href="/categories/{{ $cat->name }}/all" class="pb-10">
                                <img id="{{ 'cat-' . $cat->id }}" src="/" style="width: 50px; display:block; margin: 10px auto 0px;" data-cat="{{ $cat->id }}">
                                {{-- <div class="icon-cat"><i class="{{ $cat->icon }}"></i></div> --}}
                                <div class="fs-20 fw-600 p-10 pt-5 pb-0 text-tertiary text-white" style="display: flex; flex-direction: row; align-items: center;">
                                    <p class="fs-12 text-light mb-0">{{ $cat->name }}</p>
                                </div>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    <div class="container pr-0">
        <div class="columns">
            <div class="column col-6 col-md-12 p-0" style="height:89vh; overflow:hidden; overflow-y:scroll;">
                <div id="sub-categories" class="col-12">
                    <div class="column pt-10" style="display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap;">
                        <div class="form-group" style="margin: 0">
                            <label class="form-label mr-5 pb-0 pt-2">Categorías: </label>
                            <select class="form-select select-sm" id="categories" style="width: 130px;">
                                <option value="all" {{ $category == 'all' ? 'selected' : '' }}>Todas</option>
                                @foreach ($categories as $item)
                                    <option value="{{ $item->id }}" {{ $category == $item->id ? 'selected' : '' }}>{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group" style="margin: 0">
                            <label class="form-label pb-0 pt-2">Subcategorías: </label>
                            <select class="form-select select-sm" id="subCategories" style="width: 130px;">
                                <option value="all" {{ $subCategory == 'all' ? 'selected' : '' }}>Todas</option>
                                @foreach ($subCategories as $item)
                                    <option value="{{ $item->id }}" {{ $subCategory == $item->id ? 'selected' : '' }}>{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="container pt-20" style="background-color:#f3f3f3;">
                    <div class="columns">
                        @if(count($partners) > 0)                    
                            @foreach ($partners as $partner)
                                <div class="column col-md-12 col-lg-6 col-4">
                                    @component('partials.partner-card',[
                                        'id' => $partner->id,
                                        'cover' => isset($partner->banner) ? $partner->banner : '',
                                        'logo' => isset($partner->logo) ? $partner->logo : '',
                                        'title' => isset($partner->name) ? $partner->name : '',
                                        'subtitle' => isset($partner->description) ? $partner->description : '',
                                        'url' => '/partner/'. $partner->name,
                                        'category' => '',
                                        ])
                                    @endcomponent
                                </div>
                            @endforeach
                        @else
                            <div class="empty" style="width: 80%; margin: auto;">
                                <div class="empty-icon">
                                  <i class="icon icon-3x icon-photo"></i>
                                </div>
                                <p class="empty-title h5">No existen convenios para esta subcategoria.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
            <div class="column col-6 col-md-12 pl-0">
                @component('partials.g-map',[
                    'divHeight'=>'89vh',
                    'map'=>[ 'center'=>$cityPosition, 'zoom'=>11 ],
                    'markers'=> $markers,
                    'data' => [
                        'categories' => $categories,
                        'cities' => $cities,
                        'slug' => $slug,
                        {{--  'category' => $category,  --}}
                    ],
                ])@endcomponent
            </div>
        </div>
    </div>
    <style>.download-app-div, .footer { display: none; } #map { border-top: none; }</style>
    <script>

        $(document).ready(function(){
            images();
        });

        $('#categories').change(function(){
            var url = window.location.href;
            urlData = url.split('/');
            urlData[4] = $(this).children("option:selected").text();
            urlData[urlData.length - 1] = 'all';
            newUrl = urlData.join('/');
            window.location.href = newUrl;
        });

        $('#subCategories').change(function(){
            var url = window.location.href;
            urlData = url.split('/');
            urlData[urlData.length - 1] = $(this).children("option:selected").text();
            newUrl = urlData.join('/');
            window.location.href = newUrl;
        });

        var images = function(){

            var aImages = $('.tab').find('img');
    
            $.each( aImages, function( key, value ) {
    
                var category = $(this).attr('data-cat');
                var url = 'https://v2.yekoclub.com/cms/public/categories/icon?category=' + category + '&domain=' + '{{ $account }}';
                
                $.get(url, {account: "{{ $account }}", category: category}, function(response){
                    
                    $('#cat-' + category).attr('src', response.file);
                }).fail(function(err){
                    console.log(err);
                });
    
            });
        }

    </script>
@endsection