@extends('web.layouts.container')

@section('content')
    <div class="page-heading">
        <div class="overlay"></div>
        <div class="container">
            <div class="text text-center">
                <h4>{{__('labCom.lab_name')}}</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->lab_com_name}}</li>
                </ol>
            </nav>
        </div>
    </div>
    <section class="profile-lab">
        <div class="container">
            <div class="inner">
                @if(is_array($labCom->images) && count($labCom->images))
                <div class="lab-carousel owl-carousel owl-theme">
                    @foreach($labCom->images as $image)
                        <div class="item">
                            <img src="{{asset($image)}}">
                        </div>
                    @endforeach
                </div>
                @endif
                <div class="card-body">
                    <h3>{{$labCom->name}}</h3>
                    <p>{{$labCom->description}}</p>
                    <div class="contact-links-sec">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="item">
                                    <div class="icon">
                                        <i class="fab fa-whatsapp"></i>
                                    </div>
                                    <div class="text">
                                        <h6>{{__('main.connect_with_us')}}</h6>
                                        <a href="tel:{{$labCom->user->phone}}"><p>{{$labCom->user->phone}}</p></a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="item">
                                    <div class="icon">
                                        <i class="far fa-envelope"></i>
                                    </div>
                                    <div class="text">
                                        <h6>{{__('users.email')}}</h6>
                                        <a href="mailto:{{$labCom->user->email}}"><p>{{$labCom->user->email}}</p></a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="item">
                                    <div class="icon">
                                        <i class="fas fa-map-marker-alt"></i>
                                    </div>
                                    <div class="text">
                                        <h6>{{__('users.address')}}</h6>
                                        <p>{{$labCom->street_zone}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
@endsection

@section('inner_js')

@endsection