@extends('layouts.main')
@section('title', 'Nomadic Studios | Plans')
@section('content')
<div class="banner">
    <div class="img-text img-margin">{{__('Join global creatives')}}</div>
    <img class="img-fluid w-100" src="{{asset('images/banner1.png')}}">
</div>

<div class="container" data-aos="fade-up">
    <h2 class="mt-4 mb-4">{{__('Select membership level')}}</h2> 
    <span>- {{__('14 days residence/year')}}</span></br>
    <span>- {{__('14 days studio time/year')}}</span>
    <!-- <form id="changePlanForm"> -->
      <div class="row gy-4 justify-content-center text-center mt-2">
          @foreach($plans as $plan)
          <div class="col-12 col-sm-6 col-lg-2 mb-4">
              <label class="w-100 subscription-box pointer p-3 @if(auth()->user()->membership==$plan->slug) active @endif">
                  <input type="radio" name="plan_id" value="{{$plan->slug}}" class="d-none plan-radio" @if(auth()->user()->membership==$plan->slug) checked @endif>
                  <div class="p-2 mb-4">{{__($plan->name)}}</div>
                  <h3 class="p-2 mb-4"><b>${{$plan->price}}</b><span>/{{__($plan->frequency)}}</span></h3>
                  <div class="p-2"><i class="bi bi-check2 me-2"></i>{{$plan->points}} Pts</div>
                  <div class="p-2"><i class="bi bi-check2 me-2"></i>
                  @if($plan->stripe_plan=="")
                  {{__('Must be invited by member')}}
                  @else
                  {{__('Book up')}} {{$plan->advance_duration}} {{__($plan->advance_frequency)}} {{__('in advance')}}
                  @endif
                  </div>
                  <div class="p-2"><i class="bi bi-check2 me-2"></i>{{$guests[$plan->num_of_guest]}} {{__('guests')}}</div>
                  @if(auth()->user()->membership==$plan->slug)
                  <h3 class="mb-4"><span>Current Plan</span></h3>
                  @endif
              </label>
          </div>
          @endforeach
      </div>

      @if(isset($services) && count($services) > 0)
      <h2 class="mt-4 mb-4">{{__('Select Add-on Services')}}</h2>
      <div class="row gy-4 justify-content-center text-center mt-2">
        @foreach($services as $service)
        <div class="col-12 col-sm-6 col-lg-2 mb-4">
            <label class="w-100 service-box pointer d-block p-3 h-100">
                <input class="form-check-input d-none addon-checkbox" type="checkbox" name="addon_services[]" value="{{$service->slug}}">
                <div class="service-content h-100">
                <div class="mb-2"><strong>{{$service->name}}</strong></div>
                <div class="mb-2" style="font-size:1.3rem;">${{$service->price}}</div>
                <div class="mb-2"><small>{{$service->description}}</small></div>
                </div>
            </label>
        </div>
        @endforeach
      </div>
      @endif

      <div class="text-center mt-4 mb-5">
          <button id="subscribeBtn" type="button" class="btn btn-primary btn-lg px-5" style="display:none;">{{__('Subscribe')}}</button>
      </div>
    <!-- </form> -->
</div>

@endsection
@section('footer_scripts')
<script>
$(function() {
    var initialPlan = $('input[name="plan_id"]:checked').val();
    var initialServices = $('input[name="addon_services[]"]:checked').map(function(){ return this.value; }).get().join(',');

    function checkChanged() {
        var currentPlan = $('input[name="plan_id"]:checked').val();
        var currentServices = $('input[name="addon_services[]"]:checked').map(function(){ return this.value; }).get().join(',');
        if (currentPlan !== initialPlan || currentServices !== initialServices) {
            $('#subscribeBtn').show();
        } else {
            $('#subscribeBtn').hide();
        }
    }

    $(document).on('change', 'input[name="plan_id"], input[name="addon_services[]"]', checkChanged);
    checkChanged();
});
</script>
<style>
.subscription-box.pointer, .service-box.pointer {
    cursor: pointer;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.subscription-box.active {
    border: 2px solid #007bff;
    box-shadow: 0 0 0 2px #007bff33;
    background: #f0f8ff;
}
.service-box {
    min-height: 220px;
    background: #fff;
    border: 1px solid #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.service-box .service-content {
    width: 100%;
    text-align: center;
}
.service-box input[type="checkbox"]:checked ~ .service-content {
    /* font-weight: bold;
    color: #007bff; */
}
/* Highlight the full service box on selection using JS */
.service-box.selected {
    border: 2px solid #007bff;
    box-shadow: 0 0 0 2px #007bff33;
    background: #f0f8ff;
}
</style>
<script>
// Highlight full service box on selection
$(document).on('change', '.service-box input[type="checkbox"]', function() {
    var label = $(this).closest('.service-box');
    if($(this).is(':checked')) {
        label.addClass('selected');
    } else {
        label.removeClass('selected');
    }
});
// Highlight selected plan visually
$(document).on('change', 'input[name="plan_id"]', function() {
    $('.subscription-box').removeClass('active');
    $(this).closest('.subscription-box').addClass('active');
});
$(document).on('click', '#subscribeBtn', function() {
    let plan_id = $('input[name="plan_id"]:checked').val();
    let addon_services = $('input[name="addon_services[]"]:checked').map(function(){ return this.value; }).get();

    window.location.href = APP_URL + "/plans/" + plan_id + "?addon_services=" + addon_services.join(',');
});
</script>
@endsection