@extends('layouts.page')

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="{{ asset('css/login.css') }}">

<div class="container">
    <div class="login-box">
        
        <div class="form-section">
            <img src="{{ asset('images/mbip.png') }}" alt="MBIP Logo" class="logo-mbip">

            <h2>Selamat Datang</h2>
            <p>Sila masukkan maklumat berikut :</p>

            @if(session('success'))
                <div class="alert alert-success">
                    <i class="bi bi-check-circle-fill"></i>{{ session('success') }}
                </div>
            @endif

            @if($errors->any())
                <div class="alert alert-danger">
                    <i class="bi bi-exclamation-circle-fill"></i>{{ $errors->first() }}
                </div>
            @endif

            <form method="POST" action="{{ route('login.post') }}">
                @csrf
                
                <div class="input-group">
                    <label>Nombor Pekerja</label>
                    <input type="text" name="no_pekerja" placeholder="••••••••" 
                           value="{{ old('no_pekerja') }}" required autofocus>
                </div>

                <div class="input-group">
                    <label>Kata Laluan</label>
                    <input type="password" name="password" placeholder="••••••••" required>
                </div>

                <button type="submit" class="btn-signin">Log Masuk</button>
            </form>
        </div>

        <div class="content-section">
            <h1 class="content-title">myEventPostMortem</h1>
            <div class="p-4 text-white border-bottom border-secondary">
                <h6 class="mb-0 fw-bold" style="font-size:1.25rem;">Untuk Tujuan Ujicuba. Data akan direset sesuka hati.</h6>
            </div>
            <p class="content-desc">Sistem Rujukan Majlis-majlis di bawah MBIP.</p>
            
            <div class="image-placeholder">
                <img src="{{ asset('images/mbippp.jpg') }}" alt="Gambar 1" class="img-fluid custom-img">            
            </div>
        </div>

    </div>
</div>

@endsection