<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Disnaker Pontianak</title>

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            height: 100vh;
            display: flex;
            overflow: hidden;
            background-color: #f8fafc;
        }

        .container {
            display: flex;
            width: 100%;
            height: 100%;
        }

        /* --- SISI KIRI (Visual & Branding) --- */
        .left {
            width: 50%;
            background: linear-gradient(135deg, rgba(15, 42, 92, 0.92), rgba(30, 60, 114, 0.85)), 
                        url('https://www.pontianak.go.id/themes/pontianak/assets/images/gedung-walikota.jpg'); 
            background-size: cover;
            background-position: center;
            color: white;
            padding: 60px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo img {
            height: 70px;
            width: auto;
            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
        }

        .logo h3 {
            font-size: 22px;
            font-weight: 700;
            letter-spacing: 1px;
            line-height: 1.2;
            text-transform: uppercase;
        }

        .mid-content {
            margin-top: auto;
            margin-bottom: auto;
        }

        .title {
            font-size: 48px;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 25px;
            text-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }

        .title::after {
            content: '';
            display: block;
            width: 60px;
            height: 6px;
            background: #3b82f6;
            margin-top: 20px;
            border-radius: 10px;
        }

        .desc {
            font-size: 16px;
            line-height: 1.8;
            color: #e2e8f0;
            max-width: 85%;
            font-weight: 300;
        }

        .footer-left {
            font-size: 11px;
            letter-spacing: 3px;
            color: rgba(255,255,255,0.6);
            font-weight: 600;
            text-transform: uppercase;
        }

        /* --- SISI KANAN (Form Login) --- */
        .right {
            width: 50%;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
        }

        .form-box {
            width: 100%;
            max-width: 400px;
        }

        .form-box h2 {
            font-size: 32px;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 8px;
        }

        .form-box p {
            margin-bottom: 40px;
            color: #64748b;
            font-size: 15px;
        }

        .input-group {
            margin-bottom: 24px;
        }

        .input-group label {
            font-size: 12px;
            font-weight: 600;
            display: block;
            margin-bottom: 8px;
            color: #1e293b;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .input-group input {
            width: 100%;
            padding: 14px 18px;
            border: 1.5px solid #e2e8f0;
            border-radius: 12px;
            font-size: 14px;
            background: #f8fafc;
            transition: all 0.3s ease;
            outline: none;
        }

        .input-group input:focus {
            border-color: #3b82f6;
            background: #fff;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
        }

        .btn {
            width: 100%;
            padding: 16px;
            background: #1e3c72;
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 10px;
            transition: all 0.3s ease;
            text-align: center;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .btn:hover {
            background: #0f2a5c;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(30, 60, 114, 0.2);
        }

        .btn:active {
            transform: translateY(0);
        }

        .footer-right {
            margin-top: 40px;
            font-size: 11px;
            text-align: center;
            color: #94a3b8;
            font-weight: 500;
        }

        /* Responsive */
        @media (max-width: 992px) {
            .left { display: none; }
            .right { width: 100%; background: #f8fafc; }
            .form-box { 
                background: white; 
                padding: 40px; 
                border-radius: 24px; 
                box-shadow: 0 10px 25px rgba(0,0,0,0.05);
            }
        }
    </style>
</head>
<body>

<div class="container">
    <div class="left">
        <div class="logo">
            <img src="{{ asset('Kalimantan-Barat-Logo-Vector.png') }}" alt="Logo">
            <h3>DINAS TENAGA KERJA<br>KOTA PONTIANAK</h3>
        </div>

        <div class="mid-content">
            <div class="title">
                Sistem Monitoring <br>
                Aktivitas Pegawai
            </div>
            <div class="desc">
                Platform terintegrasi untuk pelaporan aktivitas pegawai, pemantauan kinerja institusi, 
                serta peningkatan kualitas administrasi pemerintahan di lingkungan 
                Dinas Tenaga Kerja dan Transmigrasi Kota Pontianak.
            </div>
        </div>

        <div class="footer-left">
            TRANSPARANSI &nbsp;&bull;&nbsp; AKUNTABILITAS &nbsp;&bull;&nbsp; INTEGRITAS
        </div>
    </div>

    <div class="right">
        <div class="form-box">
            <h2>Selamat Datang</h2>
            <p>Masuk dengan akun Anda untuk mengakses panel.</p>

            <form action="{{ route('dashboard') }}" method="GET">
                <div class="input-group">
                    <label>Alamat Email</label>
                    <input type="email" name="email" placeholder="nama@disnaker.pontianak.go.id" required>
                </div>
                <div class="input-group">
                    <label>Kata Sandi</label>
                    <input type="password" name="password" placeholder="********" required>
                </div>
                
                <button type="submit" class="btn">
                    Masuk ke Sistem 
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                </button>
            </form>

            <div class="footer-right">
                &copy; 2026 DINAS TENAGA KERJA KOTA PONTIANAK
            </div>
        </div>
    </div>
</div>

</body>
</html>