@extends('layouts.auth')

@section('head')

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Sign In | Z&amp;T Stationery Distribution Management System</title>

<!-- Favicon -->
<link rel="shortcut icon" href="{{ asset('assets/images/favicon.ico') }}">

<link rel="stylesheet" href="{{ asset('assets/css/backend-plugin.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/backende209.css') }}">
<link rel="stylesheet" href="{{ asset('assets/vendor/@fortawesome/fontawesome-free/css/all.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/vendor/line-awesome/dist/line-awesome/css/line-awesome.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/vendor/remixicon/fonts/remixicon.css') }}">

@endsection


@section('content')

<div class="wrapper">

    <section class="login-content">

        <div class="row align-items-center justify-content-center height-self-center">

            <div class="col-lg-8">

                <div class="card auth-card">

                    <div class="card-body p-0">

                        <div class="d-flex align-items-center auth-content">

                            <div class="col-lg-7 align-self-center">

                                <div class="p-3">

                                    <h2 class="mb-2">
                                        Welcome Back
                                    </h2>

                                    <p>
                                        Z&amp;T Stationery Distribution Management System
                                    </p>


                                    <form
                                        action="{{ route('login.submit') }}"
                                        method="POST"
                                    >

                                        @csrf


                                        <div class="row">


                                            {{-- EMAIL --}}

                                            <div class="col-lg-12">

                                                <div class="floating-label form-group">

                                                    <input
                                                        class="floating-input form-control @error('user_email') is-invalid @enderror"
                                                        type="email"
                                                        name="user_email"
                                                        placeholder=" "
                                                        value="{{ old('user_email') }}"
                                                        required
                                                        autocomplete="email"
                                                    >

                                                    <label>
                                                        Email Address
                                                    </label>


                                                    @error('user_email')

                                                        <small class="text-danger">
                                                            {{ $message }}
                                                        </small>

                                                    @enderror

                                                </div>

                                            </div>


                                            {{-- PASSWORD --}}

                                            <div class="col-lg-12">

                                                <div class="floating-label form-group">

                                                    <input
                                                        class="floating-input form-control @error('password') is-invalid @enderror"
                                                        type="password"
                                                        name="password"
                                                        placeholder=" "
                                                        required
                                                        autocomplete="current-password"
                                                    >

                                                    <label>
                                                        Password
                                                    </label>


                                                    @error('password')

                                                        <small class="text-danger">
                                                            {{ $message }}
                                                        </small>

                                                    @enderror

                                                </div>

                                            </div>


                                            {{-- REMEMBER ME --}}

                                            <div class="col-lg-12">

                                                <div class="custom-control custom-checkbox mb-3">

                                                    <input
                                                        type="checkbox"
                                                        class="custom-control-input"
                                                        id="customCheck1"
                                                        name="remember"
                                                        value="1"
                                                    >

                                                    <label
                                                        class="custom-control-label control-label-1"
                                                        for="customCheck1"
                                                    >
                                                        Remember Me
                                                    </label>

                                                </div>

                                            </div>

                                        </div>


                                        <button
                                            type="submit"
                                            class="btn btn-primary"
                                        >
                                            Sign In
                                        </button>

                                    </form>

                                </div>

                            </div>


                            {{-- RIGHT SIDE --}}

                            <div class="col-lg-5 content-right">

                                <div class="position-relative h-100">

                                    <img
                                        src="{{ asset('assets/images/login/01.png') }}"
                                        class="img-fluid image-right"
                                        alt="Z&T Stationery Distribution illustration"
                                    >


                                    <div
                                        class="position-absolute w-100 text-center"
                                        style="bottom: 30px; left: 0;"
                                    >

                                        <ul class="list-unstyled text-white mb-0">

                                            <li class="mb-1 text-primary">
                                                <i class="ri-check-line mr-1"></i>
                                                Manage Inventory
                                            </li>

                                            <li class="mb-1 text-primary">
                                                <i class="ri-check-line mr-1"></i>
                                                Track Orders
                                            </li>

                                            <li class="mb-1 text-primary">
                                                <i class="ri-check-line mr-1"></i>
                                                Monitor Payments
                                            </li>

                                            <li class="mb-1 text-primary">
                                                <i class="ri-check-line mr-1"></i>
                                                Generate Reports
                                            </li>

                                        </ul>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>


        <div class="row justify-content-center">

            <div class="col-lg-8 text-center">

                <p class="text-muted small mt-3 mb-0">
                    &copy; 2026 Z&amp;T Stationery Distribution Management System.
                    All Rights Reserved.
                </p>

            </div>

        </div>

    </section>

</div>

@endsection


@section('scripts')

<script src="{{ asset('assets/js/backend-bundle.min.js') }}"></script>
<script src="{{ asset('assets/js/table-treeview.js') }}"></script>
<script src="{{ asset('assets/js/customizer.js') }}"></script>
<script src="{{ asset('assets/js/chart-custom.js') }}"></script>
<script src="{{ asset('assets/js/app.js') }}"></script>

@endsection