@extends('layouts.app',['title'=>$title])
@section('content')
<div class="main-content" id="result">

    <div class="page-content">
        <div class="container-fluid">
            <!-- start page title -->
            <div class="row gutter-x">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="mb-0 font-size-18">Pricing plans</h4>
                    </div>
                </div>
            </div>
            <!-- end page title -->
            {{-- <div class="row gutter-x">
                <div class="col-lg-12">
                    @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif

                    @if (session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                    @endif
                </div>
            </div> --}}
            <div class="row pricing-card gutter-x">
                  <!--<div class="switch top-switch d-flex align-items-center justify-content-center">
                    <label class="">
                        <div><h4 class="mb-0">Monthly/Yearly</h4></div>
                      <div>  <input type="checkbox" id="togglePlan">
                        <span class="slider"></span></div>
                    </label>
                  </div>-->
               <div class="pricing-tables row gutter-x">
                @foreach($plans as $plan)
                <div class="col-md-4 {{$plan->type=="monthly" ? "monthly-plan1  dark-bg p-3   monthlyplan1 " : ($plan->type=="yearly" ? "yearly-plan1 dark-bg p-3" : "dark-grey p-3")}}" style="{{$plan->type=="yearly" ? "display:block;" : "display:block;"}}">
                    <div class="plan-box plan-box-inner">
                        <div class="">
                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <h3 class="text-white">{{$plan->title}}</h3>
                                    <p>{{$plan->subtitle}}</p>
                                </div>
                                <div class="flex-shrink-0 ms-3">
                                    <form method="post" action="{{route('pricing_plans.toggleEnable',['id'=>$plan->id])}}">
                                        @csrf
                                        <div class="form-check form-switch">
                                            <input class="form-check-input show_confirm_message"  data-confirm-msg="Are you sure that  {{ $plan->is_enabled ? 'you want to disable this plan?' : 'you want to enable this plan?'}}" @if($plan->is_enabled) checked @endif type="checkbox" id="toggleSwitch">
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="pricing-inner">
                                <p class="price mb-0">$ {{$plan->price}}
                                    @if($plan->type=="monthly")
                                    / <sup>Per month</sup>
                                    @elseif($plan->type=="yearly")
                                    / <sup>Per year</sup>
                                    @endif
                                </p>
                                <p class="below_price_title">
                                    {{$plan->below_price_title}}
                                </p>
                            </div>
                            
                            <div class="plan-features">
                                @php
                                    $features_labels=[];
                                    foreach($plan->features_labels ?? [] as $feature_label){
                                        $features_labels[] = $feature_label;
                                    }
                                @endphp
                                @foreach($plan->features ?? [] as $key=>$feature)
                                <div class="price-details">
                                <p class="mb-2 fw-bold">{{@$features_labels[$key]}}</p>
                                <p class="d-flex align-items-center gap-2">
                                    <img src="/assets/images/star.svg" alt="icon"> {{$feature}}
                                </p>
                               
                                </div>
                                @endforeach
                            </div>
                            <div class="text-center plan-btn">
                                <a href="{{route('pricing_plans.edit',['id'=>$plan->id])}}" class="btn btn-primary btn-sm waves-effect waves-light edit-plan-btn button-text">Edit</a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
                </div>
            </div>
        </div> <!-- container-fluid -->
    </div>
    @include('partials.modals.confirm_modal')
</div>
@endsection
@push('topcss')
<link href="{{ asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<style>
    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }

    .switch input {
      display: none;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0;
      right: 0; bottom: 0;
      background-color: #ccc;
      transition: 0.4s;
      border-radius: 34px;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 26px; width: 26px;
      left: 4px; bottom: 4px;
      background-color: white;
      transition: 0.4s;
      border-radius: 50%;
    }

    input:checked + .slider {
      background-color: #2196F3;
    }

    input:checked + .slider:before {
      transform: translateX(26px);
    }
</style>

@endpush
@push('scripts')
<script>
    var clicked_confirm_action = null;

    $(".show_confirm_message").click(function(e) {
        e.preventDefault();

        clicked_confirm_action = $(this);

        $("#confirmModal").find(".modal-body").html($(this).attr("data-confirm-msg"));

        $("#confirmModal").modal("show");



    })
    $("#confirmYesBtn").click(function() {
        clicked_confirm_action.closest("form").submit();
    })
    const toggle = document.getElementById('togglePlan');
    

    /*toggle.addEventListener('change', function () {
      if (this.checked) {
        $(".monthly-plan").hide();
        $(".yearly-plan").show();
      } else {
        $(".monthly-plan").show();
        $(".yearly-plan").hide();
      }
    });*/
</script>
@endpush