@extends('layouts.app')
@section('page-pretitle', __('Management'))
@section('page-title', 'Profile')

@section('content')

{{-- Flash Messages --}}
    @if ($errors->any())
        <div id="validation-alert" class="alert alert-danger alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-red text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
            <div class="flex-grow-1">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if (session('success'))
        <div id="success-alert" class="alert alert-success alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-green text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
            <div class="flex-grow-1">
                {{ session('success') }}
            </div>
            <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

{{-- Profile Form Styling --}}
<style>
    @media (max-width: 768px) {
        #validation-alert, #success-alert {
            width: 90% !important;
            left: 5% !important;
        }
    }

    @media (max-width: 576px) {
        #validation-alert, #success-alert {
            width: 95% !important;
            left: 2.5% !important;
        }
    }
    .profile-section {
        background: #fff;
        border-radius: 1rem;
        padding: 2rem;
        transition: box-shadow 0.3s ease;
    }
    .profile-avatar {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 50%;
        border: 3px solid #4dabf7;
        background-color: #f8f9fa;
    }
    .profile-form-label {
        font-weight: 500;
        color: #223d52;
    }
    .profile-btn {
        background-color: #4dabf7;
        color: #fff;
        font-weight: 600;
        border-radius: 0.5rem;
        padding: 0.6rem 1.5rem;
        border: none;
        transition: background-color 0.2s ease;
    }
    .profile-btn:hover {
        background-color: #339af0;
    }
</style>

{{-- Profile Form --}}
<div class="container-fluid px-0">
    <div class="page-wrapper">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-6 mb-4">
                <div class="profile-section h-100 shadow-sm">
                    @include('profile.partials.update-profile-information-form')
                </div>
            </div>
            <div class="col-12 col-lg-6 mb-4">
                <div class="profile-section h-100 shadow-sm">
                    @include('profile.partials.update-password-form')
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Auto-hide alert after 2s --}}
<script>
    setTimeout(() => {
        const alert = document.querySelector('.alert');
        if (alert) {
            alert.classList.remove('show');
            alert.classList.add('fade');
        }
    }, 2000);
</script>

@endsection