<?php
// Debug (puoi rimuovere in produzione)
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

session_start();
require 'config.php'; // deve definire $conn (mysqli)

// Se sei già loggato, vai alla dashboard
if (isset($_SESSION['utente'])) {
    header('Location: dashboard.php');
    exit;
}

$errore = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = mysqli_real_escape_string($conn, $_POST['username'] ?? '');
    $password = $_POST['password'] ?? '';

    // 🔒 Controlla le credenziali sull tabella "utenti"
    // Adatta se i nomi delle colonne sono diversi
    $sql = "SELECT * FROM utenti WHERE username = ?";
    $stmt = mysqli_prepare($conn, $sql);
    mysqli_stmt_bind_param($stmt, 's', $username);
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
    $utente = mysqli_fetch_assoc($result);

    if ($utente && password_verify($password, $utente['password'])) {
        // Salva in sessione (usa la chiave che usi già negli altri file, es. ricarica.php)
        $_SESSION['utente'] = $utente['username']; // o $utente['id'] se usi l'id
        $_SESSION['ruolo'] = $utente['ruolo'];
        session_regenerate_id(true);
        header('Location: dashboard.php');
        exit;
    } else {
        $errore = 'Username o password non validi.';
    }
}
?>
<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <title>Login - FiberSicilia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 5 -->
    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
        crossorigin="anonymous">

    <!-- Font Awesome (se ti serve per icone) -->
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

    <style>
        :root {
            --primary-color: #0D6EFD;
            --bg-light: #f2f4f8;
        }

        body {
            min-height: 100vh;
            margin: 0;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
            background: radial-gradient(circle at top left, #e4eeff 0, #f2f4f8 35%, #e8f0ff 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .badge-link {
            display: inline-block;
            font-size: 11px;
            padding: 6px 10px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.18);
            border: 1px solid rgba(255, 255, 255, 0.35);
            backdrop-filter: blur(4px);
            color: #ffffff;
            text-decoration: none;
            transition: 0.2s;
        }

        .badge-link:hover {
            background: rgba(255, 255, 255, 0.28);
        }


        .login-wrapper {
            width: 100%;
            max-width: 1100px;
            padding: 15px;
        }

        .login-card {
            background: #ffffff;
            border-radius: 18px;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            display: flex;
            flex-wrap: wrap;
        }

        .login-hero {
            background: linear-gradient(135deg, #0D6EFD, #5b9bff);
            color: #ffffff;
            padding: 30px;
            flex: 1 1 45%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
        }

        .login-hero::before {
            content: "";
            position: absolute;
            inset: 20px;
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.25);
            opacity: 0.3;
        }

        .login-hero-logo {
            position: relative;
            z-index: 1;
        }

        .login-hero-logo h1 {
            font-size: 28px;
            margin: 0;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .login-hero-logo span {
            font-size: 13px;
            opacity: 0.9;
        }

        .login-hero-text {
            position: relative;
            z-index: 1;
            margin-top: 40px;
        }

        .login-hero-text h2 {
            font-size: 22px;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .login-hero-text p {
            font-size: 14px;
            opacity: 0.95;
        }

        .login-hero-badges {
            position: relative;
            z-index: 1;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 25px;
        }

        .login-hero-badges span {
            font-size: 11px;
            padding: 6px 10px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.18);
            border: 1px solid rgba(255, 255, 255, 0.35);
            backdrop-filter: blur(4px);
        }

        .login-form-column {
            padding: 30px 26px;
            flex: 1 1 55%;
            background: #ffffff;
        }

        @media (min-width: 992px) {
            .login-form-column {
                padding: 40px 48px;
            }
        }

        .login-title-main {
            color: var(--primary-color);
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 4px;
            text-align: left;
        }

        .login-subtitle {
            font-size: 13px;
            color: #6c757d;
            margin-bottom: 24px;
        }

        .form-label {
            font-weight: 500;
            font-size: 13px;
            margin-bottom: 6px;
        }

        .form-control {
            border-radius: 10px;
            border: 1px solid #d0d7e2;
            padding: 10px 12px;
            font-size: 14px;
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
        }

        .btn-login {
            border-radius: 999px;
            font-weight: 600;
            padding: 10px 16px;
            font-size: 15px;
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-login:hover {
            background-color: #0b5ed7;
            border-color: #0b5ed7;
        }

        .login-footer-text {
            font-size: 11px;
            color: #9ca3af;
            margin-top: 16px;
        }

        .alert {
            font-size: 13px;
            border-radius: 10px;
            padding: 8px 10px;
        }

        /* Mobile */
        @media (max-width: 767.98px) {
            .login-card {
                flex-direction: column;
            }

            .login-hero {
                order: 2;
                padding: 22px 18px;
            }

            .login-form-column {
                order: 1;
                padding: 22px 18px;
            }

            .login-hero-text h2 {
                font-size: 18px;
            }
        }
    </style>
</head>

<body>

    <div class="login-wrapper">
        <div class="login-card">
            <!-- Colonna sinistra (hero) -->
            <div class="login-hero d-none d-md-flex">
                <div>
                    <div class="login-hero-logo">
                        <h1>FiberSicilia</h1>
                        <span>Area riservata operatori</span>
                    </div>

                    <div class="login-hero-text">
                        <h2>Gestisci contratti e ricariche in un unico pannello.</h2>
                        <p>
                            Accedi al pannello FiberSicilia per gestire clienti, ricariche, contratti
                            e documenti in modo semplice e veloce.
                        </p>
                    </div>
                </div>

                <!-- <div class="login-hero-badges">
                <span><i class="fa fa-lock"></i> Accesso protetto</span>
                <span><i class="fa fa-bolt"></i> Operazioni rapide</span>
                <span><i class="fa fa-signal"></i> Rete e servizi</span>
            </div> -->
                <div class="login-hero-badges">
                    <a href="#" class="badge-link">
                        <i class="fa fa-lock"></i> Accesso protetto
                    </a>
                    <a href="#" class="badge-link">
                        <i class="fa fa-bolt"></i> Operazioni rapide
                    </a>
                    <a href="https://www.fibersicilia.it" class="badge-link">
                        <i class="fa fa-signal"></i> Sito Web
                    </a>
                </div>

            </div>

            <!-- Colonna destra (form) -->
            <div class="login-form-column">
                <div class="mb-3 d-md-none text-center">
                    <h1 class="login-title-main">FiberSicilia</h1>
                    <div class="login-subtitle">Accedi all’area riservata</div>
                </div>

                <div class="mb-3 d-none d-md-block">
                    <h2 class="login-title-main">Benvenuto</h2>
                    <div class="login-subtitle">Inserisci le tue credenziali per continuare.</div>
                </div>

                <?php if (!empty($errore)): ?>
                    <div class="alert alert-danger">
                        <i class="fa fa-exclamation-circle"></i> <?= htmlspecialchars($errore) ?>
                    </div>
                <?php endif; ?>

                <form method="POST" novalidate>
                    <div class="mb-3">
                        <label for="username" class="form-label">Username</label>
                        <input
                            type="text"
                            class="form-control"
                            id="username"
                            name="username"
                            placeholder="Inserisci il tuo username"
                            required
                            autofocus>
                    </div>

                    <div class="mb-2">
                        <label for="password" class="form-label">Password</label>
                        <input
                            type="password"
                            class="form-control"
                            id="password"
                            name="password"
                            placeholder="Inserisci la tua password"
                            required>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="rememberMe" checked>
                            <label class="form-check-label" for="rememberMe" style="font-size:12px;">
                                Ricordami su questo dispositivo
                            </label>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary btn-login w-100">
                        <i class="fa fa-sign-in"></i> Accedi
                    </button>
                </form>

                <div class="login-footer-text text-center">
                    FiberSicilia &copy; <?= date('Y') ?> — Accesso riservato al personale autorizzato.
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS (opzionale, per componenti dinamici) -->
    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

</body>

</html>