@extends('layouts.master')
@section('title', 'Change Plan')
@section('content')
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header pb-0">
                        <div class="row">
                            <div class="row">
                                <div class="col-md-12">
                                    <h6 class="mb-0">Change Plan</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body px-3 pt-4 pb-2">
                        <form action="{{ route('profile.plan.update') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <label class="form-label" for="plan_id">Subscription Plan</label>
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="plan_id" @checked(old('plan_id', $plan->id) == 1) id="inlineRadio1" value="1">
                                    <label class="form-check-label" for="inlineRadio1">Free</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="plan_id" id="inlineRadio2" @checked(old('plan_id', $plan->id) == 2) value="2">
                                    <label class="form-check-label" for="inlineRadio2">Business  (9,95/month, 30 days free, cancel anytime)</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="plan_id" id="inlineRadio3" @checked(old('plan_id', $plan->id) == 3) value="3">
                                    <label class="form-check-label" for="inlineRadio3">PRO (29,95/month, 30 days free, cancel anytime)</label>
                                </div>
                            </div>
                            @error('plan_id')
                            <span class="invalid_feedback">
                                            <strong class="text-danger text-sm">{{ $message }}</strong>
                                        </span>
                            @enderror
                            <div class="d-flex justify-content-end">
                                <button type="button" data-id="{{ $plan->id }}" class="btn confirm-save btn-primary btn-block mb-4 me-2">Save</button>
                                <a class="btn btn-secondary btn-block mb-4" href="{{ route('dashboard') }}">Cancel</a>
                            </div>
                        </form>
                        <span id="uploaded_image"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>

        $(document.body).on("click", ".confirm-save", function(event) {

            event.preventDefault();
            var form =  $(this).closest("form");
            let currentPlanId = $(this).data('id');
            let newPlanId = form.find('[name="plan_id"]:checked').val();

            if(currentPlanId != newPlanId) {
                swal({
                    title: `Are you sure you want to change the plan?`,
                    text: "This action will immediately cancel your previous subscription.",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                }).then((willChange) => {
                    if (willChange) {
                        form.submit();
                    }
                });
            } else {
                form.submit();
            }
        });
    </script>
@endpush