@extends('layouts.app',['title'=>"Create pricing plan"])
@section('content')
<div class="main-content" id="result">
    
    <div class="page-content add-price-plan">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="mb-0 font-size-18">Add pricing plan</h4>

                        
                    </div>
                </div>
            </div>    
            {{-- <div class="row">
                <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> --}}
            
            <form id="create-plan-form"  method="post" action="{{route('pricing_plans.save')}}" autocomplete="off" class="needs-validation">
                @csrf   

                <div class="row mt-4">
                    <div class="col-lg-8 offset-lg-2">
                        <div class="card">
                            <div class="card-body">  
                                
                                <div class="mb-3">
                                    <label for="title" class="form-label">Title</label>
                                    
                                    <input id="title" value="{{old('name')}}" name="title" type="text" class="form-control" placeholder="Enter title" required="">
                                    @error('title')
                                        <div class="text-danger mt-2">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="subtitle" class="form-label">Subtitle</label>
                                    
                                    <input id="subtitle" value="{{old('subtitle')}}" name="subtitle" type="text" class="form-control" placeholder="Enter subtitle" required="">
                                    @error('subtitle')
                                        <div class="text-danger mt-2">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3 custom-select-wrapper">
                                    <label for="plan_interval" class="form-label">Interval</label>
                                    
                                    <select class="form-control" name="plan_interval" required>
                                        <option value="">Select</option>
                                        <option value="one-time">One time</option>
                                        <!--<option value="monthly">Monthly</option>-->
                                        <option value="yearly">Yearly</option>
                                    </select>
                                    @error('plan_interval')
                                        <div class="text-danger mt-2">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="price" class="form-label">Price $</label>
                                    
                                    <input id="price"  value="{{old('price')}}" name="price" type="number" class="form-control" placeholder="Enter price" required="">
                                    @error('price')
                                        <div class="text-danger mt-2">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="below_price_title" class="form-label">Below price title</label>
                                    
                                    <input id="below_price_title"  value="{{old('price')}}" name="below_price_title" type="text" class="form-control" placeholder="Enter below price title" >
                                    @error('below_price_title')
                                        <div class="text-danger mt-2">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="features_labels"  class="form-label">Features labels (comma-separated)</label>
                                    <input id="features_labels" type="text" name="features_labels" class="form-control"
                                        value="{{ old('features_labels') }}">
                                    @error('features')
                                        <div class="text-danger mt-2">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-3">
                                    <label for="features"  class="form-label">Features (|-separated)</label>
                                    <input id="features" type="text" name="features" class="form-control"
                                        value="{{ old('features') }}">
                                    @error('features')
                                        <div class="text-danger mt-2">{{ $message }}</div>
                                    @enderror
                                </div>

                                
                                                        
                                
                            </div>
                            <!-- end card body -->
                        </div>
                        <!-- end card -->
                        
                    </div>
                    

                    <div class="col-lg-8  offset-lg-2 plan-create-btn">
                        <div class="text-end mb-4">
                            <a href="{{route('pricing_plans.list')}}" class="btn btn-secondary mx-2">Cancel</a>    
                            <button type="submit" class="btn btn-primary button-text">Save</button>
                        </div>
                    </div>
                </div>
                <!-- end row -->
            </form>
            
        </div> <!-- container-fluid -->
    </div>
</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" />  


@endpush
@push('scripts')
<script src="{{ asset('assets/validate/jquery.validate.min.js')}}"></script>
<script type="text/javascript">
    $(function() {
		
         $.validator.addMethod("validAmount", function (value, element) {
            return this.optional(element) || /^\d+(\.\d{1,2})?$/.test(value);
        }, "Please enter a valid amount (up to 2 decimal places).");


		$("#create-plan-form").validate({
            submitHandler: function(form) {
                // Disable button to prevent duplicate submissions
                $("#submitBtn").prop("disabled", true);
                
                form.submit(); // submit the form after disabling
            },
            rules: {
                title: {
                    required: true
                },
                subtitle: {
                    required: true
                },
                plan_interval:{
                    required: true
                },
                price:{
                    required: true,
                    validAmount: true,
                },
                features:{
                    required: true
                }
            }
        })
	});
</script>
@endpush