@extends('layouts.app')
@section('title') {{'Add Business Subscription Plans'}} @endsection

@section('content')
      <!-- breadcrumb -->
      <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
          <h4 class="page-title">Add Business Subscription Plans</h4>
          <ol class="breadcrumb">
          <li class="breadcrumb-item">
            @if(Auth::user()->role_id == 1)
            <a href="{{ route('backend.dashboard') }}">Admin Dashboard</a>
            @else
            <a href="{{ route('backend.business.dashboard') }}">Business Dashboard</a>
            @endif
            </li>
            <li class="breadcrumb-item"><a href="{{ route('pricingplans.list') }}">Business Subscription Plans</a></li>
            <li class="breadcrumb-item active" aria-current="page"> <a href="javascript:void(0);">Add Business Subscription Plans</a></li>
          </ol>
        </div>
      </div>
      <!-- breadcrumb -->
      <!--Row-->
      <div class="row">
        <div class="col-lg-12 col-md-12">
          <div class="card">
            <div class="card-body">
                <form method="POST" action="{{ route('pricingplans.store') }}" class="form-horizontal" id="pricingPlanForm" role="form" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="mb-3">
                                <label for="plan" class="form-label">Plan</label> <span class="required_compulsary">*</span>
                                <select id="name" name="name" required class="form-select">
                                <option value="">-- Please Select Plan --</option>
                                    <option value="Starter">Starter</option>
                                    <option value="Pro">Pro</option>
                                    <option value="Advanced">Advanced</option>
                                </select>
                            </div>
                
                            <div class="mb-3">
                                <label for="monthly_price" class="form-label">Description</label> <span class="required_compulsary">*</span>
                                <textarea name="description" class="form-control" id="description" cols="10" rows="5"></textarea>
                            </div>
                
                            <div class="mb-3">
                                <label for="monthly_price" class="form-label">Price per Month</label> <span class="required_compulsary">*</span>
                                <input type="text" id="monthly_price" name="monthly_price" required class="form-control">
                            </div>
                
                            <div class="mb-3">
                                <label for="annual_price" class="form-label">Price per Year</label> <span class="required_compulsary">*</span>
                                <input type="text" id="annual_price" name="annual_price" required class="form-control">
                            </div>
                
                            <div class="mb-3">
                                <label for="saving_on_annual_plan" class="form-label">Saving (by choosing the annual plan)</label> <span class="required_compulsary">*</span>
                                <input type="text" id="saving_on_annual_plan" name="saving_on_annual_plan" required class="form-control">
                            </div>
                
                            <div class="mb-3">
                                <label for="first_year_discount" class="form-label">Discount for the first year</label> <span class="required_compulsary">*</span>
                                <input type="text" id="first_year_discount" name="first_year_discount" required class="form-control">
                            </div>
                
                            <div class="mb-3">
                                <label for="discount_price" class="form-label">Discounted price</label> <span class="required_compulsary">*</span>
                                <input type="text" id="discount_price" name="discount_price" required class="form-control">
                            </div>
    
                            <div class="mb-3">
                                <label for="monthly_price_first_year" class="form-label">Price per Year</label> <span class="required_compulsary">*</span>
                                <input type="text" id="monthly_price_first_year" name="monthly_price_first_year" required class="form-control">
                            </div>
                        </div>
    
                        <div class="col-lg-6">
                
                            <div class="mb-3">
                                <label for="saving_on_annual_plan_first_year" class="form-label">Saving (by choosing the annual plan)</label> <span class="required_compulsary">*</span>
                                <input type="text" id="saving_on_annual_plan_first_year" name="saving_on_annual_plan_first_year" required class="form-control">
                            </div>
    
                            <div class="row mb-3">
                            <label for="plan" class="form-label">Data Access</label>
                            <div class="col-md-12">
                                <div class="form-check form-check-inline">
                                <input class="form-check-input data-access" type="checkbox" id="can_access_demographics" name="can_access_demographics" value="yes">
                                <label class="form-check-label" for="can_access_demographics">Demographics</label>
                                </div>
                                <div class="form-check form-check-inline">
                                <input class="form-check-input data-access" type="checkbox" id="can_access_economy" name="can_access_economy" value="yes">
                                <label class="form-check-label" for="can_access_economy">Economy</label>
                                </div>
                                <div class="form-check form-check-inline">
                                <input class="form-check-input data-access" type="checkbox" id="can_access_infrastructure" name="can_access_infrastructure" value="yes">
                                <label class="form-check-label" for="can_access_infrastructure">Infrastructure</label>
                                </div>
                                <div class="form-check form-check-inline">
                                <input class="form-check-input data-access" type="checkbox" id="can_access_regulation" name="can_access_regulation" value="yes">
                                <label class="form-check-label" for="can_access_regulation">Regulation</label>
                                </div>
                            </div>
                            </div>
                            
                            <p class="note error" style="display: none;">Please check at least one option for data access</p>
    
                            <div class="row mb-3">
                            <label for="plan" class="form-label">Coverage Access</label>
                            <div class="col-md-12">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input coverage-access" type="checkbox" id="can_access_us_data" name="can_access_us_data" value="yes">
                                    <label class="form-check-label" for="can_access_us_data">US</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input coverage-access" type="checkbox" id="can_access_global_data" name="can_access_global_data" value="yes">
                                    <label class="form-check-label" for="can_access_global_data">Global</label>
                                </div>
                            </div>
                            </div>
    
                            <p class="note2 error" style="display: none;">Please check at least one option for coverage access</p>
    
                            <div class="row mb-3">
                            <label for="plan" class="form-label">Business Insights</label>
                            <div class="col-md-12">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input business-insights" type="checkbox" id="can_access_profile" name="can_access_profile" value="yes">
                                    <label class="form-check-label" for="can_access_profile">Profiles</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input business-insights" type="checkbox" id="can_access_need" name="can_access_need" value="yes">
                                    <label class="form-check-label" for="can_access_need">Needs</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input business-insights" type="checkbox" id="can_access_contact" name="can_access_contact" value="yes">
                                    <label class="form-check-label" for="can_access_contact">Contacts</label>
                                </div>
                            </div>
                            </div>
    
                            <p class="note3 error" style="display: none;">Please check at least one option for business insights</p>
    
                            <div class="row mb-3">
                            <label for="plan" class="form-label">Engagement</label>
                            <div class="col-md-12">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input engagement" type="checkbox" id="can_access_chat" name="can_access_chat" value="yes">
                                    <label class="form-check-label" for="can_access_chat">Direct Chat</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input engagement" type="checkbox" id="can_access_call" name="can_access_call" value="yes">
                                    <label class="form-check-label" for="can_access_call">Book a Call</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input engagement" type="checkbox" id="can_access_news" name="can_access_news" value="yes">
                                    <label class="form-check-label" for="can_access_news">News</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input engagement" type="checkbox" id="can_access_rating_review" name="can_access_rating_review" value="yes">
                                    <label class="form-check-label" for="can_access_rating_review">Ratings and Reviews</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input engagement" type="checkbox" id="can_access_social_media_integration" name="can_access_social_media_integration" value="yes">
                                    <label class="form-check-label" for="can_access_social_media_integration">Social media integration</label>
                                </div>
                            </div>
                            </div>
                        
                            <p class="note4 error" style="display: none;">Please check at least one option for engagement</p>
    
                            <label for="plan" class="form-label">Users</label>
            
                            <div class="mb-3">
                                <label for="free_user_seat" class="form-label">Free user seats</label> <span class="required_compulsary">*</span>
                                <input type="text" id="free_user_seat" name="free_user_seat" required class="form-control">
                            </div>
            
                            <div class="mb-3">
                                <label for="price_per_seat" class="form-label">Price per seat</label> <span class="required_compulsary">*</span>
                                <input type="text" id="price_per_seat" name="price_per_seat" required class="form-control">
                            </div>
            
                            <label for="plan" class="form-label">Trial</label>
            
                            <div class="mb-3">
                                <label for="trial_period_in_day" class="form-label">Sign up</label> <span class="required_compulsary">*</span>
                                <input type="text" id="trial_period_in_day" name="trial_period_in_day" required class="form-control">
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-primary" type="submit">Submit form</button>
                    <button type="button" class="btn btn-danger" id="cancelBtn">Cancel</button>
                </form>
            </div>
          </div>
        </div>
      </div>
      <!--/Row-->
    @push('scripts')
    <script type="text/javascript">
        $(document).ready(function() {
            $('.data-access').change(function() {
                if ($('.data-access').filter(':checked').length >= 1) {
                    $(".note").hide();
                }
            });

            $('.coverage-access').change(function() {
                if ($('.coverage-access').filter(':checked').length >= 1) {
                    $(".note2").hide();
                }
            });

            $('.business-insights').change(function() {
                if ($('.business-insights').filter(':checked').length >= 1) {
                    $(".note3").hide();
                }
            });

            $('.engagement').change(function() {
                if ($('.engagement').filter(':checked').length >= 1) {
                    $(".note4").hide();
                }
            });

        $('#pricingPlanForm').submit(function(event) {
            var errorsFound = false;
            
            if ($('.data-access').filter(':checked').length < 1) {
                $(".note").show();
                errorsFound = true;
            } else {
                $(".note").hide();
            }

            if ($('.coverage-access').filter(':checked').length < 1) {
                $(".note2").show();
                errorsFound = true;
            } else {
                $(".note2").hide();
            }

            if ($('.business-insights').filter(':checked').length < 1) {
                $(".note3").show();
                errorsFound = true;
            } else {
                $(".note3").hide();
            }

            if ($('.engagement').filter(':checked').length < 1) {
                $(".note4").show();
                errorsFound = true;
            } else {
                $(".note4").hide();
            }

            if (errorsFound) {
                event.preventDefault(); // Prevent form submission
            } else {
                $("#pricingPlanForm").unbind('submit').submit(); // Submit the form if no errors
            }
        });

        $("#pricingPlanForm").validate({
            rules: {
                name: 'required',
                monthly_price: 'required',
                annual_price: 'required',
                saving_on_annual_plan: 'required',
                first_year_discount: 'required',
                discount_price: 'required',
                monthly_price_first_year: 'required',
                saving_on_annual_plan_first_year: 'required',
                free_user_seat: 'required',
                price_per_seat: 'required',
                trial_period_in_day: 'required',
            },
            messages: {
                name: 'Please select a plan',
                monthly_price: 'Please enter the price per month',
                annual_price: 'Please enter the price per year',
                saving_on_annual_plan: 'Please enter the saving for annual plan',
                first_year_discount: 'Please enter the discount for the first year',
                discount_price: 'Please enter the discounted price',
                monthly_price_first_year: 'Please enter the second price per year',
                saving_on_annual_plan_first_year: 'Please enter the second saving for annual plan',
                free_user_seat: 'Please enter the number of free user seats',
                price_per_seat: 'Please enter the price per seat',
                trial_period_in_day: 'Please enter the trial sign-up information',
            }
        });

        $("#cancelBtn").click(function () {
            window.location.href = "{{route('pricingplans.list')}}";
        });
        });
      </script> 
    @endpush
@endsection