@extends('admin.layout')
@section('content')
    <!-- Content Header (Page header) -->
    @php
    $rtl = App\Language::where('code', App::getLocale())->first()->rtl;
    @endphp

    <!-- Start Css Code custem  -->

    <div class="content-header">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="page-title">
                    {{ $rtl == true ? $service['service']['title_ar'] : $service['service']['title_en'] }}</h3>
                <div class="d-inline-block align-items-center">
                    <nav>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('dashboard') }}">
                                    <i class="fa fa-home"></i>
                                </a>
                            </li>

                            <li class="breadcrumb-item" aria-current="page">
                                <a href="{{ route('Addon.AddHook') }}">
                                    {{ translate('Apps and Services') }}
                                </a>
                            </li>


                            <li class="breadcrumb-item" aria-current="page">
                                <a href="{{ route('Addon.services') }}">
                                    {{ translate('services') }}
                                </a>
                            </li>
                            <li class="breadcrumb-item" aria-current="page">
                                {{ $rtl == true ? $service['service']['title_ar'] : $service['service']['title_en'] }}
                            </li>

                        </ol>
                    </nav>
                </div>
            </div>

        </div>
    </div>

    <!-- Main content -->
    <section class="content">


        <div class="row">
            <div class=" col-xl-1 col-12 ">

            </div>
            <div class="col-xl-10 col-12">
                <div class="row">
                    <div class=" col-xl-8 col-12 ">
                        <div class="box">

                            <div class="box-body">
                                <div class="flexslider2">
                                    <ul class="slides">
                                        {{-- {{ getExternalRouts()['mangerRout'] }}{{ $serviceSliderImage['file_path'] }} --}}
                                        @foreach ($service['service']['service_attach'] as $serviceSliderImage)
                                            <li
                                                data-thumb="{{ getExternalRouts()['mangerRout'] }}{{ $serviceSliderImage['file_path'] }}">
                                                <img src="{{ getExternalRouts()['mangerRout'] }}{{ $serviceSliderImage['file_path'] }}"
                                                    alt="{{ $serviceSliderImage['name'] }}" style="width: 100%;" />
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>

                            <hr />

                            <div class=" b-1 m-10 p-10">
                                <h4 class="page-title orang"> {{ translate('Details') }}</h4>
                                <p class="b-solid ">
                                    {{ $rtl == true ? $service['service']['description_ar'] : $service['service']['description_en'] }}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class=" col-xl-4 col-12 ">
                        <div class="box">

                            <div class="box-body text-center">

                                <h3 style="margin-bottom: 1px;"> {{ $service['service']['price'] }} $</h3>
                                <p>     {{ translate('Implementation period') }} :
                                    {{ $service['service']['duration'] }}
                                    {{ translate($service['service']['duration_type']) }}</p>


                                <div class="row">

                                    <div class=" col-xl-6 col-12 ">
                                        <a href="#" style="background-color: #fb763d"
                                            class="btn btn-rounded btn-dark padding-label-dashbord  template-buttons"
                                            onclick="addToCart({{ $service['service']['id'] }},'service')">{{ translate('Add to cart') }}</a>
                                    </div>
                                    <div class=" col-xl-6 col-12 ">
                                        <a href="{{ route('Addon.purchaseCart') }}"
                                            class="btn btn-rounded btn-dark padding-label-dashbord  template-buttons">
                                            {{ translate('Follow up on the purchase') }}</a>
                                    </div>

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

                        <h4 class="page-title">{{ translate('Products we recommend to you') }} </h4>



                        @foreach ($service['related_services'] as $val)

                    



                            <div class="box box-link-pop text-center module-page">
                                <h5>
                                    {{ $rtl == true ? $val['title_ar'] : $val['title_en'] }}
                                </h5>
                                <div class="bg-img"
                                    style="background-image: url('{{ getExternalRouts()['mangerRout'] }}{{ $val['image'] }}');">
                                    <div class="shopen-card-module">
                                        <a href="#" style="background-color: #fb763d"
                                            class="btn btn-rounded btn-dark padding-label-dashbord  template-buttons"
                                            onclick="addToCart({{ $val['id'] }},'module')">{{ translate('Buy now') }}</a>
                                        <p class="clear" style="margin-top: 20px;">
                                            <a href="{{ route('Addon.singleModules', encrypt($val['id'])) }}"
                                                class="btn btn-rounded btn-dark padding-label-dashbord  template-buttons">
                                                {{ translate('More details') }}</a>

                                        </p>
                                    </div>
                                </div>


                                <div class="row footer-buttons">
                                    <div class="col-md-4 col-4 col-xl-4" style="text-align: initial">
                                        <span>
                                            {{ translate('price') }} :
                                            {{ $val['price'] }} $</span>

                                    </div>
                                    <div class="col-md-8 col-8 col-xl-8" style="text-align: end">
                                        {{ translate('Implementation period') }} :
                                        {{ $val['duration'] }}
                                        {{ translate($val['duration_type']) }}
                                    </div>
                                </div>
                            </div>



                        @endforeach
                    </div>


                </div>
            </div>
            <div class="col-xl-1 col-12">
            </div>
        </div>




    </section>
@endsection

@section('script')
    <!-- Import Slider library -->
    <script src="{{ url('Panel/assets/vendor_plugins/bootstrap-slider/bootstrap-slider.js') }}"></script>
    <script src="{{ url('Panel/assets/vendor_components/flexslider/jquery.flexslider.js') }}"></script>
    <script src="{{ url('Panel/main-semidark/js/pages/slider.js') }}"></script>
    <!-- End Import Slider libary-->

@endsection