@extends('frontend.layouts.master')

@section('page_title')
    {{ __('business.title') }}
@endsection

@section('head')
@endsection

@section('content-wrapper')
    @if(view()->exists('tenants.' . $currentCompany->code . '.frontend.business.portada' ))

        @include('tenants.' . $currentCompany->code . '.frontend.business.portada')
   
    @else

        <div class="py-5 text-center align-items-center d-flex portada jarallax" style="">
            <div class="tinte2"></div>
            <div class="container py-5">
                <div class="row text-center">
                    <div class="col-lg-12 col-md-12 col-12 col-sm-12">
                        <h1 class="display-4 mb-4 text-white">
                            {{ __('business.title') }}
                        </h1>
                    </div>
                </div>
            </div>
        </div>
        
    @endif
    

    {{--<div class="card w-100">
        <div class="card-body">
            <iframe src="{{ route('frontend.business.map-sellers') }}" frameborder="0" width="100%" height="400px"></iframe>
        </div>
    </div>--}}

    <section id="buscador" class="py-5">
        <div class="container">
            <form action="" method="GET" id="filter">

                <div class="row">
                    <div class="col-lg-4 col-md-6 col-12">
                        <div class="form-group">
                            <label for="name">{{ __('business.by-name') }}</label>
                            <input type="text" name="name" class="form-control"
                                placeholder="{{ __('business.form.name') }}" id="name" value="{{ request('name') }}">
                        </div>
                    </div>

                    @if($currentCompany->code == 'bonobonitopalma')
                    <div class="col-lg-2 col-md-6 col-12">
                        <div class="form-group">
                            <label for="name">Municipio</label>
                            <select class="form-control" id="city" name="city">
                                <option value="">Todos</option>
                                @foreach($cities as $city)
                                <option value="{{ $city }}" {{ (request('city') == $city) ? 'selected' : '' }}>{{ $city }}</option> 
                                @endforeach
                            </select>
                        </div>
                    </div>
                    @endif

                    <div class="col-lg-3 col-md-6 col-12">
                        <div class="form-group">
                            <label for="category">{{ __('business.form.category') }}</label>
                            <select class="form-control" id="tipology" onchange="changeCategory()" name="category">
                                <option value="">{{ __('business.form.all-categories') }}</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 col-12">
                        <div class="form-group">
                            <label for="subcategory">{{ __('business.form.subcategory') }}</label>
                            <select class="form-control" id="subtipology" name="subcategory">

                            </select>
                        </div>
                    </div>

                    <div class="col-12 col-md-6 col-lg-2 ">
                        <div class="form-group">
                            <label for="submit mb-0"></label>
                            <button type="submit" class="site-btn link wow bounceInUp">
                                <i class="fa fa-search" aria-hidden="true"></i> {{ __('business.btn-search') }}
                            </button>
                        </div>
                    </div>
                </div>

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

    <div class="section py-5 bg-light">
        <div class="container">
            <div class="row">
                @foreach ($sellers as $seller)
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-2 mb-md-5">
                        <div class="card rounded border-light shadow-sm">
                            
                            @include('frontend.business.logo')

                            <div class="card-body text-center">

                                <a class="card-title title-seller" href="{{ route('frontend.business.details', $seller['idBotiga']) }}" title="{{ $seller['nom'] }}">
                                    {{ $seller['nom'] }}
                                </a>

                                <p class="card-title vals_disponibles mt-2">{{ __('business.disponible-bonus') }} {{ $seller['vals_disponibles'] }}</p>
                                
                                @if(isset($seller['nomSector']) && $seller['nomSector'] != '')

                                <p class="seller-category-card"><a href="?category={{ $seller['sector'] }}">{{ $seller['nomSector'] }}</a></p>

                                @endif

                                @if(isset($seller['nomSubsector']) && $seller['nomSubsector'] != '')

                                <p class="seller-category-card"><a href="?subcategory={{ $seller['subsector'] }}">{{ $seller['nomSubsector'] }}</a></p>

                                @endif
                                
                                
                                <p class="text-small-p-address">{{ $seller['adresa'] }}</p>
                                
                            </div>
                        </div>
                    </div>
                @endforeach

                @if(!count($sellers))
                <div class="col-12">
                    <div class="alert alert-info">{{ __('business.not-results') }}</div>
                </div>
                @endif
            </div>

            @if(count($sellers) && $itemsPages > 24)
            <div class="row text-center">
                <nav class="m-auto" aria-label="Page navigation example">

                    @php

                    $currentPage = request('page') ?? 1;

                    if($currentPage < 1){
                        $currentPage = 1;
                    }

                    @endphp

                    <ul class="pagination">
                        @if($currentPage > 1)
                        <li class="page-item"><a class="page-link" href="{{ route('frontend.business.index') }}?name={{ request('name') }}&category={{ request('category') }}&subcategory={{ request('subcategory') }}&page={{ $currentPage - 1  }}">{!! __('pagination.previous') !!}</a></li>
                        @endif

                        @for($i = 1; $i <= ceil($itemsPages / 24); $i++)
                            @if($i == $currentPage)
                            <li class="page-item active"><a class="page-link" href="{{ route('frontend.business.index') }}?name={{ request('name') }}&category={{ request('category') }}&subcategory={{ request('subcategory') }}&page={{ $i  }}">{{ $i }}</a></li>
                            @else
                            <li class="page-item"><a class="page-link" href="{{ route('frontend.business.index') }}?name={{ request('name') }}&category={{ request('category') }}&subcategory={{ request('subcategory') }}&page={{ $i  }}">{{ $i }}</a></li>
                            @endif
                        @endfor
                        @if($currentPage <= ceil($itemsPages / 24) - 1)
                        <li class="page-item"><a class="page-link" href="{{ route('frontend.business.index') }}?name={{ request('name') }}&category={{ request('category') }}&subcategory={{ request('subcategory') }}&page={{ $currentPage + 1  }}">{!! __('pagination.next') !!}</a></li>
                        @endif
                    </ul>
                </nav>
            </div>
            @endif
        </div>
    </div>


    @push('scripts')
        <script>
            var categories = @json($categories);

            for (var elementI in categories) {
                var element = categories[elementI];
                console.log(element);
                var selected = '';
                if (parseInt(element.idSector) == parseInt("{{ request('category') }}")) {
                    selected = 'selected';
                }
                var html = `<option ${selected} value="${element.idSector}">${element.nom}</option>`;
                $('#tipology').append(html)
            }

            /*categories.forEach(element => {
                var selected = '';
                if(parseInt(element.idSector) == parseInt("{{ request('category') }}")){
                    selected = 'selected';
                }
                var html = `<option ${selected} value="${element.idSector}"></option>`;
                $('#tipology').append(html)
            });*/

            if (parseInt('{{ request('category') }}')) {
                changeCategory(parseInt('{{ request('category') }}'));
            }

            function changeCategory(idSector = null) {

                var optionAll = '<option value="">{{ __('business.form.all-categories') }}</option>';

                if (!idSector) {
                    idSector = $('#tipology').val();
                }

                if (categories[idSector].subsectors) {

                    $('#subtipology').html(optionAll);

                    for (var elementI in categories[idSector].subsectors) {
                        var element = categories[idSector].subsectors[elementI];
                        console.log(element);
                        var selected = '';
                        if (parseInt(element.idSector) == parseInt("{{ request('subcategory') }}")) {
                            selected = 'selected';
                        }
                        var html = `<option ${selected} value="${element.idSector}">${element.nom}</option>`;
                        $('#subtipology').append(html)
                    }

                    /*categories[idSector].subsectors.forEach(element => {
                        var selected = '';
                        if(parseInt(element.idSector) == parseInt("{{ request('subcategory') }}")){
                            selected = 'selected';
                        }
                        var html = `<option ${selected} value="${element.idSector}"></option>`;
                        $('#subtipology').append(html)
                    });*/
                }
            }
        </script>
    @endpush
@endsection