@extends('layouts.admin')

@section('page-title')
    {{ __('Profile Settings') }}
@endsection

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a></li>
    <li class="breadcrumb-item">{{ __('Profile') }}</li>
@endsection

@section('content')
    <div class="row">
        <div class="col-xl-6 col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h5>{{ __('Profile Information') }}</h5>
                    <small class="text-muted">{{ __("Update your account's profile information, phone numbers, and email address.") }}</small>
                </div>
                <div class="card-body">
                    <form method="post" action="{{ route('profile.update') }}" class="mt-2">
                        @csrf
                        @method('patch')

                        <div class="row">
                            <div class="col-md-12 form-group mb-3">
                                <label class="form-label">{{ __('Name') }}</label>
                                <input type="text" name="name" class="form-control" value="{{ old('name', $user->name) }}" required autofocus autocomplete="name">
                                @error('name') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>

                            <div class="col-md-12 form-group mb-3">
                                <label class="form-label">{{ __('Email') }}</label>
                                <input type="email" name="email" class="form-control" value="{{ old('email', $user->email) }}" required autocomplete="username">
                                @error('email') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>

                            {{-- New Phone Number Field --}}
                            <div class="col-md-6 form-group mb-3">
                                <label class="form-label">{{ __('Phone Number') }}</label>
                                <input type="text" name="phone_number" class="form-control" value="{{ old('phone_number', $user->phone_number) }}" placeholder="e.g. +1234567890">
                                @error('phone_number') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>

                            {{-- New WhatsApp Number Field --}}
                            <div class="col-md-6 form-group mb-3">
                                <label class="form-label">{{ __('WhatsApp Number') }}</label>
                                <input type="text" name="whatsapp_number" class="form-control" value="{{ old('whatsapp_number', $user->whatsapp_number) }}" placeholder="e.g. +1234567890">
                                @error('whatsapp_number') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>
                        </div>

                        <div class="d-flex align-items-center gap-3 mt-2">
                            <button type="submit" class="btn btn-primary">{{ __('Save Changes') }}</button>
                            @if (session('status') === 'profile-updated')
                                <span class="text-success small">{{ __('Saved successfully.') }}</span>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-xl-6 col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h5>{{ __('Update Password') }}</h5>
                    <small class="text-muted">{{ __('Ensure your account is using a long, random password to stay secure.') }}</small>
                </div>
                <div class="card-body">
                    <form method="post" action="{{ route('password.update') }}" class="mt-2">
                        @csrf
                        @method('put')

                        <div class="form-group mb-3">
                            <label class="form-label">{{ __('Current Password') }}</label>
                            <input type="password" name="current_password" class="form-control" autocomplete="current-password">
                            @error('current_password') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">{{ __('New Password') }}</label>
                            <input type="password" name="password" class="form-control" autocomplete="new-password">
                            @error('password') <span class="text-danger small">{{ $message }}</span> @enderror
                        </div>

                        <div class="form-group mb-3">
                            <label class="form-label">{{ __('Confirm Password') }}</label>
                            <input type="password" name="password_confirmation" class="form-control" autocomplete="new-password">
                        </div>

                        <div class="d-flex align-items-center gap-3 mt-2">
                            <button type="submit" class="btn btn-primary">{{ __('Update Password') }}</button>
                            @if (session('status') === 'password-updated')
                                <span class="text-success small">{{ __('Password updated.') }}</span>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-12 mt-4">
            <div class="card border-danger shadow-sm">
                <div class="card-header bg-transparent border-danger">
                    <h5 class="text-danger mb-0">{{ __('Delete Account') }}</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted small">
                        {{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Please download any data or information that you wish to retain.') }}
                    </p>
                    <button class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteUserModal">
                        <i class="ti ti-trash me-1"></i> {{ __('Delete Account') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="deleteUserModal" tabindex="-1" aria-labelledby="deleteUserModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form method="post" action="{{ route('profile.destroy') }}" class="modal-content">
                @csrf
                @method('delete')
                <div class="modal-header">
                    <h5 class="modal-title text-danger" id="deleteUserModalLabel">{{ __('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-dark fw-bold">{{ __('Are you sure you want to delete your account?') }}</p>
                    <p class="text-muted small">{{ __('Please enter your password to confirm this permanent action.') }}</p>
                    
                    <div class="form-group mt-3">
                        <input type="password" name="password" class="form-control @error('password', 'userDeletion') is-invalid @enderror" placeholder="{{ __('Enter Password') }}" required>
                        @error('password', 'userDeletion') <span class="invalid-feedback">{{ $message }}</span> @enderror
                    </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 Permanently') }}</button>
                </div>
            </form>
        </div>
    </div>
@endsection