@php
    use Illuminate\Support\Facades\Auth;

    if (Auth::user()) {
        $user = Auth::user();
        $userName = $user->first_name . ' ' . $user->last_name;
    } else {
        $userName = null;
    }

    // Set default values if variables are not defined
    $slug = $slug ?? '';
    $background_image = $background_image ?? 'default-background.jpg'; // Provide a default image path
    $header = $header ?? 'Default Header'; // Provide a default header
    $title = $title ?? 'Default Title'; // Provide a default title
    $content = $content ?? 'Default Content'; // Provide default content
    $button_text = $button_text ?? 'Default Button Text'; // Provide default button text
@endphp

<div class="col-12">
    <section class="custom-about-section @if($slug != 'gimli') mt-3 @else mt-5 @endif">
        <div class="custom-row container position-relative">
            <div class="col-12 col-md-6 d-flex justify-content-center position-relative">
                <img class="img-fluid max-height" src="{{ Storage::url($background_image) }}" alt="">
                @if($slug == 'profile')
                    <div class="img-overlay">
                        Image upload coming soon
                    </div>
                @endif
            </div>
            <div class="col-12 col-md-6 p-3">
                <div>
                    @if($slug == 'profile' && $userName)
                        <h2 class="mb-3">{{ $userName }}</h2>
                        <p class="d-none">{{ $title }}</p>
                        <p class="d-none">{!! $content !!}</p>
                    @else
                        <h2 class="mb-3">{{ $header }}</h2>
                        <p>{{ $title }}</p>
                        <p>{!! $content !!}</p>
                    @endif
                </div>
                <div class="d-flex">
                @if($slug == 'profile')
                    <a href="#" class="btn btn-custom-profile mt-auto mb-2 d-none">
                        <i class="fas fa-camera"></i><br> Share Photos
                    </a>
                    <a href="{{ route('password.request') }}" class="btn btn-custom-profile mt-auto mb-2 me-2 d-none">
                        <i class="fa fa-pencil-alt"></i><br> Edit Password
                    </a>
                    <a href="{{ route('logout') }}" class="btn btn-custom-profile mb-2 mb-2 me-2"
                       onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                        <i class="fa fa-sign-out-alt"></i><br> Logout
                    </a>
                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                        @csrf
                    </form>
                    <a href="#" class="btn btn-custom-profile mt-auto mb-2 d-none">
                        <i class="fa fa-users"></i><br> Connect
                    </a>
                @else
                    <a href="{{ $button_action }}" class="btn btn-custom mt-auto @if($slug != 'gimli') d-none @else d-block @endif" target="_blank">
                        {{ $button_text }} <i class="fas fa-arrow-right"></i>
                    </a>
                @endif
                </div>
            </div>
        </div>
    </section>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">