@extends('layouts.master')
@section('title', isset($service->contetn) ? $service->contetn : __('messages.SERVICES'))
@push('css')
<style>
    .secand-item-div {
        margin-top: 80px;
        display:flex;
        align-items: center;
    }
    @media (max-width: 768px) {
        .service-detail .content img{
            margin: 18px 0;
        }
        .secand-item-div {
            margin-top: 0px;
            flex-direction: column;
        }
    }
</style>
@endpush
@section('content')
    <!-- Service Detail Section -->
    <section class="container service-detail">
        <div class="service-header">
            <div class="row align-items-center justify-content-between">
                <div class="col-md-8 col-sm-12" data-aos="fade-up" data-aos-duration="1000">
                    <h2 class="section-title">{{ $service->contetn }}</h2>
                    {!! $service->descmain !!}
                </div>
                <div class="col-md-3 col-sm-12" data-aos="fade-left" data-aos-duration="1000">
                    @if ($service->service_image_main)
                        <img src="{{ asset('storage/' . $service->service_image_main) }}" alt="{{ $service->service_name }}">
                    @endif
                </div>
            </div>
        </div>
        <div class="content">
            @foreach (json_decode($service->sections) as $index => $section)
                @php
                    $hasContent = app()->getLocale() == 'ar' ? !empty($section->service_content_ar) : !empty($section->service_content_en);
                @endphp

                @if ($index % 2 == 0)
                    <div class="row align-items-center">
                        @if ($hasContent)
                            <div class="col-md-7 service-content-img order-md-1" data-aos="fade-right" data-aos-duration="1000">
                                <div class="first-item">
                                    {!! app()->getLocale() == 'ar' ? $section->service_content_ar : $section->service_content_en !!}
                                </div>
                            </div>
                            <div class="col-md-5 order-md-2"
                                 data-aos="zoom-in" data-aos-duration="1000">
                                <img src="{{ asset('storage/' . $section->section_image) }}" class="img-fluid" alt="Section Image">
                            </div>
                        @else
                            <div class="col-12" data-aos="zoom-in" data-aos-duration="1000">
                                <img src="{{ asset('storage/' . $section->section_image) }}"
                                     style="max-height: 424px; height:100%;" class="img-fluid w-100" alt="Section Image">
                            </div>
                        @endif
                    </div>
                @else
                    <div class="row align-items-center justify-content-between mb-5">
                        @if ($hasContent)
                            <div class="secand-item-div">
                                <div class="col-md-5" data-aos="zoom-in" data-aos-duration="1000">
                                    <img src="{{ asset('storage/' . $section->section_image) }}" class="img-fluid" alt="Section Image">
                                </div>
                                <div class="col-md-7 d-flex justify-content-end order-md-1"data-aos="fade-left" data-aos-duration="1000">
                                    <div class="secand-item">
                                        {!! app()->getLocale() == 'ar' ? $section->service_content_ar : $section->service_content_en !!}
                                    </div>
                                </div>    
                            </div>
                        @else
                            <div class="col-12" data-aos="zoom-in" data-aos-duration="1000">
                                <img src="{{ asset('storage/' . $section->section_image) }}" class="img-fluid w-100"
                                     style="max-height: 424px; height:100%;" alt="Section Image">
                            </div>
                        @endif
                    </div>
                @endif
            @endforeach
        </div>
    </section>

    @include('layouts.cta')

@endsection