@extends('layouts.fullwidth', ['CurrentPage' => $CurrentPage])

@section('content')

    <div class="login-wrap d-flex align-items-center justify-content-center px-3">
        <div class="login-card p-4 p-md-5">

            <div class="text-center mb-3">
                <img class="login-logo mb-2" src="{{ asset('images/logo-csa.png') }}" alt="CSA">
                <h5 class="fw-bold mb-1">Welcome to CSA Web Admin</h5>
                <div class="text-muted small">Please login to continue</div>
            </div>

            {{-- Kalau guna Laravel auth normal --}}
            <form method="POST" action="{{ route('login') }}">
                @csrf

                <div class="mb-3">
                    <input type="text" name="username" value="{{ old('username') }}"
                        class="form-control @error('username') is-invalid @enderror" placeholder="Username"
                        autocomplete="username">
                    @error('username')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <input type="password" name="password" class="form-control @error('password') is-invalid @enderror"
                        placeholder="Password" autocomplete="current-password">
                    @error('password')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <button type="submit" class="btn btn-primary w-100 btn-login fw-semibold">
                    Login
                </button>
            </form>

        </div>
    </div>
    <div class="authincation h-100">
        <div class="container-fluid h-100">
            <div class="row h-100">
                <div class="col-lg-6 col-md-12 col-sm-12 mx-auto align-self-center">
                    <div class="login-form">
                        <div class="text-center">
                            <img src="{{ asset('images/logo.png') }}" class="mb-3 mx-auto d-block w-75" alt="">
                            <h3 class="title">Sign In</h3>
                            {{-- <p>Sign in to your account to start using NexaDash</p> --}}
                        </div>
                        <!-- Session message display -->
                        @if (session('error'))
                            <div class="alert alert-danger alert-dismissible fade show">
                                <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor"
                                    stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"
                                    class="me-2">
                                    <polygon
                                        points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2">
                                    </polygon>
                                    <line x1="15" y1="9" x2="9" y2="15"></line>
                                    <line x1="9" y1="9" x2="15" y2="15"></line>
                                </svg>
                                {{ session('error') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
                                </button>
                            </div>
                        @endif
                        @if ($errors->any())
                            <div class="alert alert-danger alert-dismissible fade show">
                                {{-- {{ session('error') }} --}}
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="btn-close"><span><i class="fa-solid fa-xmark"></i></span>
                                </button>
                            </div>
                        @endif
                        <form method="POST" action="{{ route('login.post') }}">
                            @csrf
                            <div class="mb-4">
                                <label class="mb-1">Email<span class="text-danger"> *</span></label>
                                <input type="email" class="form-control form-control" name="email">
                            </div>
                            <div class="mb-4 position-relative">
                                <label class="mb-1">Password<span class="text-danger"> *</span></label>
                                <input type="password" id="dz-password" class="form-control form-control" name="password">
                                <span class="show-pass eye">

                                    <i class="fa fa-eye-slash"></i>
                                    <i class="fa fa-eye"></i>

                                </span>
                            </div>
                            <div class="form-row d-flex justify-content-between mt-4 mb-2">
                                <div class="mb-4">
                                    <div class="form-check custom-checkbox mb-3">
                                        <input type="checkbox" class="form-check-input" id="customCheckBox1">
                                        <label class="form-check-label mt-1" for="customCheckBox1">Remember my
                                            preference</label>
                                    </div>
                                </div>
                                {{-- <div class="mb-4">
                                    <a href="{{ url('page-forgot-password') }}" class="btn-link text-primary">Forgot
                                        Password?</a>
                                </div> --}}
                            </div>
                            <div class="text-center mb-4 d-grid">
                                <button type="submit" class="btn btn-primary">Sign In</button>
                            </div>
                            {{-- <h6 class="login-title"><span class="px-3">Or continue with</span></h6>

                            <div class="mb-3">
                                <ul class="d-flex align-self-center justify-content-center">
                                    <li><a target="_blank" href="https://www.facebook.com/"
                                            class="fab fa-facebook-f btn-facebook"></a></li>
                                    <li><a target="_blank" href="https://www.google.com/"
                                            class="fab fa-google-plus-g btn-google-plus mx-2"></a></li>
                                    <li><a target="_blank" href="https://www.linkedin.com/"
                                            class="fab fa-linkedin-in btn-linkedin me-2"></a></li>
                                    <li><a target="_blank" href="https://twitter.com/"
                                            class="fab fa-twitter btn-twitter"></a></li>
                                </ul>
                            </div>
                            <p class="text-center">Not registered?
                                <a class="btn-link text-primary" href="page-register">Register</a>
                            </p> --}}
                        </form>
                    </div>
                </div>
                <div class="col-xl-6 col-lg-6">
                    <div class="pages-left h-100">
                        {{-- <div class="login-content">
                            <a href="{{ url('index') }}"><img src="{{ asset('images/logo-full.png') }}" class="mb-3"
                                    alt=""></a>
                            <p></p>
                        </div>
                        <div class="login-media text-center">
                            <img src="{{ asset('images/login-img.png') }}" alt="">
                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection