@extends('landing.layouts.app')

@section('content')
<div class="container p-0 fadeIn">
    <div class="mt-5">
        <div class="d-flex align-items-center">
         <a href="{{ route('landing.nearbyServiceprovider') }}" class="me-3"><i class="bi bi-arrow-left"></i></a>
        <h4 class="font-weight-semibold m-0">{{  $serviceprovider->name }}</h4>
        </div>
    </div><!-- /.col -->    
    <div class="card shadow mb-3 p-3 bg-body rounded border-0">

    <div class="row mt-5">
        <div class="col-lg-12">
                            <div class="row">
                                <div class="col-lg-12">
                                    @if($serviceprovider->profile)
                                        <img src="{{ Storage::url($serviceprovider->profile) }}"
                                        class="img-responsive  pb-0 w-100"
                                        width="250px" height="300px" alt="..." />
                                    @else
                                        <img src="{{ asset('store.jpeg') }}"
                                        class="img-responsive  pb-0 w-100"
                                        width="250px" height="300px" alt="..." />
                                    @endif
                                </div>
                                <div class="col-lg-12">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <p class="mb-0" ><b>State :</b> {{  ucfirst($serviceprovider->state) }}</p>
                                            <p class="mb-0"><b>City :</b> {{  ucfirst($serviceprovider->city) }}</p>
                                            <p class="mb-0"><b>District : </b> {{  ucfirst($serviceprovider->district) }}</p>
                                            <p class="mb-0"><b>PinCode : </b> {{  $serviceprovider->pincode }}</p>
                                            <p class="mb-0"><b>Address : </b> {{  $serviceprovider->address }}</p>
                                        </div>
                                        <div class="col-lg-6" style="height: 500px">
                                            <div id="map" style="height: 100%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>        
        </div> 
    </div>
    <livewire:landing.serviceprovider_review :serviceprovider="$serviceprovider" lazy />
  </div> 

</div>
@endsection