@extends('layouts.app')
@section('head')
    <link rel="stylesheet" href="{{ asset('css/owl.carousel.min.css') }}">
@endsection
@section('content')
@include('components.breadcrumbs')
<div class="container">
    @if ($errors->any())
        <div class="alert alert-danger flex green-btn space-between">
          <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
    @endif
    @if (Session::has('success'))
        <br>
        <div class="alert alert-success flex green-btn space-between" >
          <p>{{ Session::get('success') }}</p>
        </div>
    @endif
</div>
{{-- @if (Session::has('success'))
    <p id="evaluate-form"></p>
    <div class="container" >
        <br>
        <div class="alert alert-success flex green-btn space-between" >
          <p>{{ Session::get('success') }}</p>
        </div>
        <br>
    </div>
@endif --}}
<div class="container inner-page plans">
    <div class="programme flex flex-row flex-wrap">
        <form class="" action="{{route('connection.store', ['language'=>app()->getLocale()])}}" method="post">
          @csrf
          <div class="left bg-white" >
              <h3 class="flex flex-row space-between">
                  <span>{{__('site.calculate_price')}} </span>
                  <span><svg width="21" height="24" viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.75 0H2.25C1.05 0 0 1.05 0 2.25V21.75C0 22.95 1.05 24 2.25 24H18.75C19.95 24 21 22.95 21 21.75V2.25C21 1.05 19.95 0 18.75 0ZM6 20.4C6 20.7 5.7 21 5.4 21H3.6C3.3 21 3 20.7 3 20.4V18.6C3 18.3 3.3 18 3.6 18H5.4C5.7 18 6 18.3 6 18.6V20.4ZM6 14.4C6 14.7 5.7 15 5.4 15H3.6C3.3 15 3 14.7 3 14.4V12.6C3 12.3 3.3 12 3.6 12H5.4C5.7 12 6 12.3 6 12.6V14.4ZM12 20.4C12 20.7 11.7 21 11.4 21H9.6C9.3 21 9 20.7 9 20.4V18.6C9 18.3 9.3 18 9.6 18H11.4C11.7 18 12 18.3 12 18.6V20.4ZM12 14.4C12 14.7 11.7 15 11.4 15H9.6C9.3 15 9 14.7 9 14.4V12.6C9 12.3 9.3 12 9.6 12H11.4C11.7 12 12 12.3 12 12.6V14.4ZM18 20.4C18 20.7 17.7 21 17.4 21H15.6C15.3 21 15 20.7 15 20.4V12.6C15 12.3 15.3 12 15.6 12H17.4C17.7 12 18 12.3 18 12.6V20.4ZM18 8.4C18 8.7 17.7 9 17.4 9H3.6C3.3 9 3 8.7 3 8.4V3.6C3 3.3 3.3 3 3.6 3H17.4C17.7 3 18 3.3 18 3.6V8.4Z" fill="#E7E7E7"/></svg></span>
              </h3>
              <p>
                  <span class="name">{{__('site.plans')}} <mytext class="plan-price-html"></mytext> </span> <br>
                  <span class="plan-no-selected">{{__('site.no_selected')}}</span>
                  <span class="plan-selected" style="display: none"></span>
                  <input type="hidden" name="plan_id" value="">
                  <input type="hidden" name="plan_price" value="0">
              </p>
              <p>
                  <span class="name">{{__('site.equips')}} <mytext class="equip-price-html"></mytext> </span> <br>
                  <span class="equip-no-selected">{{__('site.no_selected')}}</span>
                  <span class="equip-selected" style="display: none"></span>
                  <input type="hidden" name="equipment_id" value="">
                  <input type="hidden" name="equipment_price" value="0">
                    <!-- @foreach($equips as $equip)
                        <label for="equipment{{$equip->id}}">{{$equip->getTitleAttribute()}} - {{$equip->price}} {{__('site.sum')}}</label>
                      <input type="checkbox"id="equipment{{$equip->id}}" style="float: right" name="equipment" value="">
                    @endforeach -->
              </p>
              <p>
                  <span class="name">{{__('site.other_services')}} <mytext class="service-price-html"></mytext> </span> <br>
                  <span class="service-no-selected">{{__('site.no_selected')}}</span>
                  @foreach($services as $service)
                    <label id="ser{{$service->id}}" style="display: none" for="service{{$service->id}}"><span>{{ $service->getTitleAttribute() }} - {{$service->customer_price}} {{__('site.sum')}} </span>
                    <input type="hidden" name="service{{$service->id}}" id="plan_service{{$service->id}}" name="service" value="{{$service->id}}"></label>
                  @endforeach
                    <input type="hidden" name="service_id" value="" multiple>
                  <input type="hidden" name="service_price" value="0">
              </p>
              <p>
                  <span class="name">{{__('site.period')}}</span> <br>
                  <button type="button" class="month" id="month1">1 {{__('site.month')}}</button><button type="button" class="month" id="month2">3 {{__('site.month')}}</button><button type="button" class="month" id="month3">6 {{__('site.month')}}</button><button type="button" class="month" id="month4">12 {{__('site.month')}}</button> <br>
                  <!-- <span class="red">{{__('site.discount_30')}}</span> -->
              </p>
              <div class="name_for_connect">
                <p class="red">{{(__('site.name'))}}*</p>
                <input type="text" name="name" placeholder="{{(__('site.write_name'))}}" required>
                <br>
                <p class="red">
                    {{(__('site.phone_number'))}}*
                </p>
                <input type="text" name="phone" placeholder="+998" required>
              </div>
              <!-- <p class="flex flex-row space-between align-center">
                  <b  class="total"   style="display: none">{{__('site.total')}}: 544 000 {{__('site.sum')}}</b>
                  <button type="submit" class="submit-active" id="connect_submit" name="button">{{__('site.connection')}}</button>
                  <a class="text-uppercase text-decoration-none green-btn" id="connection" href="">{{__('site.connection')}}</a>
              </p> -->
              <p>
                    Cформированная цена при расчёте стоимости может меняться в зависимости от необходимого оборудования и дополнительных материалов при подключении
                </p>
          </div>
        </form>
        <div class="right">
            <h2 class="text-uppercase page-title">{{(__('site.plans'))}}</h2>
            <div class="show bg-white">
                @foreach ($plans as $p)
                    <div class="hour">
                        <div class="flex flex-row flex-wrap space-between align-center">
                            <div class="flex flex-row align-center clickable" onclick="openPlan(this)">
                                <input type="hidden" name="" class="plan_name" id="planname{{$p->id}}" value="{{$p->getTitleAttribute()}}">
                                <input type="hidden" name="" class="plan_id" id="planid{{$p->id}}" value="{{$p->id}}">
                                <input type="hidden" name="" class="plan_price" id="planprice{{$p->id}}" value="{{$p->customer_price}}">
                                <span class="right-arrow"></span>&nbsp;
                                <span class="name">{{$p->getTitleAttribute()}}</span>
                                <span class="count">{{count($p->channels)}} {{(__('site.channels'))}}</span>
                                @if($p->services()->exists())
                                  <span class="count">{{count($p->services)}} {{(__('site.services'))}}</span>
                                @endif
                                <span class="price">{{$p->customer_price}} {{__('site.sum')}}</span>
                            </div>
                            <a class="green-btn" id="choose{{$p->id}}" href="">{{__('site.choose')}}</a>
                        </div>
                        <div class="flex-row flex-wrap description ">
                            @foreach ($p->channels   as $ch)
                                <div class="channel">
                                    @php $image = explode(':', $ch->image) @endphp
                                    @if($image[0]=='http' || $image[0]=='https')
                                      <img src="{{$ch->image}}" alt="" width="60px">
                                    @else
                                      <img src="{{ asset('images') }}/{{$ch->image}}" alt="" width="60px">
                                    @endif
                                    <span>{{$ch->title_ru}}</span>
                                </div>
                            @endforeach
                        </div>
                        <hr>
                        <div class="flex-row flex-wrap description ">
                            @foreach ($p->services   as $service)
                                <div class="channel">
                                    <img src="{{ asset('images') }}/{{$service->image}}" alt="" width="60px">
                                    <span>{{$service->getTitleAttribute()}}</span>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
            <br>
            <div class="flex flex-row space-between  flex-wrap">
                <div class="flex align-center title">
                    {{__('site.equipment_and_others')}}
                </div>
                <div class="flex flex-row flex-wrap owl-carousel" id="shows">
                    @foreach ($equips  as $e)
                        <div class="equip-block bg-white">
                            <div class="text">
                                <img src="{{ asset('images') }}/{{$e->preview_image}}" alt="">
                                <h4>{{$e->getTitleAttribute()}}</h4>
                                <p class="red">{{$e->price}} {{(__('site.sum'))}}</p>
                            </div>
                            <hr>
                            <div class="checkthis">
                                <label class="custom-checkbox"> {{(__('site.choose'))}}
                                  <input type="checkbox" id="equipment{{$e->id}}">
                                  <span class="checkmark"></span>
                                </label>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="flex align-center title">
                {{__('site.other_services')}}
            </div>
            <div class="show">
                @foreach($services as $s)
                    <p class="service space-between flex flex-row">
                        <label class="custom-checkbox"> {{$s->getTitleAttribute()}}
                          <input type="checkbox" id="service{{$s->id}}">
                          <span class="checkmark"></span>
                        </label>
                        <span class="price">{{$s->customer_price}} {{__('site.sum')}}</span>
                    </p>
                @endforeach
            </div>
            <br><br>
            {!!$setting->getPlanAttribute()!!}

            {{-- <p>
                <span class="red">*Примечание</span> - Таким образом начало повседневной работы по формированию позиции позволяет оценить значение дальнейших направлений развития.
            </p>
            <p>
                <span class="red">**Примечание</span> - Задача организации, в особенности же реализация намеченных плановых заданий позволяет оценить значение форм развития. Не следует, однако забывать, что сложившаяся структура организации требуют от нас анализа систем массового участия. Задача организации, в особенности же укрепление и развитие структуры позволяет оценить значение систем массового участия. Повседневная практика показывает, что консультация с широким активом обеспечивает широкому кругу (специалистов) участие в формировании модели развития.
            </p>
            <p>
                <span class="red">***Примечание</span> - Таким образом начало повседневной работы по формированию позиции позволяет оценить значение дальнейших направлений развития.
            </p> --}}

        </div>
    </div>
</div>
@endsection
@section('foot')
@include('include.connection')
    <script>
        function openPlan(ele) {
            if($(ele).children('span.right-arrow').hasClass('active')) {
                $(".hour").removeClass("active");
                $(".right-arrow").removeClass("active");
            } else {
                $(".hour").removeClass("active");
                $(".right-arrow").removeClass("active");
                $(ele).parent().parent().addClass("active");
                $(ele).children('span.right-arrow').addClass("active");
            }
        }
    </script>
    <script src="{{ asset('js/owl.carousel.min.js') }}"></script>
    <script>
        $(document).ready(function(){
            $('#shows').owlCarousel({
                loop:false,
                center: true,
                margin:10,
                items:5,
                nav:true,
                dots:false,
                responsiveClass:true,
                responsive:{
                    0:{
                        items:1,
                        nav:true
                    },
                    450:{
                        items:2,
                        nav:true
                    },
                    600:{
                        items:3,
                        nav:true
                    },
                    767:{
                        items:3,
                        nav:true
                    },
                    1000:{
                        items:4,
                        nav:true
                    },
                    1200:{
                        items:4,
                        nav:true
                    },
                    1700:{
                        items:5,
                        nav:true
                    }
                }
            });
        });
    </script>
@endsection