@extends('Front.PatientLayout.mainLayout')
@section('title', 'Delete Account')
@section('content')
    <div class="container-fluid p-0 m-0 bg-darkBlue overflow-hidden">
        <div class="d-flex ">
            <a href="{{ route('front.patient.settings.view') }}">
                <i class="mt-2 p-3  fa fa-arrow-left text-white fs-4 float-start ms-2 ">
                </i></a>
        </div>
        @if ($errors->any())
            <div class="row">
                <div class="col-sm-12 col-sm-offset-3">
                    {!! implode('', $errors->all('<div class="alert alert-danger">:message</div>')) !!}
                </div>
            </div>
        @endif
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        <div class="container-fluid text-white ">
            <div class="col-12">

                <div class="d-flex justify-content-center text-white">
                    <div class="col-lg-8  text-center mt-2  ">
                        <img src="{{ s3Url('uploads/patient') . '/' . 'ic_delete_account.webp' }}"
                            class="img-fluid mt-5 mb-5 w-25  " alt="Logo">
                        <h3 class="text-white">{{ __('setting.we_re_sorry_to_see_you_go') }}
                        </h3>
                        <h5 class="mt-5 text-white">
                            {!! __('setting.for_any_other_reasons_help_and_support') !!}
                        </h5>

                        <p class="mt-5">
                            {{ __('setting.choose_ac_des') }}
                        </p>
                        <div class="p-4 ">
                            <select id="deleteOptions" class="form-select " aria-label="Default select example">
                                <option value="" selected>{{ __('setting.choose_account_status') }}</option>
                                <option value="temporarily">{{ __('setting.delete_temp') }}</option>
                                <option value="Permanently">{{ __('setting.delete_perm') }}</option>
                            </select>
                            <span id="err" class="text-danger" hidden>{{ __('register.selectOption') }}</span>
                        </div>
                        <div align="center" class=" mt-3 mb-5">
                            <a href="#" id="Save"
                                class="col-6  col-lg-4  p-2 bg-white text-decoration-none darkBlue rounded-pill border-0 mb-5 "
                                name="Save" type="submit">
                                {{ __('setting.save') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script  nonce="{{ $cspNonce }}">
        $(document).ready(function() {
            $("#deleteOptions").change(function(e) {
                e.preventDefault();
                let selected = $(this).children("option:selected").val();
                if (selected == "temporarily") {
                    $("#Save").attr("href",
                        "{{ route('front.patient.deleteUserAc', ['slug' => 'TEMP']) }}"
                    );
                } else if (selected == "Permanently") {
                    $("#Save").attr("href",
                        "{{ route('front.patient.deleteUserAc', ['slug' => 'PER']) }}"
                    );
                }
            });

            $('#Save').click(function(e) {
                let field = $('#deleteOptions');
                if (field.val() === "") {
                    e.preventDefault();
                    $(field).css('border', '1px red solid');
                    $('#err').attr('hidden', false);
                } else {
                    $(field).css('border', '');
                    $('#err').attr('hidden', true);
                }

            });

        });
    </script>
@endsection