@extends('layouts.app',['title'=>$title])
@section('content')
<div class="main-content" id="result">
    
    <div class="page-content edit-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">Edit 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="edit-plan-form" method="post" action="{{route('pricing_plans.update', $plan->id)}}" autocomplete="off" class="needs-validation">
                @csrf   
                @method('PUT')

                <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', $plan->title)}}" 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', $plan->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">
                                    <label for="price" class="form-label">Price $</label>
                                    
                                    <input id="price" readonly value="{{old('price', $plan->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('below_price_title', $plan->below_price_title)}}" 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', implode(',', $plan->features_labels ?? [])) }}">
                                    @error('features_labels')
                                        <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', implode(' | ', $plan->features ?? [])) }}">
                                    @error('features')
                                        <div class="text-danger mt-2">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!--<div class="form-check mb-3">
                                    <input type="checkbox" name="is_enabled" class="form-check-input" id="enabledCheckbox"
                                        {{ $plan->is_enabled ? 'checked' : '' }}>
                                    <label class="form-check-label" for="enabledCheckbox">Enabled</label>
                                </div>-->
                                                        
                                
                            </div>
                            <!-- end card body -->
                        </div>
                        <!-- end card -->
                        
                    </div>
                    

                    <div class="col-lg-8  offset-lg-2">
                        <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">Update plan</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).");


		$("#edit-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