@extends('../layout/' . $layout)

@section('head')
    <title>Login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            overflow: hidden;        /* ← this is the key line */
        }

        /* ── Full-screen wrapper ── */
        .login-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f0f4ff;
            padding: 1rem;
        }

        /* ── Outer card ── */
        .login-wrap {
            width: 100%;
            max-width: 960px;
            min-height: 560px;
            border-radius: 20px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.14);
        }

        @media (min-width: 768px) {
            .login-wrap {
                flex-direction: row;
                min-height: 580px;
            }
        }

        /* ────────────────────────────────
           LEFT PANEL
        ──────────────────────────────── */
        .login-left {
            position: relative;
            background: #2d3db5;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2.5rem 4.5rem 2.5rem 2.5rem; /* extra right padding → room for curve */
            flex: 0 0 100%;
        }

        @media (min-width: 768px) {
            .login-left {
                flex: 0 0 55%;
                padding: 3rem 5rem 3rem 3rem;
            }
        }

        /* White curved divider on the right edge of the left panel */
        .login-left::after {
            content: '';
            position: absolute;
            top: 0;
            right: -56px;
            bottom: 0;
            width: 112px;
            background: #fff;
            border-radius: 60% 0 0 60%;
            z-index: 2;
        }

        /* Hide the curve on mobile (stacked layout) */
        @media (max-width: 767px) {
            .login-left::after {
                display: none;
            }
            .login-left {
                padding: 2rem 1.5rem 2.5rem;
            }
        }

        /* Decorative SVG art sits behind content */
        .login-bg-art {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }

        /* Content stack inside left panel */
        .login-left-inner {
            position: relative;
            z-index: 1;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        /* Brand row */
        .login-brand {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .login-brand-icon {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            border: 1.5px solid rgba(255, 255, 255, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            flex-shrink: 0;
        }

        .login-brand-icon img {
            width: 32px;
            height: 32px;
            object-fit: contain;
        }

        .login-brand-name {
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            line-height: 1.2;
        }

        .login-brand-name small {
            font-size: 11px;
            opacity: 0.72;
            font-weight: 400;
            display: block;
            letter-spacing: 0.3px;
        }

        /* Hero headline */
        .login-hero-title {
            color: #fff;
            font-size: 28px;
            font-weight: 700;
            line-height: 1.35;
        }

        @media (min-width: 768px) {
            .login-hero-title { font-size: 32px; }
        }

        /* Hero body */
        .login-hero-desc {
            color: rgba(255, 255, 255, 0.76);
            font-size: 13px;
            line-height: 1.65;
            max-width: 340px;
        }

        /* Pill chips */
        .login-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }

        .login-pill {
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.26);
            color: rgba(255, 255, 255, 0.9);
            font-size: 11px;
            padding: 5px 13px;
            border-radius: 20px;
        }

        /* ────────────────────────────────
           RIGHT PANEL
        ──────────────────────────────── */
        .login-right {
            flex: 1;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2.5rem 2rem;
            position: relative;
            z-index: 1;
        }

        @media (min-width: 768px) {
            .login-right {
                padding: 3rem 3rem 3rem 4rem;
                justify-content: flex-start;
            }
        }

        /* Form card */
        .login-form-box {
            width: 100%;
            max-width: 310px;
        }

        .login-form-box h2 {
            font-size: 24px;
            font-weight: 700;
            color: #1a1a2e;
            margin-bottom: 4px;
        }

        .login-form-sub {
            font-size: 12px;
            color: #6b7280;
            margin-bottom: 1.75rem;
        }

        /* Field */
        .lf-field {
            margin-bottom: 14px;
        }

        .lf-field label {
            font-size: 11px;
            font-weight: 600;
            color: #4b5563;
            display: block;
            margin-bottom: 5px;
            letter-spacing: 0.3px;
            text-transform: uppercase;
        }

        .lf-field input[type="text"],
        .lf-field input[type="password"] {
            width: 100%;
            padding: 11px 14px;
            border: 1.5px solid #e5e7eb;
            border-radius: 10px;
            font-size: 13px;
            color: #1a1a2e;
            background: #fafafa;
            outline: none;
            transition: border-color .2s, box-shadow .2s, background .2s;
        }

        .lf-field input[type="text"]:focus,
        .lf-field input[type="password"]:focus {
            border-color: #2d3db5;
            box-shadow: 0 0 0 3px rgba(45, 61, 181, 0.1);
            background: #fff;
        }

        /* Inline error */
        .lf-error {
            font-size: 11px;
            color: #dc2626;
            margin-top: 4px;
        }

        /* Show password row */
        .lf-show-pass {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 12px;
            color: #6b7280;
            cursor: pointer;
            margin-bottom: 1.25rem;
            user-select: none;
        }

        .lf-show-pass input[type="checkbox"] {
            accent-color: #2d3db5;
            width: 14px;
            height: 14px;
            cursor: pointer;
        }

        /* reCAPTCHA wrapper */
        .lf-captcha {
            margin-bottom: 14px;
        }

        /* Submit button */
        .lf-btn {
            width: 100%;
            padding: 12px;
            background: #2d3db5;
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            letter-spacing: 0.2px;
            transition: background .15s, transform .1s;
        }

        .lf-btn:hover  { background: #1e2d9b; }
        .lf-btn:active { transform: scale(0.98); }

        /* T&C row (hidden by default via PHP) */
        .lf-tc-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-top: 14px;
            font-size: 12px;
            color: #6b7280;
        }

        .lf-tc-row input[type="checkbox"] {
            accent-color: #2d3db5;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .lf-tc-row a { color: #2d3db5; }

        /* Alert box */
        .lf-alert {
            display: none;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
            padding: 10px 14px;
            background: #fef2f2;
            border: 1px solid #fca5a5;
            border-radius: 8px;
            font-size: 12px;
            color: #b91c1c;
            position: relative;
        }

        .lf-alert.show { display: flex; }

        .lf-alert-close {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            color: #b91c1c;
            font-size: 16px;
            line-height: 1;
        }

        /* Mobile logo shown only on small screens */
        .login-mobile-logo {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 1.25rem;
        }

        .login-mobile-logo img { height: 52px; }

        .login-mobile-logo span {
            margin-top: 6px;
            font-size: 14px;
            color: #1a1a2e;
            font-weight: 600;
        }

        @media (min-width: 768px) {
            .login-mobile-logo { display: none; }
        }
    </style>
@endsection

@section('content')
<div class="login-page">
    <div class="login-wrap">

        {{-- ══════════════════════════════
             LEFT PANEL
        ══════════════════════════════ --}}
        <div class="login-left">

            {{-- Background decorative SVG --}}
            <svg class="login-bg-art" viewBox="0 0 560 580" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
                <circle cx="30"  cy="60"  r="120" fill="rgba(255,255,255,0.04)"/>
                <circle cx="500" cy="520" r="150" fill="rgba(255,255,255,0.04)"/>
                <circle cx="280" cy="290" r="220" fill="rgba(255,255,255,0.02)"/>
                <g opacity="0.13" fill="none" stroke="#fff" stroke-width="1.3">
                    <ellipse cx="90"  cy="320" rx="34" ry="15" transform="rotate(-35 90 320)"/>
                    <line x1="90"  y1="335" x2="88"  y2="395"/>
                    <ellipse cx="107" cy="348" rx="19" ry="9"  transform="rotate(-22 107 348)"/>
                    <ellipse cx="73"  cy="352" rx="16" ry="7"  transform="rotate(-50 73 352)"/>
                    <ellipse cx="45"  cy="455" rx="25" ry="11" transform="rotate(-30 45 455)"/>
                    <line x1="45"  y1="466" x2="45"  y2="515"/>
                    <ellipse cx="58"  cy="478" rx="15" ry="7"  transform="rotate(-22 58 478)"/>
                    <ellipse cx="165" cy="488" rx="30" ry="13" transform="rotate(-38 165 488)"/>
                    <line x1="165" y1="501" x2="163" y2="548"/>
                    <ellipse cx="182" cy="514" rx="18" ry="8"  transform="rotate(-25 182 514)"/>
                </g>
                <g opacity="0.08" fill="#fff">
                    <rect x="350" y="378" width="7"  height="86" rx="3.5"/>
                    <ellipse cx="353" cy="340" rx="24" ry="40"/>
                    <rect x="382" y="398" width="6"  height="62" rx="3"/>
                    <ellipse cx="385" cy="366" rx="18" ry="33"/>
                    <rect x="320" y="408" width="6"  height="56" rx="3"/>
                    <ellipse cx="323" cy="378" rx="16" ry="30"/>
                </g>
                <g opacity="0.06" fill="#fff">
                    <path d="M0 540 Q140 515 280 530 Q420 545 560 526 L560 580 L0 580Z"/>
                </g>
            </svg>

            {{-- Content --}}
            <div class="login-left-inner">

                {{-- Brand --}}
                <div class="login-brand">
                    <div class="login-brand-icon">
                        <img src="{{ asset('dist/images/logo-potrait-round.png') }}" alt="Mahkota Agro">
                    </div>
                    <div class="login-brand-name">
                        MAHKOTA AGRO
                        <small>Order Portal</small>
                    </div>
                </div>

                {{-- Headline --}}
                <div class="login-hero-title">
                    Pesan Produk<br>Pertanian,<br>Hanya dengan klik.
                </div>

                {{-- Description --}}
                <p class="login-hero-desc">
                    Kemudahan pemesanan produk pertanian berkualitas langsung dari genggaman Anda.
                </p>

                {{-- Pills --}}
                <div class="login-pills">
                    <div class="login-pill">🌾 Benih Unggul</div>
                    <div class="login-pill">🚜 Alat Tani</div>
                    <div class="login-pill">🌿 Pupuk</div>
                    <div class="login-pill">⚡ Cepat &amp; Mudah</div>
                </div>

            </div>
        </div>

        {{-- ══════════════════════════════
             RIGHT PANEL — LOGIN FORM
        ══════════════════════════════ --}}
        <div class="login-right">
            <div class="login-form-box">

                {{-- Mobile-only logo --}}
                <div class="login-mobile-logo">
                    <img src="{{ asset('dist/images/logo-potrait-round.png') }}" alt="Logo">
                    <span>ORDER <strong>MAHKOTA AGRO</strong></span>
                </div>

                <h2>Masuk</h2>
                <p class="login-form-sub">Gunakan akun yang diberikan oleh admin</p>

                <form id="login-form" action="{{ route('login') }}" method="POST">
                    @csrf

                    {{-- Username --}}
                    <div class="lf-field">
                        <label for="input-email">Nama Pengguna</label>
                        <input type="text" id="input-email" name="email"
                               placeholder="Masukkan nama pengguna"
                               value="{{ old('email') }}">
                        @if ($errors->has('email'))
                            <div id="error-email" class="lf-error">
                                <strong>{{ $errors->first('email') }}</strong>
                            </div>
                        @endif
                    </div>

                    {{-- Password --}}
                    <div class="lf-field">
                        <label for="input-password">Kata Sandi</label>
                        <input type="password" id="input-password" name="password"
                               placeholder="Masukkan kata sandi">
                        @if ($errors->has('password'))
                            <div id="error-password" class="lf-error">
                                <strong>{{ $errors->first('password') }}</strong>
                            </div>
                        @endif
                    </div>

                    {{-- Show password --}}
                    <label class="lf-show-pass" for="show-password">
                        <input type="checkbox" id="show-password" onclick="centang()">
                        Lihat Password
                    </label>

                    {{-- reCAPTCHA (shown after 3 failed attempts) --}}
                    @if (session()->get('failedAttempts') >= 3)
                        <div class="lf-captcha">
                            {!! NoCaptcha::renderJs() !!}
                            {!! NoCaptcha::display() !!}
                            @if ($errors->has('g-recaptcha-response'))
                                <div class="lf-error">
                                    <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                </div>
                            @endif
                        </div>
                    @endif

                    {{-- Submit --}}
                    <button id="btn-login" class="lf-btn" type="submit">Masuk!</button>

                    {{-- Terms & Conditions (hidden, enable by removing the `hidden` attribute) --}}
                    <div class="lf-tc-row" hidden>
                        <input type="checkbox" id="cb-tc"
                               {{ isset($hasLoggedIn) && $hasLoggedIn ? 'checked' : '' }}>
                        <label for="cb-tc">
                            Dengan ini saya menyetujui,
                            <a href="javascript:void(0);" onclick="openModal()">
                                <i>Syarat &amp; Ketentuan</i>
                            </a>
                            yang berlaku.
                        </label>
                    </div>

                    {{-- T&C alert --}}
                    <div id="alert-tc" class="lf-alert" role="alert">
                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                        </svg>
                        Silakan setujui Syarat &amp; Ketentuan terlebih dahulu.
                        <button type="button" class="lf-alert-close" onclick="closeAlert()">&times;</button>
                    </div>

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

    </div>
</div>

{{-- ══════════════════════════════
     TERMS & CONDITIONS MODAL
══════════════════════════════ --}}
<div id="tc-modal"
     style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5);
            z-index:9999; padding:1rem; overflow-y:auto;
            align-items:center; justify-content:center;">
    <div style="background:#fff; width:100%; max-width:860px; border-radius:14px;
                overflow:hidden; margin:auto; box-shadow:0 20px 60px rgba(0,0,0,0.2);"
         onclick="event.stopPropagation()">

        {{-- Header --}}
        <div style="display:flex; justify-content:space-between; align-items:center;
                    padding:1rem 1.25rem; border-bottom:1px solid #e5e7eb; background:#f9fafb;">
            <h2 style="font-size:16px; font-weight:600; color:#1a1a2e;">Syarat &amp; Ketentuan</h2>
            <button onclick="closeModal()"
                    style="background:none; border:none; font-size:22px; cursor:pointer; color:#6b7280;"
                    aria-label="Tutup">&times;</button>
        </div>

        {{-- Body: two columns --}}
        <div style="display:flex; flex-direction:column;">
            @media (min-width:640px) {
                {{-- handled inline below --}}
            }
            <div style="display:flex; flex-wrap:wrap;">

                {{-- Summary --}}
                <div style="width:100%; padding:1.5rem; background:#f3f4f6; border-right:1px solid #e5e7eb;">
                    <h3 style="font-size:14px; font-weight:600; color:#1a1a2e;">Ringkasan</h3>
                    <p style="font-size:12px; color:#6b7280; margin-top:6px; line-height:1.6;">
                        Berikut adalah Syarat dan Ketentuan yang berlaku. Silakan baca dengan teliti sebelum menyetujui layanan ini.
                    </p>
                    <ul style="font-size:12px; color:#4b5563; margin-top:10px; padding-left:1rem; line-height:2;">
                        <li>Pengertian</li>
                        <li>Keamanan akun</li>
                        <li>Batasan tanggung jawab</li>
                        <li>Hukum yang berlaku</li>
                        <li>Pembaharuan ketentuan</li>
                    </ul>
                </div>

                {{-- Full text --}}
                <div style="width:100%; padding:1.5rem; max-height:420px; overflow-y:auto;">
                    <p style="font-size:12px; color:#4b5563; line-height:1.8;">
                        Selamat datang di portal
                        <a href="https://order.benihcitraasia.co.id/login" style="color:#2d3db5;">
                            https://order.benihcitraasia.co.id/login
                        </a>.<br><br>

                        Syarat dan ketentuan yang ditetapkan di bawah ini merupakan perjanjian antara Pengguna ("Anda")
                        dengan PT Benih Citra Asia ("BintangAsia" atau "Kami") yang mengatur hak, kewajiban, dan tanggung
                        jawab Pengguna dalam menggunakan layanan ini.<br><br>

                        <strong>A. Definisi</strong><br>
                        - BintangAsia adalah PT Benih Citra Asia yang menyediakan portal pemesanan benih secara online.<br>
                        - Pengguna adalah pihak yang menggunakan layanan portal ini.<br>
                        - Pembeli adalah Pengguna yang melakukan permintaan atas barang yang dijual melalui portal ini.<br><br>

                        <strong>B. Akun, Password, dan Keamanan</strong><br>
                        - Pengguna harus menjaga keamanan akun mereka.<br>
                        - BintangAsia tidak bertanggung jawab atas penyalahgunaan akun.<br>
                        - Jangan pernah memberikan OTP atau password Anda ke pihak lain.<br><br>

                        <strong>C. Penolakan Jaminan dan Batasan Tanggung Jawab</strong><br>
                        - Layanan diberikan "SEBAGAIMANA ADANYA".<br>
                        - Pengguna membebaskan dari segala tuntutan bentuk kerugian baik materil maupun non materil
                          terhadap PT Benih Citra Asia atas kehilangan data, keterlambatan layanan atau tindakan
                          peretesan yang diakibatkan oleh kelalaian pengguna.<br><br>

                        <strong>D. Pilihan Hukum</strong><br>
                        - Perjanjian ini tunduk pada hukum Republik Indonesia.<br><br>

                        <strong>E. Pembaharuan</strong><br>
                        - Syarat &amp; Ketentuan ini dapat diperbarui sewaktu-waktu tanpa pemberitahuan sebelumnya.
                    </p>
                </div>

            </div>
        </div>

        {{-- Footer --}}
        <div style="padding:1rem 1.25rem; border-top:1px solid #e5e7eb; background:#f9fafb; text-align:right;">
            <button onclick="closeModal()"
                    style="padding:8px 20px; background:#4b5563; color:#fff; border:none;
                           border-radius:8px; font-size:13px; cursor:pointer;">
                Tutup
            </button>
        </div>

    </div>
</div>
@endsection

@section('script')
<script>
    /* ── Show / hide password ── */
    function centang() {
        const pw = document.getElementById('input-password');
        const cb = document.getElementById('show-password');
        pw.type = cb.checked ? 'text' : 'password';
    }

    /* ── T&C modal ── */
    function openModal() {
        const m = document.getElementById('tc-modal');
        m.style.display = 'flex';
    }

    function closeModal() {
        const m = document.getElementById('tc-modal');
        m.style.display = 'none';
    }

    /* Close modal on backdrop click */
    document.getElementById('tc-modal').addEventListener('click', function () {
        closeModal();
    });

    /* ── T&C alert ── */
    function closeAlert() {
        document.getElementById('alert-tc').classList.remove('show');
    }

    /* ── On DOM ready ── */
    document.addEventListener('DOMContentLoaded', function () {
        const tcCheckbox = document.getElementById('cb-tc');
        const alertTC    = document.getElementById('alert-tc');

        /* Hide alert when checkbox is ticked */
        if (tcCheckbox) {
            tcCheckbox.addEventListener('change', function () {
                if (tcCheckbox.checked) {
                    alertTC.classList.remove('show');
                }
            });
        }
    });
</script>
@endsection