@extends('layouts.admin')
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row mt-3 d-flex justify-content-center">
            <div class="col-12 col-lg-6">
            <div class="card shadow">
                <div class="card-header">
                    <h2 class="text-center">{{$data?"Update":"Create"}} Plan</h2>
                </div>
                <div class="card-body">
                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if (session('error'))
                        <div class="alert alert-danger">
                            {{ session('error') }}
                        </div>
                    @endif
                    <form action="{{ $data ? route('plans.update') : route('plans.store') }}" method="POST">
                        @csrf
                        <input type="text" name="edit_id" value="{{$data?$data->id:"" }}" hidden>
                        <div class="form-group mt-0">
                            <label for="plan_name">Plan Name</label>
                            <input type="text" class="form-control p-2" id="name" name="plan_name" value="{{$data? $data->plan_name:''}}" required>
                            @error('plan_name')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group mt-2">
                            <label for="duration">Duration</label>
                           <select class="form-control p-2" name="duration" id="">
                            <option {{$data && $data->duration == 'monthly' ? 'selected' : ''}} >monthly</option>
                            <option {{$data && $data->duration == 'yearly' ? 'selected' : ''}}>yearly</option>
                           </select>
                            @error('duration')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group mt-2">
                            <label for="price">Price</label>
                            <input type="number" class="form-control p-2" id="name" name="price" value="{{$data? $data->price:''}}" required>
                            @error('price')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <button type="submit" class="btn btn-lg mt-3" style="background-color: #DE3996; color: #fff">Save</button>
                    </form>
                </div>
            </div>
        </div>
         </div>
    </div>
    <script>
 $(document).ready(function () {
    $('form').on('submit', function (e) {
        e.preventDefault();

        let formData = new FormData(this);
        let actionUrl = $(this).attr('action');
        let $form = $(this);

        $.ajax({
            url: actionUrl,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                $('.alert').remove();
                $('<div class="alert alert-success">' + (response.message || 'Plan saved successfully!') + '</div>').insertBefore($form);

                $form[0].reset();
                $('[name="edit_id"]').val('');
            },
            error: function (xhr) {
                $('.alert').remove();
                $('.text-danger').remove();

                if (xhr.status === 422) {
                    let errors = xhr.responseJSON.errors;
                    for (let key in errors) {
                        let field = $('[name="' + key + '"]');
                        field.after('<span class="text-danger">' + errors[key][0] + '</span>');
                    }
                } else {
                    $('<div class="alert alert-danger">Something went wrong!</div>').insertBefore($form);
                }
            }
        });
    });
});
</script>
@endsection