@extends('frontend.layouts.master')

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

@section('head')
@endsection

@section('content-wrapper')
    <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 sombratexto">
                        {{ __('moneder.pimeef.title') }}
                    </h1>
                </div>
            </div>
        </div>
    </div>

    <div class="section py-5 position-relative bg-light overflow-hidden" id="presentaciones">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 d-flex flex-column justify-content-center align-items-center">
                    <div class="col-sm-12" data-jarallax-element="-100">
    
                        <img src="{{ asset('tenants/pimeef/images/app.png') }}" alt="{{ $currentCompany->name }}" class="img-fluid d-block rounded " style="z-index: 6">
    
                    </div>
                </div>
    
                <div class="px-lg-5 d-flex flex-column justify-content-center col-lg-6 p-5">
    
                    <h2 class="display-4 perspectiva  titulorosa">{{ __('moneder.pimeef.about-title') }}</h2>
    
                    <p class="intro-seccion mb-3 POPPINS" style="font-weight:200;">{!! __('moneder.pimeef.subtitle') !!}</p>
    
                    <p class="intro-seccion mb-3" style="font-weight:200;">{!! __('moneder.pimeef.subtitle2') !!}</p>
                    
                    <p class="intro-seccion mb-3 POPPINS" style="font-weight:200;">{!! __('moneder.pimeef.more-moneder') !!}<a href="{{ route('frontend.contact.index') }}"><b>{!! __('moneder.pimeef.btn-contact') !!}</b></a>.</p>

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

    <div class="py-5 text-center align-items-center d-flex portada portada-new 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 sombratexto">
                        {{ __('business.title') }}
                    </h1>
                </div>
            </div>
        </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>

                    <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.moneder.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.moneder.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.moneder.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.moneder.index') }}?name={{ request('name') }}&category={{ request('category') }}&subcategory={{ request('subcategory') }}&page={{ $currentPage + 1  }}">{!! __('pagination.next') !!}</a></li>
                        @endif
                    </ul>
                </nav>
            </div>
            @endif
        </div>
    </div>

@endsection

@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