@extends('client.topCargo.layouts.layout')

@section('title', $service->title)

@section('content')
    <!--Page Header-->
    <div class="page-header title-area">
        <div class="header-title">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <h1 class="page-title"> {{ $service->title }}</h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="breadcrumb-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-sm-12 col-xs-12 site-breadcrumb">
                        <nav class="breadcrumb">
                            <a class="home" href="{{ route('home') }}"><span>Home</span></a>
                            <i class="fa fa-angle-right" aria-hidden="true"></i>
                            <span> {{ $service->title }}</span>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Page Header end-->
    <!--services Welcome sec -->
    <div class="service_dtl1 secpadd">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="widget services-menu-widget">
                        <h4 class="widget-title">Our Services</h4>
                        <ul class="menu service-menu">
                            {{-- <li><a href="#">See All Services</a></li> --}}
                            @foreach ($serviceLists as $item)
                                <li class="menu-item"><a
                                        href="{{ route('showService', $item->alias) }}">{{ $item->title }}</a></li>
                            @endforeach
                        </ul>
                    </div>
                </div>

                <div class="col-md-9">
                    <div class="servdtlimg">
                        <img style="height: 360px; width:100%; object-fit:cover;" src="{{ asset($service->thumb) }}"
                            alt="{{ $service->alias }}" />
                    </div>
                    <div class="row paddsec">
                        <div class="col-md-12">
                            <div class="abotinforgt">
                                <div class="fh-section-title clearfix f25  text-left version-dark paddbtm40">
                                    <h2>Description</h2>
                                </div>
                                {!! strip_tags($service->text) !!}
                            </div>
                        </div>

                    </div>
                    <hr class="margtb40">
                    <div class="fh-section-title f20 clearfix  text-left version-dark paddbtm40">
                        <h2>Safety Transportation</h2>
                    </div>

                    <div class="row">
                        @if ($service->children->isNotEmpty())
                            @foreach ($service->children as $child)
                            @if (!empty($child->icon))
                                    <div class="col-sm-6">
                                        <div class="fh-service-box-2   box-style-1  no-thumb">
                                            <div class="box-thumb"></div>
                                            <div class="box-wrapper">
                                                <div class="box-header clearfix"><span class="fh-icon"><i
                                                            class="{{ $child->icon }}"></i></span>
                                                    <h4 class="box-title">{{ $child->title }}</h4><span
                                                        class="sub-title main-color">Top Line Cargo </span>
                                                </div>
                                                <div class="box-content">
                                                    <p>{!! $child->text !!}</p>
    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        @endif
                    </div>

                    <div class="fh-section-title f20 clearfix  text-left version-dark paddbtm40">
                        <h2>Benefits of Service</h2>
                    </div>

                    <div class="servdtlaccord margbtm40">
                        <div class="panel-group" id="accordion">
                            @forelse ($service->children as $id=>$child)
                                @if (empty($child->icon)) 
                                    <div class="panel panel-default">
                                        <div class="panel-heading active-panel">
                                            <h4 class="panel-title">
                                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"
                                                    href="#collapse{{$id}}">
                                                    {{$child->title}}
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="collapse{{$id}}" class="panel-collapse collapse in">
                                            <div class="panel-body">
                                                {!!$child->text!!}</div>
                                        </div>
                                    </div>
                                @endif
                            @empty
                            @endforelse

                            {{-- <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"
                                            href="#collapseThree">
                                            Advanced Technology
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapseThree" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        We leverage advanced technology and digital tools for efficient cargo tracking,
                                        real-time monitoring, and documentation management, providing our clients with
                                        visibility and control over their shipments. </div>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Welcome sec   end-->
@endsection