<?php $general_setting = DB::table('general_settings')->find(1); ?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{{$general_setting->site_title}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="icon" type="image/png" href="{{url('public/logo', $general_setting->site_logo)}}" />

    <!-- Bootstrap -->
    <link rel="stylesheet" href="{{ asset('public/vendor/bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('public/vendor/font-awesome/css/font-awesome.min.css') }}">

    <script src="{{ asset('public/vendor/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('public/vendor/bootstrap/js/bootstrap.min.js') }}"></script>

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

    <style>
        body {
            background: linear-gradient(135deg, #2c3e50, #4ca1af);
            height: 100vh;
            font-family: 'Poppins', sans-serif;
        }

        .login-card {
            width: 100%;
            max-width: 420px;
            margin: 70px auto;
            background: #fff;
            border-radius: 16px;
            padding: 40px 35px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.25);
            animation: fadeIn 0.5s ease-out;
        }

        @keyframes fadeIn {
            from { opacity:0; transform: translateY(20px);}
            to { opacity:1; transform: translateY(0);}
        }

        .login-logo img {
            width: 110px;
            margin-bottom: 15px;
        }

        .pos-input {
            border-radius: 10px;
            height: 48px;
            padding-left: 15px;
            font-size: 15px;
        }

        .btn-login {
            height: 48px;
            border-radius: 10px;
            font-size: 16px;
            background-color: #3498db;
            border: none;
        }

        .btn-login:hover {
            background-color: #2980b9;
        }

        /* POS Style Toast */
        #toast-box {
            position: fixed;
            top: -70px;
            left: 50%;
            transform: translateX(-50%);
            min-width: 300px;
            background: #e74c3c;
            color: #fff;
            padding: 15px 20px;
            border-radius: 8px;
            text-align: center;
            font-weight: 500;
            z-index: 9999;
            transition: 0.5s ease;
            box-shadow: 0 5px 20px rgba(0,0,0,0.4);
        }

        #toast-box.show {
            top: 20px;
        }
    </style>
</head>

<body>

<!-- Toast message -->
@if(session('login_error'))
<div id="toast-box">{{ session('login_error') }}</div>
<script>
    setTimeout(function(){
        document.getElementById('toast-box').classList.add('show');
    }, 200);

    setTimeout(function(){
        document.getElementById('toast-box').classList.remove('show');
    }, 4000);
</script>
@endif

<div class="login-card">
    <div class="text-center login-logo">
        @if($general_setting->site_logo)
        <img src="{{url('public/logo', $general_setting->site_logo)}}">
        @else
        <h3 class="mb-3 text-dark">{{$general_setting->site_title}}</h3>
        @endif
    </div>

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

        <label class="font-weight-bold">Username</label>
        <input type="text" name="name" class="form-control pos-input" required>

        @error('name')
        <small class="text-danger">{{ $message }}</small>
        @enderror

        <label class="font-weight-bold mt-3">Password</label>
        <input type="password" name="password" class="form-control pos-input" required>

        @error('password')
        <small class="text-danger">{{ $message }}</small>
        @enderror

        <button type="submit" class="btn btn-primary btn-block btn-login mt-4">
            {{ trans('file.LogIn') }}
        </button>
    </form>

    <div class="text-center mt-4">
        <p class="text-muted">{{trans('file.Developed By')}} <b>{{$general_setting->developed_by}}</b></p>
    </div>
</div>

</body>
</html>
