@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
<h1>Plans</h1>
<small>Manage Plans</small>
@stop

@section('content')
<div class="card card-dark">
    <div class="card-header">
        <h3 class="card-title">Add plans</h3>
    </div>

    <form method="POST" id="add_plans" role="form" action="{{route('plans.store')}}" class="jqueryValidation" enctype="multipart/form-data">
        @csrf
        <div class="card-body">
            {{-- <div class="form-group">
                <label for="icon">Icon</label>
                <x-adminlte-input class="form-control" id="icon" name="icon" placeholder="Enter icon URL" value="{{ old('icon') }}" />
            </div> --}}
            <div class="form-group">
                <label for="image">Image</label>
                <input type="file" class="form-control" id="image" name="image" placeholder="" required>{{ old('image') }}</input>
            </div>
            <div class="form-group">
                <label for="title">Name</label>
                <x-adminlte-input class="form-control" id="name" name="name" placeholder="Enter name" value="{{ old('name') }}" required />
            </div>
            <div class="form-group">
                <label for="key">Key</label>
                <x-adminlte-input class="form-control" id="key" name="key" placeholder="Enter key" value="{{ old('key') }}" required />
            </div>

            <div class="form-group">
                <label for="description">Description</label>
                <textarea type="text" class="form-control" id="description" name="description" placeholder="Enter description" required>{{ old('description') }}</textarea>

                {{-- <x-adminlte-input type="text" class="form-control" id="description" name="description" placeholder="Enter description" value="{{ old('description') }}" required/> --}}
            </div>

             <div class="form-group">
                <div class= "row">
                    <div class= "col-md-6">
                        <label for="interval">Interval</label>
                        <select class="form-control" id="interval" name="interval">
                        <option value="day">Day</option>
                        <option value="week">Week</option>
                        <option value="month" selected>Month</option>
                        <option value="year">Year</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="features">Features</label>
                        <select class="form-control" name="features[]" id="features" multiple>
                            @foreach($pricingPlans as $plan)
                                <option value="{{ $plan->id }}" 
                                    @if(in_array($plan->id, old('features', []))) selected="selected" @endif>
                                    {{ $plan->title }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    {{-- <div class="col-md-6">
                         <label for="features">Features</label>
                         <select class="form-control" name="features" id="">
                         <option value="">--Select--</option>
                         @foreach($pricingPlans as $plan)
                         <option value="{{$plan->id}}">{{$plan->title}}</option>
                         @endforeach
                        </select>
                    </div> --}}
                </div>
              </div>




             <div class="form-group">
                <div class="row">
                    <div class="col-md-6">
                    <label for="price">Price</label>
                         <x-adminlte-input type="number" class="form-control" id="price" name="price" placeholder="Enter price"  min="0" value="{{ old('price') }}" required/>
                     </div>
                    <div class="col-md-6">
                    <label for="trial_days">Trial_days</label>
                        <x-adminlte-input type="number" class="form-control" id="trial_days" name="trial_days" placeholder="Enter trial_days" min="0" value="{{ old('trial_days') }}" required/>
                    </div>
                </div>
            </div>


             <div class="form-group">
                <div class="row">
                    <div class="col-md-6">
                        <input type="checkbox" id="is_test" name="is_test" value="1" checked {{ old('is_test') == 'on' ? 'checked' : '' }}>
                        <label for="is_test">Is Test</label>
                    </div>
                    <div class="col-md-6">
                    <label for="status">Status</label>
                        <select class="form-control" name="status" id="">
                            <option value="{{App\Models\Plan::INACTIVE}}">InActive</option>
                            <option value="{{App\Models\Plan::ACTIVE}}" selected>Active</option>
                        </select>
                    </div>
                </div>
            </div>


            <div class="card-footer d-flex justify-content-end">
                <a href="{{route('plans.index')}}" class="btn btn-danger mx-1">Cancel</a>
                <button type="submit" class="btn btn-dark mx-1">Submit</button>
            </div>  
       
    
     </form>
    
</div>

@stop
@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
@endpush
@section('js')
<script>
    $(document).ready(function () {
    $("#features").select2({
        tags: true,
        placeholder: 'Select features',
        allowClear: true
    });
});
</script>
@endsection