@extends('web.layouts.container')

@section('header')
    <section class="inner_header">
        <div class="inner_back">
            <img src="{{asset($detail->header_image)}}" alt="">
        </div>
        <div class="inner_info">
            <div class="container h-100">
                <div class="row align-items-end h-100">
                    <div class="col-lg-6 offset-lg-6">
                        <div class="about_head_info companies_head">
                            <p>{!! $detail->description !!}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('content')
    <section class="companies section_padding pb-0">
        <div class="container">
            <div class="section_head">
                <h3 class="text-uppercase">{{__('companies.head')}}</h3>
            </div>
        </div>
        <div class="text_back">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <p>{{__('companies.hint')}}</p>
                    </div>
                    <div class="col-lg-6">
                        <form action="" class="form">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <select class="sectors">
                                            <option value="">{{__('companies.select_sector')}}</option>
                                            <option value="">{{__('companies.all')}}</option>
                                            @if(count($sectors))
                                                @foreach($sectors as $sector)
                                                    <option value="{{$sector->id}}">{{$sector->name}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <select class="countries">
                                            <option value="">{{__('companies.choose_country')}}</option>
                                            <option value="">{{__('companies.all')}}</option>
                                            @if(count($countries))
                                                @foreach($countries as $country)
                                                    <option value="{{$country->id}}">{{$country->name}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        @if(count($companies))
            <div class="companies_content">
                <div class="container">
                    <div class="content company_container">
                        @foreach($companies as $company)
                            <div class="items country_{{$company->country_id}} sector_{{$company->sector_id}}">
                                <span class="clss"></span>
                                <div class="img_btn">
                                    <img src="{{asset($company->image)}}" alt="">
                                </div>
                                <div class="company_info">
                                    <div class="container">
                                        <div class="cont">
                                            <div class="row align-items-center">
                                                <div class="col-sm-3">
                                                    <div class="item_logo mob_none">
                                                        <img src="{{asset($company->image)}}" alt="">
                                                    </div>
                                                </div>
                                                <div class="col-sm-9">
                                                    <div class="info">
                                                        <div class="item_name mb-3">
                                                            <h5>{{$company->name}}</h5>
                                                        </div>
                                                        <p>{!! $company->description !!}</p>
                                                        @if($company->url ?? null)
                                                        <a href="{{ $company->url }}" target="_blank" class="a_arrow mt-2"> {{ __('companies.visit_url') }} <i class="fas fa-caret-right"></i></a>
                                                        @endif
                                                        <!--<a href="#" class="a_arrow mt-2">Visit Website <i class="fas fa-caret-right"></i></a>-->
                                                    </div>
                                                </div>
                                            </div>
                                            <!--<span class="cls"> <i class="fas fa-times"></i> {{__('main.close')}}</span>-->
                                            <span class="cls"> <i class="fas fa-times"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @else
            <div class="container">
                <div class="alert alert-secondary text-danger text-center">{{__('main.no_data')}}</div>
            </div>
        @endif

    </section>
@endsection

@section('inner_js')
    <script>

        $('select.sectors').change(function () {
            let sectorVal = $(this).val(),
                countryVal = $('select.countries option:selected').val();
            if(sectorVal !== ''){
                $('.company_container .items').addClass('d-none');
            } else {
                $('.company_container .items').removeClass('d-none');
            }
            countryVal = countryVal !== '' ? '.country_'+countryVal : '';
            sectorVal = sectorVal !== '' ? '.sector_'+sectorVal : '';
            $(sectorVal+countryVal).removeClass('d-none');
            console.log(countryVal+sectorVal);
        });
        $('select.countries').change(function () {
            let countryVal = $(this).val(),
                sectorVal = $('select.sectors option:selected').val();
            if(countryVal !== ''){
                $('.company_container .items').addClass('d-none');
            } else {
                $('.company_container .items').removeClass('d-none');
            }
            countryVal = countryVal !== '' ? '.country_'+countryVal : '';
            sectorVal = sectorVal !== '' ? '.sector_'+sectorVal : '';
            $(sectorVal+countryVal).removeClass('d-none');
            console.log(countryVal+sectorVal);
        });

        let companySearchRoute = "{{route('ourCompanies.search')}}";

        // $('select').change(async function () {
        //     let data = {search_id: $(this).val()},
        //         url = companySearchRoute,
        //         method = 'post';
        //
        //     if($(this).hasClass('countries')){
        //         data.search_by = 'country_id'
        //     }
        //
        //     if($(this).hasClass('sectors')){
        //         data.search_by = 'sector_id'
        //     }
        //
        //     const response=await ajax({
        //         url,
        //         data,
        //         dataType: 'html',
        //         method,
        //         contentType: false,
        //         processData: false,
        //     });
        //
        //     if (response) {
        //         $('.company_container').html(response)
        //     }
        // });


        // ---------- company_info -----------
        // $(document).on("click", '.companies_content .content .items .img_btn', function() {
        //     var infoOfset = $(this).parent().offset().left,
        //         contOfset = $(".container").offset().left;
        //     $(this).addClass("plus").parent().siblings().find(".img_btn").removeClass("plus");

        //     $(this).siblings(".company_info").css({
        //         left: -infoOfset
        //     });

        //     $(".company_info").removeClass("show");
        //     $(this).siblings(".company_info").addClass("show");
        // });

        $(document).on("click", '.companies_content .company_info .cls', function() {
            $(".company_info").removeClass("show");
            $(".company-logos .content .items").css({
                opacity: 1
            });
            $(".companies_content .content .items .img_btn").removeClass("plus");
        })
    </script>
@endsection