@extends('admin.layouts.netgescon')

@section('title', 'Contabilità')

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Contabilità</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active">Contabilità</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <!-- Sub-menu tabs come nella pagina stabili -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card card-primary card-tabs">
                        <div class="card-header p-0 pt-1">
                            <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" 
                                       href="{{ route('admin.contabilita.index') }}"
                                       role="tab">
                                        <i class="fas fa-list"></i> Registrazioni
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" 
                                       href="{{ route('admin.contabilita.create') }}"
                                       role="tab">
                                        <i class="fas fa-plus"></i> Nuova Registrazione
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" 
                                       href="#bilanci"
                                       role="tab" 
                                       onclick="alert('Funzione in sviluppo')">
                                        <i class="fas fa-balance-scale"></i> Bilanci
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" 
                                       href="#reports"
                                       role="tab"
                                       onclick="alert('Funzione in sviluppo')">
                                        <i class="fas fa-chart-bar"></i> Reports
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" 
                                       href="#piano-conti"
                                       role="tab"
                                       onclick="alert('Funzione in sviluppo')">
                                        <i class="fas fa-list-alt"></i> Piano dei Conti
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" 
                                       href="#config"
                                       role="tab"
                                       onclick="alert('Funzione in sviluppo')">
                                        <i class="fas fa-cog"></i> Configurazione
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistiche DARE/AVERE -->
    <section class="content">
        <div class="container-fluid">
            <div class="row mb-3">
                <div class="col-md-3">
                    <div class="small-box bg-success">
                        <div class="inner">
                            <h3>€ 0,00</h3>
                            <p>Totale DARE</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-arrow-up"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="small-box bg-warning">
                        <div class="inner">
                            <h3>€ 0,00</h3>
                            <p>Totale AVERE</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-arrow-down"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="small-box bg-info">
                        <div class="inner">
                            <h3>€ 0,00</h3>
                            <p>Differenza</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-balance-scale"></i>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="small-box bg-secondary">
                        <div class="inner">
                            <h3>0</h3>
                            <p>Registrazioni</p>
                        </div>
                        <div class="icon">
                            <i class="fas fa-list"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tabella Registrazioni -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Registrazioni Contabili</h3>
                            <div class="card-tools">
                                <a href="{{ route('admin.contabilita.create') }}" class="btn btn-primary btn-sm">
                                    <i class="fas fa-plus"></i> Nuova Registrazione
                                </a>
                            </div>
                        </div>
                        <div class="card-body">
                            @if(session('success'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <i class="fas fa-check-circle me-2"></i>
                                    {{ session('success') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif

                            @if(session('error'))
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    {{ session('error') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif

                            <!-- Placeholder per lista registrazioni -->
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Data</th>
                                            <th>Numero Documento</th>
                                            <th>Descrizione</th>
                                            <th>Dare</th>
                                            <th>Avere</th>
                                            <th>Stato</th>
                                            <th>Azioni</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td colspan="7" class="text-center text-muted">
                                                <i class="fas fa-calculator fa-3x mb-3"></i>
                                                <br>
                                                Nessuna registrazione contabile presente.
                                                <br>
                                                <a href="{{ route('admin.contabilita.create') }}" class="btn btn-primary btn-sm mt-2">
                                                    <i class="fas fa-plus"></i> Crea la prima registrazione
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection

@push('styles')
<style>
/* NetGescon Design System - Contabilità Module */
.netgescon-stats-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-left: 4px solid;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.netgescon-stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.small-box {
    border-radius: 0.375rem;
    overflow: hidden;
}

.small-box .inner {
    padding: 10px;
}

.small-box h3 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    white-space: nowrap;
    padding: 0;
}

.small-box p {
    font-size: 1rem;
    margin: 0;
}

.small-box .icon {
    position: absolute;
    top: auto;
    bottom: 10px;
    right: 10px;
    font-size: 3rem;
    color: rgba(255,255,255,0.15);
}

.small-box:hover {
    transform: translateY(-2px);
    transition: all 0.3s ease;
}
</style>
@endpush