@extends('Website.Layout.App')

@push('css')
    <link href="{{ asset('assets/css/custom/service_details.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/custom/common.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/custom/shared_component.css') }}" rel="stylesheet">
@endpush
@section('content')

    <div class="jumbotron text-center bg-body-tertiary">
        <div class="container">
            <h1 class="text-body-emphasis">{{$service->service_name}}</h1>
        </div>
    </div>
    <div class="mt-5">
        <div class="row">
            <div class="col-12 col-md-2">
                <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        @if(count($banners))
                            @foreach($banners as $b)
                                <div class="carousel-item @if($loop->iteration==1) active @endif">
                                    <img src="{{ asset($b->url) }}" class="img-fluid d-block w-100" alt="{{ asset($b->url) }}">
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-7">
                @if($service->image_url)
                <div class="service-image-div" style="text-align: center;object-fit: contain;height:300px;">
                    <img src="{{ asset($service->image_url) }}" class="img-fluid" style="height: 100%;width:100%;object-fit: contain">   
                </div>
                @endif
                <div class="card mt-5">
                    <div class="card-body">
                        @if($service->description)
                            {!!$service->description!!}
                        @else
                            <h4>No Details Found</h4>    
                        @endif
                    </div>
                </div> <!--Service Details Card-->
                @include('Website.Shared.Faq')
            </div>

            <div class="col-12 col-md-3">

                @include('Website.Shared.Documents')
                @include('Website.Shared.EnquiryForm')

            </div>
        </div>
    </div>
@endsection 

@push('scripts')
    <script>
        function show_doc_div(entity_id){
            $('.doc_div').hide();
            $('#doc_div_'+entity_id).show();
        }
    </script>
 @endpush