@extends('layouts.auth')
@section('title', __('lang_v1.login'))

@section('content')
<style>
    body, html {
        height: 100%;
        background: #f4f6f8;
    }
    .login-container {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f4f6f8;
    }
    .login-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.08);
        padding: 40px 32px 32px 32px;
        max-width: 400px;
        width: 100%;
        margin: 32px 0;
    }
    .login-card .logo {
        display: flex;
        justify-content: center;
        margin-bottom: 24px;
    }
    .login-card .logo img {
        max-width: 120px;
    }
    .login-card h2 {
        text-align: center;
        font-weight: 700;
        color: #333;
        margin-bottom: 8px;
    }
    .login-card p {
        text-align: center;
        color: #888;
        margin-bottom: 24px;
    }
    .login-card .form-group label {
        color: #555;
        font-weight: 500;
    }
    .login-card .form-control {
        border-radius: 6px;
        border: 1px solid #d1d5db;
        font-size: 16px;
        padding: 10px 12px;
        background: #f9fafb;
    }
    .login-card .btn-primary {
        background: #6c757d;
        border: none;
        border-radius: 6px;
        font-size: 18px;
        font-weight: 600;
        padding: 10px 0;
        margin-top: 8px;
        width: 100%;
        transition: background 0.2s;
    }
    .login-card .btn-primary:hover {
        background: #495057;
    }
    .login-card .header-right-div {
        text-align: right;
        margin-bottom: 16px;
        font-size: 15px;
    }
    .login-card .header-right-div a {
        color: #6c757d;
        text-decoration: underline;
    }
    .login-card .help-block {
        color: #d9534f;
        font-size: 14px;
    }
    .login-card .forgot-link {
        display: block;
        text-align: right;
        margin-top: 8px;
        color: #6c757d;
        text-decoration: underline;
        font-size: 15px;
    }
    @media (max-width: 500px) {
        .login-card {
            padding: 24px 8px;
        }
    }
</style>

<div class="login-container">
    <div class="login-card">
        <div class="logo">
            <img src="/img/jteelogo.png" alt="Logo">
        </div>
        <h2>{{ config('app.name', 'LAMPOS') }}</h2>
        <p>@lang('lang_v1.login_details')</p>
        @if(env('ALLOW_REGISTRATION', true))
            <div class="header-right-div">
                {{ __('business.not_yet_registered')}} <a href="{{ route('business.getRegister') }}">{{ __('business.register_now') }}</a>
            </div>
        @endif
        <form method="POST" action="{{ route('login') }}">
            {{ csrf_field() }}
            <div class="form-group{{ $errors->has('username') ? ' has-error' : '' }}">
                <label for="username">@lang('lang_v1.username')</label>
                @php
                    $username = old('username');
                    $password = null;
                    if(config('app.env') == 'demo'){
                        $username = 'admin';
                        $password = '123456';
                        $demo_types = array(
                            'all_in_one' => 'admin',
                            'super_market' => 'admin',
                            'pharmacy' => 'admin-pharmacy',
                            'electronics' => 'admin-electronics',
                            'services' => 'admin-services',
                            'restaurant' => 'admin-restaurant',
                            'superadmin' => 'superadmin'
                        );
                        if( !empty($_GET['demo_type']) && array_key_exists($_GET['demo_type'], $demo_types) ){
                            $username = $demo_types[$_GET['demo_type']];
                        }
                    }
                @endphp
                <input id="username" type="text" class="form-control" name="username" value="{{ $username }}" required autofocus>
                @if ($errors->has('username'))
                    <span class="help-block">
                        <strong>{{ $errors->first('username') }}</strong>
                    </span>
                @endif
            </div>
            <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                <label for="password">@lang('lang_v1.password')</label>
                <input id="password" type="password" class="form-control" name="password" value="{{ $password }}" required>
                @if ($errors->has('password'))
                    <span class="help-block">
                        <strong>{{ $errors->first('password') }}</strong>
                    </span>
                @endif
            </div>
            <button type="submit" class="btn btn-primary">
                @lang('lang_v1.start_work')
            </button>
            @if(config('app.env') == 'demo')
                <a class="forgot-link" href="{{ route('password.request') }}">
                    @lang('lang_v1.forgot_your_password')
                </a>
            @endif
        </form>
        @if(config('app.env') == 'demo')
        <div class="mt-4">
            <hr>
            <div class="text-center" style="margin-bottom: 8px;">
                <strong>Demo Shops</strong> <small><i>Demos are for example purpose only, Ultimate POS <u>can be used in many other similar businesses.</u></i></small>
            </div>
            <div class="d-flex flex-wrap justify-content-center" style="gap: 8px;">
                <a href="?demo_type=all_in_one" class="btn btn-sm btn-outline-secondary">All In One</a>
                <a href="?demo_type=pharmacy" class="btn btn-sm btn-outline-secondary">Pharmacy</a>
                <a href="?demo_type=services" class="btn btn-sm btn-outline-secondary">Multi-Service Center</a>
                <a href="?demo_type=electronics" class="btn btn-sm btn-outline-secondary">Electronics & Mobile Shop</a>
                <a href="?demo_type=super_market" class="btn btn-sm btn-outline-secondary">Super Market</a>
                <a href="?demo_type=restaurant" class="btn btn-sm btn-outline-secondary">Restaurant</a>
                <a href="?demo_type=superadmin" class="btn btn-sm btn-outline-secondary">SaaS / Superadmin*</a>
            </div>
            <p class="help-block text-center mt-2"><span class="text-danger">*</span> SaaS / Superadmin module is a Premium extension to LamPOS.</p>
        </div>
        @endif
    </div>
</div>
@endsection