@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">Edit plans</h3>
        </div>

        <form method="POST" id="edit_plans" role="form" action="{{ route('plans.update', $plans->id) }}"
            class="jqueryValidation" enctype="multipart/form-data">
            @csrf
            @method('PATCH')
            <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="{{ $plans->icon }}" />
                </div> --}}
                <div class="form-group">
                    <label for="image">Image</label>
                    <input type="file" class="form-control" id="image" name="image" placeholder="" required >
                </div>
                <div class="form-group">
                    <label for="title">Name</label>
                    <x-adminlte-input class="form-control" id="name" name="name" placeholder="Enter name"
                        value="{{ $plans->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="{{ $plans->key }}" required />
                </div>

                <div class="form-group">
                    <label for="description">Description</label>
                    <x-adminlte-input type="text" class="form-control" id="description" name="description"
                        placeholder="Enter description" value="{{ $plans->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 }}" 
                                        {{ in_array($plan->id, $selectedFeatures) ? 'selected' : '' }}>
                                        {{ $plan->title }}
                                    </option>
                                @endforeach
                            </select>
                            {{-- <select class="form-control" name="features" id="">
                                <option value="">--Select--</option>
                                @foreach ($pricingPlans as $plan)
                                    <option value="{{ $plan->id }}" {{ $plan->title ? 'Selected' : '' }}>
                                        {{ $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="{{ $plans->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="{{ $plans->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"
                                {{ $plans->is_test == 1 ? '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 }}"
                                    {{ $plan->Status == App\Models\Plan::INACTIVE ? 'selected' : '' }}>InActive</option>
                                <option value="{{ App\Models\Plan::ACTIVE }}"
                                    {{ $plan->Status == 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">Update</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