@extends('frontend.layouts.master')

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

@section('head')
@endsection

@section('content-wrapper')
    <div class="py-5 text-center text-white align-items-center d-flex portada jarallax header-business-index" 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 sombratexto text-light">
                        <br><br><br><br>
                    </h1>
                </div>
            </div>
        </div>
    </div>

    <div class="card w-100 p-4">
        <div class="alert alert-warning" role="alert">
            <div class="alert-w-bussiness d-flex flex-nowrap align-items-center">
                <div class="icon-info-business"><i class="fa fa-info-circle"></i></div>
                <p>Con la finalidad de que los beneficios de los bonos se repartan entre todos los establecimientos adheridos de forma equitativa, se ha establecido un límite de <b>12.500€</b> de canje por cada establecimiento. En el momento en que el establecimiento llegue a dicho límite se desactivará su posibilidad de canjear. </p>
            </div>
        </div>
    </div>

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

            @if(request('viewMap'))
            <iframe src="{{ route('frontend.business.map-sellers') }}" frameborder="0" width="100%" height="400px"></iframe>
            @else
            <a href="{{ route('frontend.business.index') }}?name={{ request('name') }}&category={{ request('category') }}&subcategory={{ request('subcategory') }}&page={{ request('page') }}&viewMap=1" class="site-btn link wow bounceInUp">{{ __('business.view-map-btn') }}</a>
            @endif
        </div>
    </div>

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

                <input type="hidden" name="viewMap" value="{{ request('viewMap') }}">

                <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>

                                @if(($seller['monedes'][0]['saldo'] * 100) / 12500 >= 90)
                                <span style="white-space: normal;" class="badge badge-warning">Establecimiento próximo a agotar su saldo</span>
                                @endif

                                @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  }}&viewMap={{ request('viewMap') }}">{!! __('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  }}&viewMap={{ request('viewMap') }}">{{ $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  }}&viewMap={{ request('viewMap') }}">{{ $i }}</a></li>
                            @endif
                            @if($i == ceil($itemsPages / 24))
                            <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  }}&viewMap={{ request('viewMap') }}">{!! __('pagination.next') !!}</a></li>
                            @endif
                        @endfor
                    </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