@extends('master.master_portal')

@section('title', 'RDPC - Espace Enrôlement')

@section('style')
<style>
    body { background: #eef0f9; margin: 0; padding-bottom: 2rem; }
    .topbar {
        background: var(--rdpc-blue-dark);
        color: #fff; padding: 1.2rem 1.2rem 2.5rem 1.2rem;
        border-radius: 0 0 25px 25px;
    }
    .topbar .logo-wrap {
        width: 55px; height: 55px; border-radius: 14px;
        background: #fff; display: flex; align-items: center; justify-content: center;
        overflow: hidden; position: relative;
    }
    .topbar .logo-wrap img { width: 100%; height: 100%; object-fit: contain; }
    .commune-name { font-size: .75rem; font-weight: 600; opacity: .9; }
    .welcome-name { font-weight: 700; font-size: 1rem; }
    .logout-btn {
        background: rgba(255,255,255,.15); border: none; border-radius: 12px;
        width: 42px; height: 42px; color: #fff; font-size: 1.1rem;
    }
    .stats-card {
        margin: -1.8rem 1rem 1.5rem 1rem;
        background: #fff; border-radius: 16px; box-shadow: 0 8px 25px rgba(0,0,0,.08);
        padding: 1rem;
        display: flex; justify-content: space-around; text-align: center;
    }
    .stats-card .stat-item h6 { font-size: .72rem; color: #888; margin-bottom: .3rem; font-weight: 500; }
    .stats-card .stat-item h3 { font-size: 1.4rem; font-weight: 700; color: var(--rdpc-blue-dark); margin: 0; }
    .stats-card .divider { width: 1px; background: #eee; }
    .tiles-wrap { padding: 0 1rem; }
    .tile {
        background: #fff; border-radius: 16px; padding: 1.6rem 1rem;
        text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,.05);
        text-decoration: none; color: #333; display: block;
        position: relative; transition: transform .12s ease, box-shadow .12s ease;
    }
    .tile:hover { color: var(--rdpc-blue-dark); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(32,80,127,.15); }
    .tile .icon {
        font-size: 1.7rem; margin-bottom: .7rem; color: var(--rdpc-blue-dark);
        width: 58px; height: 58px; border-radius: 15px; margin-inline: auto;
        display: flex; align-items: center; justify-content: center;
        background: var(--rdpc-blue-soft);
    }
    .tile .label { font-weight: 600; font-size: .9rem; }
    .tile-badge {
        position: absolute; top: 10px; right: 10px;
        background: #c0392b; color: #fff; font-size: .7rem; font-weight: 700;
        border-radius: 50%; width: 22px; height: 22px;
        display: flex; align-items: center; justify-content: center;
    }
    .section-title { font-size: .8rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: .5px; margin: 1.5rem 1rem .8rem 1rem; }
</style>
@endsection

@section('content')
    <div class="topbar d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center gap-2">
            <div class="logo-wrap">
                <img src="{{ asset('rdpc.jpeg') }}" alt="Logo RDPC">
            </div>
            <div>
                <div class="commune-name">{{ mb_strtoupper($intitule_name ?? 'RDPC') }}</div>
                <div class="welcome-name">{{ mb_strtoupper(optional(auth()->user())->ad_name ?? 'Agent') }}</div>
            </div>
        </div>
        <form method="POST" action="{{ route('post.frontend.portal.logout') }}">
            @csrf
            <button type="submit" class="logout-btn"><i class="fa-solid fa-right-from-bracket"></i></button>
        </form>
    </div>

    @if(session('error'))
        <div class="mx-3 mt-3 alert alert-danger" style="border-radius:12px;font-size:.85rem;">
            <i class="fa-solid fa-triangle-exclamation me-1"></i> {{ session('error') }}
        </div>
    @endif

    <div class="stats-card">
        <div class="stat-item">
            <h6>MOIS</h6>
            <h3>{{ $countMonth ?? 0 }}</h3>
        </div>
        <div class="divider"></div>
        <div class="stat-item">
            <h6>SEMAINE</h6>
            <h3>{{ $countWeek ?? 0 }}</h3>
        </div>
        <div class="divider"></div>
        <div class="stat-item">
            <h6>JOUR</h6>
            <h3>{{ $countDay ?? 0 }}</h3>
        </div>
    </div>

    <div class="section-title">Actions</div>
    <div class="tiles-wrap">
        <div class="row g-3">
            {{-- Les routes seront branchées à l'étape "controllers". Placeholders "#" pour l'instant. --}}
            @php
                $tiles = [
                    ['label' => 'Enregistrement',              'icon' => 'fa-user-plus',      'route' => 'get.frontend.portal.register'],
                    ['label' => 'Modifier un membre',          'icon' => 'fa-user-pen',       'route' => 'get.frontend.portal.edit'],
                    ['label' => 'Générer une carte',           'icon' => 'fa-id-card',        'route' => 'get.frontend.portal.card'],
                    ['label' => 'Cotisations',                 'icon' => 'fa-money-bill-wave', 'route' => 'get.frontend.portal.contributions'],
                    ['label' => 'Inscriptions aux élections',  'icon' => 'fa-check-to-slot',  'route' => 'get.frontend.portal.subscribes'],
                    ['label' => 'État de service',             'icon' => 'fa-star',           'route' => 'get.frontend.portal.services'],
                    ['label' => 'Documents',                   'icon' => 'fa-file-lines',     'route' => 'get.frontend.portal.documents'],
                ];
            @endphp
            @foreach ($tiles as $tile)
            <div class="col-6">
                <a href="{{ Route::has($tile['route']) ? route($tile['route']) : '#' }}" class="tile">
                    <div class="icon"><i class="fa-solid {{ $tile['icon'] }}"></i></div>
                    <div class="label">{{ mb_strtoupper($tile['label']) }}</div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
@endsection

@section('scripts')
<script>
$(function () {
    // Tuiles non encore branchées -> notification toast
    $('.tile').on('click', function (e) {
        if ($(this).attr('href') === '#') {
            e.preventDefault();
            const label = $(this).find('.label').text();
            Swal.fire({
                toast: true, position: 'top', icon: 'info',
                title: label + ' — module à venir',
                showConfirmButton: false, timer: 2000, timerProgressBar: true
            });
        }
    });
});
</script>
@endsection