@extends('layouts._includes.admin.Header')
@section('titulo', 'Editar Sobre')
@section('conteudo')

    <style>
        .header {
            background-color: #fff;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 30px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .header h1 {
            margin-top: 0;
        }

        .section {
            margin-bottom: 40px;
        }

        .section h2 {
            background-color: #e5e5e5;
            padding: 10px;
            border-left: 5px solid #001a4e;
        }

        .item {
            display: flex;
            align-items: center;
            background-color: #fff;
            margin: 10px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .item img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-right: 20px;
            object-fit: cover;
        }

        .info p {
            margin: 5px 0;
        }

        .label {
            font-weight: bold;
        }
    </style>
    <div class="card mb-2">
        <div class="card-body">
            <h2 class="h5 page-title">
                Detalhe do Município
            </h2>
        </div>
    </div>
    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-12">
                        <div class="header">
                            <h1>Administração Central</h1>
                            <p><span class="label">Descrição:</span>{{ $sobre->vc_historia }}</p>
                            <p><span class="label">Localização:</span> {{ $sobre->vc_geografia }}</p>
                        </div>

                        <div class="section">
                            <h2>Administrador Geral</h2>
                            <div class="item">
                                <img src="{{ $admin->vc_caminho }}" alt="João Silva">
                                <div class="info">
                                    <p><span class="label">Nome:</span>
                                        {{ $admin->vc_primeiroNome . ' ' . $admin->vc_ultimoNome }}</p>
                                    <p><span class="label">Email:</span> {{ $admin->email }}</p>
                                </div>
                            </div>
                        </div>

                        <div class="section">
                            <h2>Diretores por Departamento</h2>
                            @foreach ($dep as $item)
                                <div class="item">
                                    <img src="{{ $item->vc_caminho }}" alt="{{$item->vc_primeiroNome}}">
                                    <div class="info">
                                        <p><span class="label">Departamento:</span> {{ $item->vc_departamento }}</p>
                                        <p><span class="label">Diretor:</span>{{$item->vc_primeiroNome. ''.$item->vc_ultimoNome}}</p>
                                        <p><span class="label">Email:</span> {{ $item->email }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>







@endsection