@extends('frontend.layouts.master')

@section('page_title')
    {{ __('business.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 text-white">
                        {{ __('business.title') }}
                    </h1>
                </div>
            </div>
        </div>
    </div>


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

    <div class="bg-light3">
        <nav aria-label="breadcrumb">
            <div class="container">
                <ol class="breadcrumb d-flex justify-content-center">
                    <li class="breadcrumb-item s-text"><a href="{{ route('frontend.home.index') }}">{{ __('frontend-menu.home') }}</a></li>
                    <li class="breadcrumb-item s-text active" aria-current="page">{{ __('frontend-menu.business') }}</li>
                </ol>
            </div>
        </nav>

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

                    <div class="row p-3">
                        <p class="m-auto">{{ __('business.filter-services') }}</p>
                    </div>

                    <div class="row">

                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" {{ (request('reservation_service') == 'on') ? 'checked' : '' }} name="reservation_service" id="reservation_service">
                                <label class="custom-control-label" for="reservation_service">{{ __('business.reservation_service') }}</label>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" {{ (request('order_service') == 'on') ? 'checked' : '' }} name="order_service" id="order_service">
                                <label class="custom-control-label" for="order_service">{{ __('business.order_service') }}</label>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" {{ (request('shipping_service') == 'on') ? 'checked' : '' }} name="shipping_service" id="shipping_service">
                                <label class="custom-control-label" for="shipping_service">{{ __('business.shipping_service') }}</label>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" {{ (request('takeaway_food_service') == 'on') ? 'checked' : '' }} name="takeaway_food_service" id="takeaway_food_service">
                                <label class="custom-control-label" for="takeaway_food_service">{{ __('business.takeaway_food_service') }}</label>
                            </div>
                        </div>

                    </div>

                    <div class="row text-center p-4">
                        <div class="col-12">
                            <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>
    
    

    <div class="section py-5">
        <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 h-100">
                            
                            @include('frontend.business.logo')

                            <div class="card-body text-center d-flex flex-column">

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

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

                                @endif
                                

                                @if($seller['entregaDesglosada'] != 0)
                                    @foreach($seller['monedes'] as $moneda)
                                        @if($moneda['entrega'] > 0)                                        
                                            @if($moneda['tipus'] == 'euros_proximitat' || $moneda['tipus'] == 'euros_establiment')
                                            <p class="seller-grati-card"><b>{{ $moneda['entrega'] }}%</b> {{ $moneda['descripcio'] }}</p>
                                            @else
                                            <p class="seller-grati-card"><b>{{  $moneda['entrega'] }} </b> {{ $moneda['descripcio'] }}</p>
                                            @endif                                 
                                        @endif       
                                    @endforeach                            
                                @endif

                                @if($seller['adresa'] != '')
                                <p class="text-small-p-address mt-2 color-primary"><i class="fa fa-map-marker"></i> {{ $seller['adresa'] }}</p>
                                @endif

                            </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') }}{{ core()->getQueryPaginationsBusiness($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') }}{{ core()->getQueryPaginationsBusiness($i)  }}">{{ $i }}</a></li>
                            @else
                            <li class="page-item"><a class="page-link" href="{{ route('frontend.business.index') }}{{ core()->getQueryPaginationsBusiness($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') }}{{ core()->getQueryPaginationsBusiness($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();
                }

                categories.forEach(sector =>{
                    if(parseInt(sector.idSector) == parseInt(idSector)){
                        $('#subtipology').html(optionAll);

                        for (var elementI in sector.subsectors) {
                            var element = sector.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)
                        }
                    }
                })                               
            }
        </script>
    @endpush
@endsection