@extends('website.layouts.master')

@section('title')
    {{__('website-trans.departments')}}
@endsection

@section('content')

    <!-- Banner Section -->
    <section class="page-banner">
        <div class="image-layer" style="background-image:url({{asset("website/assets/images/resource/all-departments.webp")}});"></div>
        <div class="shape-1"></div>
        <div class="shape-2"></div>
        <div class="banner-inner">
            <div class="auto-container">
                <div class="inner-container clearfix">
                    <h1>{{__('website-trans.departments')}}</h1>
                    <div class="page-nav">
                        <ul class="bread-crumb clearfix">
                            <li><a href="{{route('home')}}">{{__('website-trans.home')}}</a></li>
                            <li class="active">{{__('website-trans.allDepartments')}}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End Banner Section -->

    <!-- We Work Section -->
    <section class="we-work-section">
        <div class="auto-container">
            <div class="sec-title centered">
                <h2>{{__('website-trans.departmentsServices')}}<span class="dot">.</span></h2>
            </div>
            <!--Work Tabs-->
            <div class="work-tabs tabs-box">

                <!--Tab Btns-->
                <ul class="tab-btns tab-buttons clearfix">
                    <li data-tab="#tab-1" class="tab-btn active-btn"><span>{{__('website-trans.informationTechnologyLine')}}</span></li>
                    <li data-tab="#tab-2" class="tab-btn"><span>{{__('website-trans.advertisingLine')}}</span></li>
                    <li data-tab="#tab-3" class="tab-btn"><span>{{__('website-trans.printingPackagingLine')}}</span></li>
                </ul>

                <!--Tabs Container-->
                <div class="tabs-content">

                    <!--Tab-->
                    <div class="tab active-tab" id="tab-1">
                        <div class="services">
                            <div class="row clearfix">
                                <!--Service Block-->
                                @foreach($infos as $data)
                                    <div class="service-block-two col-xl-3 col-lg-6 col-md-6 col-sm-12 wow fadeInUp"
                                        data-wow-delay="0ms" data-wow-duration="1500ms">
                                        <div class="inner-box">
                                            <div class="bottom-curve"></div>
                                            <div class="icon-box"><span class="{{$data->icon}}"></span></div>
                                            <h5><a href="{{route('getService', $data->id)}}">{!!App::getLocale() == 'ar' ? $data->name_ar : $data->name_en !!}</a></h5>
                                            <div class="text">{!!App::getLocale() == 'ar' ? \Str::limit($data->description_ar, 60): \Str::limit($data->description_en, 60) !!}</div>
                                            <div class="link-box"><a href="{{route('getService', $data->id)}}"><span class="fa fa-angle-right"></span></a></div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <!--Tab-->
                    <div class="tab" id="tab-2">
                        <div class="services">
                            <div class="row clearfix">
                                <!--Service Block-->
                                @foreach($advertis as $data)
                                    <div class="service-block-two col-xl-3 col-lg-6 col-md-6 col-sm-12 wow fadeInUp"
                                        data-wow-delay="0ms" data-wow-duration="1500ms">
                                        <div class="inner-box">
                                            <div class="bottom-curve"></div>
                                            <div class="icon-box"><span class="{{$data->icon}}"></span></div>
                                            <h5><a href="{{route('getService', $data->id)}}">{!!App::getLocale() == 'ar' ? $data->name_ar : $data->name_en !!}</a></h5>
                                            <div class="text">{!!App::getLocale() == 'ar' ? \Str::limit($data->description_ar, 60): \Str::limit($data->description_en, 60) !!}</div>
                                            <div class="link-box"><a href="{{route('getService', $data->id)}}"><span class="fa fa-angle-right"></span></a></div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <!--Tab-->
                    <div class="tab" id="tab-3">
                        <div class="services">
                            <div class="row clearfix">
                                <!--Service Block-->
                                @foreach($prints as $data)
                                    <div class="service-block-two col-xl-3 col-lg-6 col-md-6 col-sm-12 wow fadeInUp"
                                        data-wow-delay="0ms" data-wow-duration="1500ms">
                                        <div class="inner-box">
                                            <div class="bottom-curve"></div>
                                            <div class="icon-box"><span class="{{$data->icon}}"></span></div>
                                            <h5><a href="{{route('getService', $data->id)}}">{!!App::getLocale() == 'ar' ? $data->name_ar : $data->name_en !!}</a></h5>
                                            <div class="text">{!!App::getLocale() == 'ar' ? \Str::limit($data->description_ar, 60): \Str::limit($data->description_en, 60) !!}</div>
                                            <div class="link-box"><a href="{{route('getService', $data->id)}}"><span class="fa fa-angle-right"></span></a></div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>

@endsection

@section('js')

@endsection