@extends('layouts.app')

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <h4 class="py-3 breadcrumb-wrapper mb-4">
                <a href="{{ route('dashboard') }}" class="text-muted fw-light">Dashboard /</a> Profile
            </h4>

            <!-- Alerts for Success/Error -->
            <div class="col-md-12 mb-4">
                @if (session('success') || session('status') === 'profile-updated' || session('status') === 'password-updated' || session('status') === 'verification-link-sent')
                    <div class="alert alert-success alert-dismissible d-flex align-items-center" role="alert">
                        <i class="bx bx-xs bx-command align-top me-2"></i>
                        {{ session('success') ?? session('status') === 'profile-updated' ? __('Profile updated successfully.') : (session('status') === 'password-updated' ? __('Password updated successfully.') : __('A new verification link has been sent to your email address.')) }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible d-flex align-items-center" role="alert">
                        <i class="bx bx-xs bx-error-circle align-top me-2"></i>
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>

            <!-- Profile Information Form -->
            <div class="card mb-4">
                <h5 class="card-header">{{ __('Profile Information') }}</h5>
                <div class="card-body">
                    <form method="POST" action="{{ route('profile.update') }}" class="space-y-4">
                        @csrf
                        @method('patch')

                        <div class="col-12 fv-plugins-icon-container">
                            <label class="form-label" for="name">{{ __('Name') }}</label>
                            <input type="text" name="name" id="name" class="form-control" placeholder="{{ __('Enter your name') }}" value="{{ old('name', $user->name) }}" required autofocus autocomplete="name" />
                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                @if ($errors->has('name'))
                                    {{ $errors->first('name') }}
                                @endif
                            </div>
                        </div>

                        <div class="col-12 fv-plugins-icon-container">
                            <label class="form-label" for="email">{{ __('Email') }}</label>
                            <input type="email" name="email" id="email" class="form-control" placeholder="{{ __('Enter your email') }}" value="{{ old('email', $user->email) }}" required autocomplete="username" />
                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                @if ($errors->has('email'))
                                    {{ $errors->first('email') }}
                                @endif
                            </div>

                            @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
                                <div class="mt-2">
                                    <p class="text-sm text-gray-800">
                                        {{ __('Your email address is unverified.') }}
                                        <form id="send-verification" method="POST" action="{{ route('verification.send') }}" class="d-inline">
                                            @csrf
                                            <button type="submit" class="underline text-sm text-gray-600 hover:text-gray-900">{{ __('Click here to re-send the verification email.') }}</button>
                                        </form>
                                    </p>
                                </div>
                            @endif
                        </div>

                        <button type="submit" class="btn btn-primary mt-2">
                            <i class="bx bx-save me-sm-1"></i> {{ __('Save') }}
                        </button>
                    </form>
                </div>
            </div>

            <!-- Update Password Form -->
            <div class="card mb-4">
                <h5 class="card-header">{{ __('Update Password') }}</h5>
                <div class="card-body">
                    <form method="POST" action="{{ route('password.update') }}" class="space-y-4">
                        @csrf
                        @method('put')

                        <div class="col-12 fv-plugins-icon-container">
                            <label class="form-label" for="update_password_current_password">{{ __('Current Password') }}</label>
                            <input type="password" name="current_password" id="update_password_current_password" class="form-control" placeholder="{{ __('Enter current password') }}" autocomplete="current-password" />
                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                @if ($errors->updatePassword->has('current_password'))
                                    {{ $errors->updatePassword->first('current_password') }}
                                @endif
                            </div>
                        </div>

                        <div class="col-12 fv-plugins-icon-container">
                            <label class="form-label" for="update_password_password">{{ __('New Password') }}</label>
                            <input type="password" name="password" id="update_password_password" class="form-control" placeholder="{{ __('Enter new password') }}" autocomplete="new-password" />
                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                @if ($errors->updatePassword->has('password'))
                                    {{ $errors->updatePassword->first('password') }}
                                @endif
                            </div>
                        </div>

                        <div class="col-12 fv-plugins-icon-container">
                            <label class="form-label" for="update_password_password_confirmation">{{ __('Confirm Password') }}</label>
                            <input type="password" name="password_confirmation" id="update_password_password_confirmation" class="form-control" placeholder="{{ __('Confirm new password') }}" autocomplete="new-password" />
                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                @if ($errors->updatePassword->has('password_confirmation'))
                                    {{ $errors->updatePassword->first('password_confirmation') }}
                                @endif
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary mt-2">
                            <i class="bx bx-save me-sm-1"></i> {{ __('Save') }}
                        </button>
                    </form>
                </div>
            </div>

            <!-- Delete Account Form -->
            <div class="card">
                <h5 class="card-header">{{ __('Delete Account') }}</h5>
                <div class="card-body">
                    <p class="text-muted mb-4">{{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.') }}</p>
                    <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#confirmUserDeletion">{{ __('Delete Account') }}</button>

                    <!-- Modal -->
                    <div class="modal fade" id="confirmUserDeletion" tabindex="-1" aria-labelledby="confirmUserDeletionLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <form method="POST" action="{{ route('profile.destroy') }}">
                                    @csrf
                                    @method('delete')
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="confirmUserDeletionLabel">{{ __('Confirm Account Deletion') }}</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <p class="text-muted">{{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.') }}</p>
                                        <div class="fv-plugins-icon-container">
                                            <label class="form-label" for="password">{{ __('Password') }}</label>
                                            <input type="password" name="password" id="password" class="form-control" placeholder="{{ __('Enter your password') }}" />
                                            <div class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                                @if ($errors->userDeletion->has('password'))
                                                    {{ $errors->userDeletion->first('password') }}
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                                        <button type="submit" class="btn btn-danger">{{ __('Delete Account') }}</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
    <script>
        $(document).ready(function() {
            // Form validation for Profile Information
            $('form[action="{{ route('profile.update') }}"]').validate({
                rules: {
                    name: {
                        required: true,
                        maxlength: 255
                    },
                    email: {
                        required: true,
                        email: true,
                        maxlength: 255
                    }
                },
                messages: {
                    name: {
                        required: "{{ __('Please enter your name') }}",
                        maxlength: "{{ __('Name cannot exceed 255 characters') }}"
                    },
                    email: {
                        required: "{{ __('Please enter your email') }}",
                        email: "{{ __('Please enter a valid email address') }}",
                        maxlength: "{{ __('Email cannot exceed 255 characters') }}"
                    }
                },
                errorPlacement: function(error, element) {
                    error.appendTo(element.closest('.fv-plugins-icon-container').find('.fv-plugins-message-container'));
                },
                highlight: function(element) {
                    $(element).addClass('is-invalid');
                    $(element).closest('.fv-plugins-icon-container').find('.fv-plugins-message-container').addClass('fv-plugins-message-container--enabled');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-invalid');
                    $(element).closest('.fv-plugins-icon-container').find('.fv-plugins-message-container').removeClass('fv-plugins-message-container--enabled').empty();
                }
            });

            // Form validation for Update Password
            $('form[action="{{ route('password.update') }}"]').validate({
                rules: {
                    current_password: {
                        required: true
                    },
                    password: {
                        required: true,
                        minlength: 8
                    },
                    password_confirmation: {
                        required: true,
                        equalTo: "#update_password_password"
                    }
                },
                messages: {
                    current_password: {
                        required: "{{ __('Please enter your current password') }}"
                    },
                    password: {
                        required: "{{ __('Please enter a new password') }}",
                        minlength: "{{ __('Password must be at least 8 characters') }}"
                    },
                    password_confirmation: {
                        required: "{{ __('Please confirm your new password') }}",
                        equalTo: "{{ __('Passwords do not match') }}"
                    }
                },
                errorPlacement: function(error, element) {
                    error.appendTo(element.closest('.fv-plugins-icon-container').find('.fv-plugins-message-container'));
                },
                highlight: function(element) {
                    $(element).addClass('is-invalid');
                    $(element).closest('.fv-plugins-icon-container').find('.fv-plugins-message-container').addClass('fv-plugins-message-container--enabled');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-invalid');
                    $(element).closest('.fv-plugins-icon-container').find('.fv-plugins-message-container').removeClass('fv-plugins-message-container--enabled').empty();
                }
            });

            // Form validation for Delete Account
            $('form[action="{{ route('profile.destroy') }}"]').validate({
                rules: {
                    password: {
                        required: true
                    }
                },
                messages: {
                    password: {
                        required: "{{ __('Please enter your password') }}"
                    }
                },
                errorPlacement: function(error, element) {
                    error.appendTo(element.closest('.fv-plugins-icon-container').find('.fv-plugins-message-container'));
                },
                highlight: function(element) {
                    $(element).addClass('is-invalid');
                    $(element).closest('.fv-plugins-icon-container').find('.fv-plugins-message-container').addClass('fv-plugins-message-container--enabled');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-invalid');
                    $(element).closest('.fv-plugins-icon-container').find('.fv-plugins-message-container').removeClass('fv-plugins-message-container--enabled').empty();
                }
            });
        });
    </script>
@endsection