@extends('adminlte::master')

@section('title', 'Akses Smart Kantin | Smart Cendekia')

@section('body')
<div class="login-page" style="background: linear-gradient(135deg, #5B247A 0%, #1B0B26 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center;">
    <div class="login-box shadow-lg" style="width: 400px;">
        <div class="card border-0" style="border-radius: 20px; overflow: hidden;">
            <div class="card-header text-center bg-white pt-5 pb-4 border-0">
                <div class="mb-3">
                    <div class="bg-soft-royal d-inline-block p-3 rounded-circle mb-3">
                        <i class="fas fa-store fa-3x text-royal"></i>
                    </div>
                </div>
                <h3 class="font-weight-bold text-dark mb-1">Akses Kasir Kantin</h3>
                <p class="text-muted small px-4">Silakan masukkan 6 digit PIN unit kantin Anda untuk membuka Mesin POS.</p>
            </div>
            
            <div class="card-body px-5 pb-5">
                @if(session('error'))
                    <div class="alert bg-danger-soft text-danger border-0 rounded-pill text-center mb-4 py-2 small">
                        <i class="fas fa-exclamation-circle mr-1"></i> {{ session('error') }}
                    </div>
                @endif

                <form action="{{ route('kantin.auth') }}" method="POST">
                    @csrf
                    <div class="form-group mb-4">
                        <div class="input-group shadow-sm rounded-pill overflow-hidden border">
                            <input type="password" 
                                   name="pin" 
                                   id="pin_input"
                                   class="form-control form-control-lg text-center font-weight-bold border-0" 
                                   maxlength="6" 
                                   placeholder="••••••" 
                                   style="font-size: 2.2rem; letter-spacing: 12px; height: 80px; background: #f8fafc;" 
                                   required 
                                   autofocus
                                   inputmode="numeric"
                                   pattern="[0-9]*">
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-royal btn-block btn-lg rounded-pill shadow-md font-weight-bold py-3 transition-all hover-lift">
                        MASUK KE KASIR <i class="fas fa-chevron-right ml-2"></i>
                    </button>
                </form>
            </div>
        </div>
        
        <div class="text-center mt-4">
            <p class="text-white-50 small">
                &copy; {{ date('Y') }} Smart Cendekia - Sistem Pesantren Modern
            </p>
        </div>
    </div>
</div>

<style>
    /* UTILITIES */
    .text-royal { color: #5B247A !important; }
    .bg-soft-royal { background-color: rgba(91, 36, 122, 0.1); }
    .bg-danger-soft { background-color: #fff5f5; }
    .btn-royal { background: #5B247A; color: white; border: none; }
    .btn-royal:hover { background: #4a1d63; color: white; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
    .transition-all { transition: all 0.3s ease; }
    
    /* INPUT FOCUS */
    #pin_input:focus {
        background-color: #fff !important;
        box-shadow: none !important;
    }
    
    /* HIDE PASSWORD TOGGLE IN EDGE/CHROME */
    input::-ms-reveal, input::-ms-clear { display: none; }
</style>

<script>
    // UX: Hanya izinkan angka
    document.getElementById('pin_input').addEventListener('input', function (e) {
        this.value = this.value.replace(/[^0-9]/g, '');
    });
</script>
@stop