@extends('admin.admin_master')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/folder-management.css') }}">
@endpush

@section('admin')
<div class="page-content">
    <div class="container-fluid">
        <script>
            if (typeof window.showToast !== 'function') {
                window.showToast = function(message, type) {
                    const alertType = type === 'error' ? 'danger' : (type || 'info');
                    const wrapper = document.createElement('div');
                    wrapper.className = 'alert alert-' + alertType + ' alert-dismissible fade show mt-3';
                    wrapper.setAttribute('role', 'alert');
                    wrapper.innerHTML =
                        '<span>' + message + '</span>' +
                        '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>';

                    const container = document.querySelector('.container-fluid') || document.body;
                    container.prepend(wrapper);

                    setTimeout(function() {
                        wrapper.classList.remove('show');
                        wrapper.classList.add('hide');
                        setTimeout(function() {
                            wrapper.remove();
                        }, 200);
                    }, 3500);
                };
            }
        </script>

        <!-- Toast Messages -->
        @if(session('toast'))
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    showToast('{{ session('toast.message') }}', '{{ session('toast.type') }}');
                });
            </script>
        @endif

        <!-- Legacy Success Alert (for backward compatibility) -->
        @if(session('message'))
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    showToast('{{ session('message') }}', 'success');
                });
            </script>
        @endif

        @if($errors->any())
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    showToast('{{ $errors->first() }}', 'error');
                });
            </script>
        @endif

        <!-- Enhanced Page Header with Navigation -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="page-header-card">
                    <div class="page-header-content">
                        <div class="d-flex align-items-center justify-content-between">
                            <!-- Left side: Page Icon & Title -->
                            <div class="d-flex align-items-center">
                                <!-- Page Icon -->
                                <div class="page-icon me-3">
                                    <div class="avatar-md">
                                        <div class="avatar-title bg-primary-subtle text-primary rounded-circle">
                                            <i class="ri-user-line font-size-24"></i>
                                        </div>
                                    </div>
                                </div>
                                <!-- Page Title -->
                                <div class="flex-grow-1">
                                    <h4 class="page-title mb-1">Profile Management</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-12 col-lg-6">
                <div class="card shadow-sm border-0">
                    <div class="card-body p-4">
                        @include('profile.partials.update-profile-information-form')
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <div class="card shadow-sm border-0">
                    <div class="card-body p-4">
                        @include('profile.partials.update-password-form')
                    </div>
                </div>
            </div>
            <!-- Delete account section removed as requested -->
        </div>
    </div>
</div>
@endsection