@extends('web.layouts.container')

@section('content')
    <div class="page-heading">
        <div class="overlay"></div>
        <div class="container">
            <div class="text text-center">
                <h4>{{__('labCom.head')}}</h4>
            </div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="#">{{__('main.home_page')}}</a>
                        <i class="far fa-dot-circle"></i>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{__('labCom.head')}}</li>
                </ol>
            </nav>
        </div>
    </div>
    <section class="labs-pg">
        <div class="container">
            <form>
                <div class="labs-heading row">
                    <div class="col-md-8">
                        <h5>{{__('labCom.head')}}</h5>
                    </div>
                    <div class="col-md-2 mr-auto">
                        <div class="form-group">
                            <select class="form-control city_id" id="exampleFormControlSelect1">
                                <option value="">{{__('labCom.city')}}</option>
                                @foreach($cities as $name => $id)
                                    <option value="{{$id}}">{{$name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <select class="form-control type" id="exampleFormControlSelect1">
                                <option value="">{{__('labCom.type')}}</option>
                                <option value="lab">{{__('labCom.lab')}}</option>
                                <option value="com">{{__('labCom.com')}}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </form>
            <div class="labs-inner">
                <div class="row lan_com_container">
                    @if($labCompanies->count())
                        @foreach($labCompanies as $labCompany)
                            <div class="col-lg-4 col-md-6">
                                <div class="card">
                                    <a href="{{route('labs-companies.show', $labCompany->id)}}">
                                        <div class="images-container">
                                            <img src="{{ is_array($labCompany->images) && array_key_exists(0, $labCompany->images) ? asset($labCompany->images[0]) : asset('assets/web/images/logo.png') }}" class="main-img">
                                            <img src="{{ is_array($labCompany->images) && array_key_exists(1, $labCompany->images) ? asset($labCompany->images[1]) : asset('assets/web/images/logo.png') }}" class="img-hover">
                                            <span class="typ {{$labCompany->type == 'lab' ? 'lap' : 'agc'}}">
                                                {{__('labCom.'.$labCompany->type)}}
                                            </span>
                                        </div>
                                        <!--<h6 class="text-center mt-4">-->
                                        <!--    {{__('labCom.'.$labCompany->type)}}-->
                                        <!--</h6>-->
                                        <div class="card-body">
                                            <h5>{{$labCompany->lab_com_name}}</h5>
                                            <p>{{str_limit($labCompany->description)}}</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')

    <script>
        $(document).ready(function(){
            $('.city_id, .type').change(async function (e) {
                e.preventDefault();
                let data = {city_id:$('.city_id').val(), type:$('.type').val()},
                    url = "{{route('labCompanies.search')}}",
                    method = 'get';

                const response=await ajax({
                    url,
                    data,
                    dataType: 'html',
                    method
                });

                if (response) {
                    $('.lan_com_container').html(response)
                }
            });
        })
    </script>
@endsection