@extends('front.layouts.app')

@section('content')
<style>
    .form-group {
        margin-bottom: 10px;
        /* color: white; */
    }
</style>
<div class="container-fluid profile-page">
    <div class="row">
        <div class="col-md-3">
            @include('front.partials.sidebar')
        </div>

        <div class="col-md-9">
            <div class="container py-5">
                
                <div class="py-12">
                    
                    <div class="bg-light p-5 m-auto my-3 rounded shadow">
                        <div class="mb-3">
                            <h4>Change Account Privacy</h4>
                            <form action="{{ route('user.updatePrivacy') }}" method="POST">
                                @csrf
                                <label class="form-label" for="privacy">Account Privacy:</label>
                                <select class="form-select" name="privacy" id="privacy">
                                    <option value="0" {{ Auth::user()->privacy == 'public' ? 'selected' : '' }}>Public</option>
                                    <option value="1" {{ Auth::user()->privacy == 'private' ? 'selected' : '' }}>Private</option>
                                </select>
                                <button class="btn btn-primary my-3" type="submit">Update Privacy</button>
                            </form>
                        </div>
                        <hr>
                        <h4>Upate Password</h4>
                        <p>Ensure your account is using a long, random password to stay secure.</p>
                        <form method="post" action="{{ route('password.update') }}" class="mt-6 space-y-6">
                            @csrf
                            @method('put')
    
                            <div>
                                <label class="form-label" for="update_password_current_password">Current Password</label>
                                <input class="form-control" id="update_password_current_password" name="current_password" type="password" class="mt-1 block w-full" autocomplete="current-password" />
                                <x-input-error :messages="$errors->updatePassword->get('current_password')" class="mt-2" />
                            </div>
    
                            <div>
                                <label class="form-label" for="update_password_password">New Password'</label>
                                <input class="form-control" id="update_password_password" name="password" type="password" class="mt-1 block w-full" autocomplete="new-password" />
                                <x-input-error :messages="$errors->updatePassword->get('password')" class="mt-2" />
                            </div>
    
                            <div>
                                <label class="form-label" for="update_password_password_confirmation">Confirm Password</label>
                                <input class="form-control" id="update_password_password_confirmation" name="password_confirmation" type="password" class="mt-1 block w-full" autocomplete="new-password" />
                                <x-input-error :messages="$errors->updatePassword->get('password_confirmation')" class="mt-2" />
                            </div>
    
                            <div class="flex items-center gap-4 mt-4">
                                <button class="btn btn-primary" type="submit">{{ __('Save') }}</button>
                            </div>
                        </form>
                        <hr>
                        <h4>Delete Account</h4>
                        <form method="post" action="{{ route('profile.destroy') }}" class="mt-6 space-y-6">
                            @csrf
                            @method('delete')
                
                            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                                {{ __('Are you sure you want to delete your account?') }}
                            </h2>
                
                            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                                {{ __('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="mt-6">
                                <x-input-label for="password" value="{{ __('Password') }}" class="sr-only" />
                
                                <x-text-input
                                    id="password"
                                    name="password"
                                    type="password"
                                    class="mt-1 block form-control w-50"
                                    placeholder="{{ __('Password') }}"
                                />
                
                                <x-input-error :messages="$errors->userDeletion->get('password')" class="mt-2" />
                            </div>
                
                            <div class="mt-6 flex justify-end mt-3">
                                <x-secondary-button x-on:click="$dispatch('close')">
                                    {{ __('Cancel') }}
                                </x-secondary-button>
                
                                <x-danger-button class="ms-3 btn btn-danger">
                                    {{ __('Delete Account') }}
                                </x-danger-button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@endsection