@extends('layout.app')
@section('title')
    <title>{{$service->name}}</title>
    <meta name="description" content="Delivering excellent and cost-effective solutions to esnure customer satisfaction."/>
    <meta name="og:title" content={{$service->name}}/>
    <meta name="og:image" content="{{url('frontend/images/service-detail.png')}}"/>
@endsection
@section('content')
    <section class="service-detail-banner" style="background: url('../frontend/images/service-detail.png')">
        <div class="service-detail-desc">
            <h2>{{$service->name}}</h2>
        </div>
    </section>
    @php $service_sections = $service->visa_service_sections()->orderby('order_by','asc')->get(); @endphp
    @if($service_sections->count() > 0)
    <section class="permanent-visa-section">
        <div class="row">
            <div class="col-md-12">
                <div class="permanent-visa-head">
                    <h2>{{$service->name}}s</h2>
                    <p>{!!strip_tags($service_sections->first()->top_description)!!}</p>
                </div>
            </div>
        </div>
        <div class="row g-4">
            <div class="col-md-6">
                <div class="service-detail-secone">
                    <h3>{!!$service_sections->first()->left_description!!}</h3>
                </div>
            </div>
            <div class="col-md-6">
                <div class="service-detail-sectwo">
                    <p>{!!$service_sections->first()->point_title!!}</p>
                    <ul>
                    @foreach($service_sections->first()->visa_service_section_point as $point)
                        <li>{{$point->point}}</li>
                    @endforeach    
                    </ul>
                </div>
            </div>
        </div>
    </section>
    @if($service_sections->count() > 1)
    @php $second_service = $service_sections[1];@endphp
    <section class="service-detail-third">
    <div class="row">
            <div class="col-md-6">
                <div class="service-detail-secone">
                    <h3>{{$second_service->left_title}} </h3> 
                    <h3>{{$second_service->left_sub_title}}</h3>
                    <p>{!!$second_service->left_description!!}</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="service-detail-sectwo">
                    <h3>{{$second_service->right_title}}</h3>
                    <p>{!!$second_service->point_title!!}</p>
                    <ul>
                    @foreach($second_service->visa_service_section_point as $point)
                        <li>{{$point->point}}</li>
                    @endforeach    
                    </ul>
                    <h5>{{$second_service->right_sub_title}}</h5>
                    <p>{{$second_service->visa_length}}</p>
                </div>
            </div>
        </div>
    </section>
    @endif
    @endif
@endsection