@extends('layouts.auth')

@push('styles')
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
    rel="stylesheet"
  />
  <style>
    body {
      background-color: #f8f9fa;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .login-card {
      max-width: 400px;
      width: 100%;
    
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      padding: 2rem;
    }

    .login-logo {
      display: flex;
      justify-content: center;
      margin-bottom: 1rem;
    }

    .login-logo img {
      width: 50px;
    }

    .form-control:focus {
      box-shadow: none;
      border-color: #0d6efd;
    }

    .form-label {
      font-weight: 500;
    }

    .btn-primary {
      background-color: #3b82f6;
      border-color: #3b82f6;
    }

    .btn-primary:hover {
      background-color: #2563eb;
      border-color: #2563eb;
    }

    .password-toggle {
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      color: #6c757d;
    }
    .login-wrapper {
      max-width: 500px;
      width: 100%;
     
    }
    .input {
      webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border-radius: var(--radius-xl);
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--gray-100);
      background-color: var(--gray-100);
      width: 100%;
      padding-inline: calc(var(--spacing) * 3);
      padding-block: calc(var(--spacing) * 2);
      --tw-font-weight: var(--font-weight-semibold);
      font-weight: var(--font-weight-semibold);
      color: var(--gray-800);
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
      transition-duration: var(--tw-duration, var(--default-transition-duration));
      --tw-duration: .15s;
      --tw-ease: var(--ease-in-out);
      transition-duration: .15s;
      transition-timing-function: var(--ease-in-out);
    }
    .h-12{
      height: calc(var(--spacing)*12);
    }
  </style>
  @endpush
</head>

    @section('content')
  <div class="login-card">
    <div class="login-logo">
      <img src="https://img.icons8.com/ios-filled/50/000000/security-checked.png" alt="logo" />
    </div>

    <h4 class="text-center mb-1">Admin Girişi</h4>
    <p class="text-center text-muted mb-4">Lütfen kimlik bilgilerinizi girin!</p>

    <form id="adminLoginForm" method="POST" action="{{ route('admin.login') }}" autocomplete="off">
      @csrf
      <div id="loginError" class="alert alert-danger" style="display:none;"></div>
      <div class="mb-3">
        <label for="username" class="form-label">Kullanıcı adı</label>
        <input type="text" class="input h-12" id="username" name="username" placeholder="Kullanıcı adı" required />
      </div>
      <div class="mb-3 position-relative">
        <label for="password" class="form-label">Parola</label>
        <input type="password" class="input h-12" id="password" name="password" placeholder="Parola" required />
      </div>
      <div class="d-grid">
        <button type="submit" class="btn btn-primary">Giriş Yap</button>
      </div>
    </form>
  </div>
  @endsection
  @push('scripts')
  <script>
    function togglePassword() {
      const pwd = document.getElementById("password");
      pwd.type = pwd.type === "password" ? "text" : "password";
    }
  </script>

  <script src="{{ asset('js/admin-login.js') }}"></script>
  @endpush