@extends('frontend.layouts.master')

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

@section('head')
@endsection

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

        @include('tenants.' . $currentCompany->code . '.frontend.moneder-promotions.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">
                            {{ __('moneder.promotions.title') }}
                        </h1>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div class="bg-light3">
        <div class="container">
            <nav aria-label="breadcrumb">
                <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">{{ __('moneder.promotions.title') }}</li>
                </ol>
            </nav>
        </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-4 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-4 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-lg-4 col-md-4 col-12 d-flex align-items-end">
                        <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="container section-tidings">
        @if(count($promotions))
        <div class="row justify-content-center pt-4">
            @foreach ($promotions as $promotion)
                <div class="col-lg-4 col-md-4 col-sm-12 p-3">
                    <div class="card w-100 h-100">

                        <span class="publish_date_tidings"><i class="fa fa-calendar"></i> {{ __('moneder.promotions.date', ['date' => \Carbon\Carbon::parse($promotion['dataCaducitat'])->format('d M Y')]) }}</span>

                        <a href="{{ route('frontend.moneder-promotions.detail', $promotion['idPromocio']) }}"> 
                            @if($promotion['imatge'] != '')
                            <img class="card-img-top" src="{{ $currentCompany->moneder_intranet . '/uploads/promocions/' . $promotion['imatge'] }}" alt="{{ $promotion['titol'] }}">
                            @else    
                            <img class="card-img-top" src="/images/moneder-icona.png" alt="{{ $promotion['titol'] }}">
                            @endif
                        </a>

                        <div class="card-body">
                            <a href="{{ route('frontend.moneder-promotions.detail', $promotion['idPromocio']) }}" class="card-title">{{ $promotion['titol'] }}</a>
                            <p class="card-text s-text mt-3">{!! substr(strip_tags($promotion['descripcio']), 0, 100) . '....'; !!}</p>
                            
                            <p class="card-text s-text color-primary mt-3">{{ $promotion['nomSector'] }}</p>
                            
                            <a href="{{ route('frontend.moneder-promotions.detail', $promotion['idPromocio']) }}" class="site-btn">{{ __('tidings.read-more') }}</a>
                        </div>
                      </div>
                </div>
            @endforeach
        </div>
        @else 
        <div class="row justify-content-center pt-4">
            <div class="alert alert-warning" role="alert">{{ __('moneder.promotions.empty') }}</div>
        </div>
        @endif
    </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