@extends('partials.layouts.master_auth')

@section('title', 'Sign In - MediTrack Medical Waste Management')
@section('meta_description', 'Sign in to MediTrack - Medical waste management system for healthcare facilities. Access your dashboard to track and manage medical waste disposal efficiently.')

@section('content')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">

    <!-- START -->
    <div class="container signIn">
         <header>
 <!-- <img src="assets/images/auth/login_bg.jpg" alt="Auth Background"
            class="auth-bg light w-full h-full opacity-60 position-absolute top-0"> -->
        <img src="assets/images/auth/auth_bg_dark.jpg" alt="Auth Background" class="auth-bg d-none dark">

 <div class="p-3"></div>
          <div>
             <img src="assets/images/logo-dark.png" 
     alt="Logo Dark" 
     height="50" 
     class=" mx-auto d-block p-1 pb-1">
                 <!-- <div class=" bg-primary w-100" style="position: relative; width: 600px;">
                    <img src="assets/images/k.png" style="position: absolute; right: 340px;" alt="">
                 </div>                -->
          </div>
        

         </header>                       

        <div>
            <div class="row justify-content-center align-items-center min-vh-100 py-10">
                <div class="col-12 col-md-8 col-lg-6 col-xl-5">
                    <div class="card mx-xxl-8">
                        <div class="card-body py-12 px-8">
                            <div style="text-align: center;">
                            <img src="assets/images/Frame.png" />
                            </div>
                            <h2 class="mb-2 text-center login-header-text">Welcome Back</h2>
                            <p class="text-center" style="color: #00000082;">Glad to see you again. Log in to your account.</p>
                           <form action="{{ route('login.submit') }}" method="POST">
    @csrf

    @if($errors->has('login'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ $errors->first('login') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row g-4">
        <div class="col-12">
            <label for="username" class="form-label" style="color: #00000082;">
                Username <span class="text-danger">*</span>
            </label>
            <input type="text" name="username" class="form-control" id="username"
                placeholder="Enter your Username" value="{{ old('username') }}" required>
        </div>
                
        <div class="col-lg-12 col-md-6 col-sm-6">
    <label for="password" class="form-label" style="color: #00000082;">
        Password <span class="text-danger">*</span>
    </label>
    <div class="input-group" style="border: 1px solid #d1d5db; border-radius: 0.375rem;">
        <input type="password" name="password" class="form-control bg-white" id="password" 
            placeholder="Enter your password" required
            style="border: none; box-shadow: none;">
        <span class="input-group-text bg-white" id="togglePassword" style="cursor: pointer; border: none;">
            <i class="bi bi-eye" id="eyeIcon"></i>
        </span>
    </div>
</div>
        
        <div class="col-12 mt-8">
            <button type="submit" class="btn w-full mb-4 text-white login-btn" style="background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(180deg, #4598F9 0%, #3A77BF 100%); box-shadow: 0 1px 2px 0 rgba(13, 13, 18, 0.06);">
                Login
            </button>
        </div>
    </div>
</form>
                            <div class="text-center">
                            </div>
                        </div>
                    </div>                 
                    
                </div>
            </div>
        </div>
            <div style="display: flex; justify-content: space-between; align-items: center;">
    <!-- Left side -->
    <div>
        <p class="position-relative text-center fs-11 mb-0">© 2025 Meditrack. All right reserved.</p>
    </div>

    <!-- Right side -->
    <div class="d-flex">
    <p class="pe-1"><i class="bi bi-lock pe-1"></i> Privacy</p>
    <p class="pe-1"><i class="bi bi-file-earmark pe-1"></i> Terms</p>
    <p><i class="bi bi-question-circle pe-1"></i> Get Help</p>
    </div>
</div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const passwordInput = document.getElementById("password");
        const togglePassword = document.getElementById("togglePassword");
        const eyeIcon = document.getElementById("eyeIcon");

        togglePassword.addEventListener("click", () => {
            const type = passwordInput.getAttribute("type") === "password" ? "text" : "password";
            passwordInput.setAttribute("type", type);

            if (type === "password") {
                eyeIcon.classList.remove("bi-eye-slash");
                eyeIcon.classList.add("bi-eye");
            } else {
                eyeIcon.classList.remove("bi-eye");
                eyeIcon.classList.add("bi-eye-slash");
            }
        });
    });

</script>

<script>
    .login-btn {
        border-radius: 12px;
background: var(--grad, linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(180deg, #4598F9 0%, #3A77BF 100%));
/* Shadow/XSmall */
box-shadow: 0 1px 2px 0 rgba(13, 13, 18, 0.06);
    }
    .login-header-text {
        color: var(--Greyscale-900, #0D0D12);
text-align: center;
/* Heading/H4 */
font-family: "Inter Tight";
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 130%; /* 31.2px */
    }
</script>

@endsection

@section('js')
@endsection