@extends('front.layouts.app')
@push('css')
    <style>

        section {
            background: #0b4f74;
        }

        ol, ul {
            padding-left: 1rem;
        }

        .teams {
            font-size: 14px;
        }

        .teams {
            padding: 60px 20px;
            background: white;
        }

        .service-details__points {
            width: 100%;
            overflow-y: auto;
            flex-wrap: nowrap;
            height: 230px;
            align-items: baseline;
        }

        /* width */
        .service-details__points::-webkit-scrollbar {
            width: 5px;
        }

        /* Track */
        .service-details__points::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.55);
            cursor: pointer;
        }

        /* Handle */
        .service-details__points::-webkit-scrollbar-thumb {
            background: #0b4f74;
            cursor: pointer;
        }

        /* Handle on hover */
        .service-details__points::-webkit-scrollbar-thumb:hover {
            background: #0b4f74;
            cursor: pointer;
        }

        .service-details__points div {
            position: relative;
            -webkit-box-flex: 0;
            flex: unset;
            max-width: 250px;
            width: 19%;
            text-align: center;
        }

        .service-details__points div:hover{
            background: #20719b;
            cursor: pointer;
            border-radius: 20px;
        }

        .teams p {
            font-size: 14px;
            margin-bottom: 10px;
        }

        .teams span {
            display: block;
            height: 20px;
        }

        h4 {
            font-weight: bold;
            color: white;
            margin: 20px 0;
            font-size: 22px;
        }

        .service-details__points-icon img {
            font-size: 60px;
            margin: 0;
            color: #0b4f74;
            background: white;
            border-radius: 100%;
            padding: 10px;
            width: 250px;
        }

        .service-details__points-title {
            color: white;
            font-size: 12px;
        }

        .description {
            color: white;
            font-size: 16px;
        }

        .service-details__points li:before {
            display: none;
        }

        .simg {
            min-width: 40%;
            height: 100vh;
            max-height: 85vh;
        }

        .sdesc {
            min-width: 60%;
            border-left: 1px solid rgba(11, 79, 116, 0.47);
            box-shadow: -120px 0px 137px 35px rgb(15 78 112);
        }


        .sdesc2 {
            padding-top: 30px;
            margin-left: -10%;
            padding-right: 60px;
            /*background: #0b4f74;*/
            /*box-shadow: -120px 0px 137px 35px rgb(11 79 116);*/
        }

        .sd {
            background-color: #0b4f74;
            display: flex
        }

        .banner-d{
        }

        @media only screen and (max-width: 699px) {

            .sd {
                flex-wrap: wrap;
            }


            .banner-d{
                margin: 7px 0;
                box-shadow: 1px 1px 0px 20px #0b4f74;
            }


            .simg {
                min-width: 100%;
                height: 50vh;
                max-height: 50vh;
            }

            .sdesc2 {
                margin-left: 0;
                position: relative;
                padding: 0 20px;
                text-align: justify;
            }

            .sdesc {
                min-width: 100%;
                box-shadow: none;
            }

            .service-details__points div {
                width: 53%;
            }

            .teams {
                padding: 20px 20px;
            }

            .col-md-2 {
                margin-top: 30px !important;
            }
        }

    </style>
@endpush
@section('content')

    <!--Page Header Start-->
    <section class="page-header">
        <div class="page-header-bg"
             style="background-image: url({{asset('front/assets/images/backgrounds/page-header-bg.jpg')}})">
        </div>
        <div class="container">
            <div class="page-header__inner">
                <ul class="thm-breadcrumb list-unstyled">
                    <li><a href="{{route('arabiaMobiles.home')}}">Home</a></li>
                    <li><span>/</span></li>
                    <li><a href="{{route('arabiaMobiles.service')}}">Service</a></li>
                    <li><span>/</span></li>
                    <li class="active">service details</li>
                </ul>
                <h2>Service Details</h2>
            </div>
        </div>
    </section>
    <!--Page Header End-->


    @if($serviceDetail->banner)
        <div class="banner-d">
            <img src="{{asset($serviceDetail->banner)}}" style="width: 100%">
        </div>
    @endif

    <!--Service Details Start-->
    <section>
        <div class="sd">
            <img class="simg" src="{{asset($serviceDetail->service_photo_details)}}">
            <div class="sdesc">
                <div class="sdesc2">
                    <h4>{{$serviceDetail->title}}</h4>
                    <div class="description">
                        {!! $serviceDetail->description !!}
                        <br>
                    </div>
                    <h4>THE PROCESS</h4>
                    <div class="service-details__right">
                        <div class="list-unstyled service-details__points">

                            @foreach(\App\Models\Process::where('service_id',$serviceDetail->id)->orderBy('o_s','asc')->get() as $s)
                                <div>
                                    <div class="service-details__points-icon">
                                        <img src="{{asset($s->image)}}" width="50">
                                    </div>
                                    <h4 class="service-details__points-title">{{$s->title}}</h4>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if(
    $serviceDetail->mount_of_lebanon ||
    $serviceDetail->bekaa ||
    $serviceDetail->south_leabanon ||
    $serviceDetail->beirut ||
    $serviceDetail->north_lebanon ||
    $serviceDetail->main_office
    )
            <div style="background-color: #0b4f74;color:white;padding: 20px 0 30px 45px;">
                <h4 style="color:white;">SALES TEAM:</h4>
            </div>


        <div class="row teams">
            @if($serviceDetail->mount_of_lebanon)
                <div class="col-md-2" style="margin:0 auto;">
                    <h6 style="color:#0b4f74;font-weight: bold">MOUNT OF LEBANON</h6>
                    <div>{!!$serviceDetail->mount_of_lebanon!!}</div>
                </div>
            @endif
            @if($serviceDetail->bekaa)
                <div class="col-md-2" style="margin:0 auto;">
                    <h6 style="color:#0b4f74;font-weight: bold">BEKAA</h6>
                    <div>{!!$serviceDetail->bekaa!!}</div>
                </div>
            @endif
            @if($serviceDetail->south_leabanon)
                <div class="col-md-2" style="margin:0 auto;">
                    <h6 style="color:#0b4f74;font-weight: bold">SOUTH LEBANON</h6>
                    <div>{!!$serviceDetail->south_leabanon!!}</div>
                </div>
            @endif
            @if($serviceDetail->beirut)
                <div class="col-md-2" style="margin:0 auto;">
                    <h6 style="color:#0b4f74;font-weight: bold">BEIRUT</h6>
                    <div>{!!$serviceDetail->beirut!!}</div>
                </div>
            @endif
            @if($serviceDetail->north_lebanon)
                <div class="col-md-2" style="margin:0 auto;">
                    <h6 style="color:#0b4f74;font-weight: bold">NORTH LEBANON</h6>
                    <div>{!! $serviceDetail->north_lebanon !!}</div>
                </div>
            @endif
                @if($serviceDetail->main_office)
                    <div class="col-md-2" style="margin:0 auto;">
                        <h6 style="color:#0b4f74;font-weight: bold">MAIN OFFICE</h6>
                        <div>{!! $serviceDetail->main_office !!}</div>
                    </div>
                @endif
        </div>


        @endif

        {{--        <div class="container">--}}
        {{--            <div class="row">--}}
        {{--                <div class="col-md-12">--}}
        {{--                </div>--}}
        {{--                <div class="col-xl-4 col-lg-5">--}}
        {{--                    <div class="service-details__left">--}}
        {{--                        <div class="service-details__service">--}}
        {{--                            <h3 class="service-details__title">Services</h3>--}}
        {{--                            <ul class="service-details__service-list list-unstyled">--}}
        {{--                                @foreach($services as $service)--}}
        {{--                                <li class="active"><a href="{{route('arabiaMobiles.serviceDetails',$service->id)}}">{{$service->name}} <span class="fa fa-long-arrow-alt-right"></span></a></li>--}}
        {{--                                @endforeach--}}
        {{--                            </ul>--}}
        {{--                        </div>--}}
        {{--                        <div class="service-details__need-help" style="padding: 0;background: transparent;">--}}
        {{--<a href="tel:+96179176111">--}}
        {{--    <img src="{{asset('images/service-call.png')}}" style="max-width: 100%;">--}}
        {{--</a>--}}
        {{--                            --}}{{--                            <div class="service-details__need-help-bg" style="background-image: url(assets/images/backgrounds/service-details-need-help-bg.jpg)">--}}
        {{--                            </div>--}}
        {{--                            <div class="service-details__need-help-icon">--}}
        {{--                                <img style="height: 85px; width: 85px;" src="{{asset('front/assets/images/favicons/arabia-mobiles-colored.png')}}" alt="">--}}
        {{--                            </div>--}}
        {{--                            <h2 class="service-details__need-help-title">Easy solutions <br> to your tech <br> problem</h2>--}}
        {{--                            <div class="service-details__need-help-contact">--}}
        {{--                                <p>Have any question?</p>--}}
        {{--                                <a href="tel:980009850"> <span>Free</span> +961 1 880 850</a>--}}
        {{--                            </div>--}}
        {{--                        </div>--}}
        {{--                    </div>--}}
        {{--                </div>--}}
        {{--                <div class="col-xl-8 col-lg-7">--}}
        {{--                    <div class="service-details__right">--}}
        {{--                        <div class="service-details__img text-center">--}}
        {{--                            <h3 class="service-details__content-title">{{$serviceDetail->title}}</h3>--}}
        {{--                            <img style="width: 60%;margin: auto" src="{{asset($serviceDetail->service_photo_details)}}" alt="">--}}
        {{--                        </div>--}}
        {{--                        <div class="service-details__content">--}}
        {{--                        {!! $serviceDetail->description !!}--}}
        {{--                        </div>--}}
        {{--                        <ul class="list-unstyled service-details__points">--}}
        {{--                            <li>--}}
        {{--                                <div class="service-details__points-icon">--}}
        {{--                                    <span class="icon-customer-service"></span>--}}
        {{--                                </div>--}}
        {{--                                <h4 class="service-details__points-title">{{$serviceDetail->value_one}}</h4>--}}
        {{--                            </li>--}}
        {{--                            <li>--}}
        {{--                                <div class="service-details__points-icon">--}}
        {{--                                    <span class="icon-market-analysis"></span>--}}
        {{--                                </div>--}}
        {{--                                <h4 class="service-details__points-title">{{$serviceDetail->value_two}}</h4>--}}
        {{--                            </li>--}}
        {{--                            <li>--}}
        {{--                                <div class="service-details__points-icon">--}}
        {{--                                    <span class="icon-technical-support"></span>--}}
        {{--                                </div>--}}
        {{--                                <h4 class="service-details__points-title">{{$serviceDetail->value_three}}</h4>--}}
        {{--                            </li>--}}
        {{--                        </ul>--}}
        {{--                    </div>--}}
        {{--                </div>--}}
        {{--            </div>--}}
        {{--        </div>--}}
        {{--    </section>--}}
        <!--Service Details End-->

@endsection