@extends('adminlte::page')

@section('title', 'Panel | COMPRIS')

@section('content_header')
    <h1 class="h3 mb-0">Panel de control</h1>
@stop

@section('content')
    <div class="compris-banner p-4 p-md-5 mb-4">
        <span class="badge bg-white text-dark mb-3">
            {{ config('app.name') }}
        </span>

        <h2 class="fw-bold">
            Hola, {{ auth()->user()->name }}
        </h2>

        <p class="mb-0">
            Bienvenido a tu panel de administración.
        </p>
    </div>

    <div class="row g-4 pb-4">
        <div class="col-12 col-lg-7">
            <div class="card border-0 shadow-sm rounded-4 h-100">
                <div class="card-body p-4">
                    <h3 class="h5 mb-3">Tu cuenta</h3>

                    <p class="text-body-secondary mb-1">
                        Correo electrónico
                    </p>

                    <p class="text-break">
                        {{ auth()->user()->email }}
                    </p>

                    @foreach(auth()->user()->getRoleNames() as $role)
                        <span class="badge rounded-pill text-bg-success">
                            {{ ucfirst($role) }}
                        </span>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-5">
            <div class="card border-0 shadow-sm rounded-4 h-100">
                <div class="card-body p-4">
                    <h3 class="h5 mb-3">Tu sitio</h3>

                    <p class="text-body-secondary">
                        {{ config('app.name') }}
                    </p>

                    <a href="{{ url('/') }}"
                       class="btn btn-dark rounded-pill px-4">
                        <i class="bi bi-box-arrow-up-right me-2"
                           aria-hidden="true"></i>
                        Abrir sitio
                    </a>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
    <style>
        .compris-banner {
            color: #fff;
            background: linear-gradient(120deg, #4338ca, #7c3aed);
            border-radius: 1.25rem;
            box-shadow: 0 12px 30px rgba(67, 56, 202, .18);
        }
    </style>
@stop