<!DOCTYPE html>
<html lang="bn" dir="ltr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>পাসওয়ার্ড রিসেট | {{ $gs->title }}</title>
  <link rel="icon" type="image/x-icon" href="{{ asset('assets/images/'.$gs->favicon) }}">

  <link rel="preload" href="{{asset('frontend/fonts/ShurjoWeb_400.woff2')}}" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="{{asset('frontend/fonts/ShurjoWeb_700.woff2')}}" as="font" type="font/woff2" crossorigin>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&display=swap">

  <style>
    @font-face {
      font-family: "Shurjo";
      font-display: swap;
      font-style: normal;
      font-weight: 400;
      src: url("{{asset('frontend/fonts/ShurjoWeb_400.woff2')}}") format('woff2'),
           url("{{asset('frontend/fonts/ShurjoWeb_400.woff')}}") format("woff");
    }
    @font-face {
      font-family: "Shurjo";
      font-display: swap;
      font-style: normal;
      font-weight: 700;
      src: url("{{asset('frontend/fonts/ShurjoWeb_700.woff2')}}") format('woff2'),
           url("{{asset('frontend/fonts/ShurjoWeb_700.woff')}}") format("woff");
    }

    :root {
      --brand: #9b090d;
      --brand-dark: #7a0709;
      --bg: #f5f5f8;
      --white: #ffffff;
      --text-primary: #1a1a2e;
      --text-secondary: #5b5b7a;
      --text-muted: #8c8ca1;
      --border: #e6e6ef;
      --input-bg: #fafafc;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: "Shurjo", "Instrument Sans", sans-serif;
      background: var(--bg);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .auth-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 100vh;
      padding: 24px;
    }

    .auth-card {
      width: 100%;
      max-width: 420px;
      background: var(--white);
      border-radius: 12px;
      box-shadow: 0 2px 20px rgba(0,0,0,0.06);
      padding: 40px;
      border: 1px solid var(--border);
      position: relative;
    }

    .auth-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--brand);
      border-radius: 12px 12px 0 0;
    }

    .auth-logo {
      text-align: center;
      margin-bottom: 24px;
    }
    .auth-logo img {
      max-height: 50px;
      width: auto;
    }

    .page-icon {
      text-align: center;
      margin-bottom: 16px;
    }
    .page-icon svg {
      width: 44px;
      height: 44px;
      color: var(--brand);
    }

    .auth-heading {
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--text-primary);
      text-align: center;
      margin-bottom: 4px;
    }
    .auth-subtext {
      font-size: 0.88rem;
      color: var(--text-secondary);
      text-align: center;
      margin-bottom: 28px;
      line-height: 1.5;
    }

    /* Alerts */
    .alert-box {
      border-radius: 8px;
      padding: 10px 14px;
      margin-bottom: 16px;
      font-size: 0.85rem;
    }
    .alert-box.error {
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #dc2626;
    }
    .alert-box.success {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      color: #16a34a;
    }

    /* Form */
    .form-group {
      margin-bottom: 20px;
    }
    .form-label {
      display: block;
      color: var(--text-primary);
      font-size: 0.88rem;
      font-weight: 500;
      margin-bottom: 6px;
    }
    .form-control {
      width: 100%;
      padding: 12px 14px;
      background: var(--input-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-primary);
      font-family: "Instrument Sans", sans-serif;
      font-size: 0.92rem;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .form-control::placeholder {
      color: var(--text-muted);
    }
    .form-control:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(155,9,13,0.08);
      background: var(--white);
    }

    /* Button */
    .btn-submit {
      width: 100%;
      padding: 13px;
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-family: "Shurjo", sans-serif;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s, box-shadow 0.2s;
      margin-top: 4px;
    }
    .btn-submit:hover {
      background: var(--brand-dark);
      box-shadow: 0 4px 12px rgba(155,9,13,0.25);
    }
    .btn-submit:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }
    .btn-submit .spinner {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255,255,255,0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.6s linear infinite;
      vertical-align: middle;
      margin-right: 8px;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Back link */
    .back-link {
      display: block;
      text-align: center;
      margin-top: 20px;
      color: var(--text-secondary);
      font-size: 0.85rem;
      text-decoration: none;
      transition: color 0.2s;
    }
    .back-link:hover {
      color: var(--brand);
    }
    .back-link svg {
      width: 14px;
      height: 14px;
      vertical-align: middle;
      margin-right: 4px;
    }

    .auth-footer {
      text-align: center;
      margin-top: 24px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
      color: var(--text-muted);
      font-size: 0.8rem;
    }

    @media (max-width: 480px) {
      .auth-card {
        padding: 28px 20px;
        margin: 0 4px;
      }
    }
  </style>
</head>

<body>
  <div class="auth-wrapper">
    <div class="auth-card">
      <!-- Logo -->
      <div class="auth-logo">
        <a href="{{ url('/') }}">
          <img src="{{ asset('assets/images/logo/channel5.png') }}" alt="{{ $gs->title }}">
        </a>
      </div>

      <!-- Key icon -->
      <div class="page-icon">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/>
        </svg>
      </div>

      <h1 class="auth-heading">পাসওয়ার্ড রিসেট করুন</h1>
      <p class="auth-subtext">আপনার নিবন্ধিত ইমেইল অ্যাড্রেস দিন। আমরা আপনাকে একটি নতুন পাসওয়ার্ড পাঠাবো।</p>

      <!-- Alert container -->
      <div id="alert-container"></div>

      <!-- Forgot Password Form -->
      <form id="forgotform" action="{{ route('admin.forgot.submit') }}" method="POST">
        {{ csrf_field() }}

        <div class="form-group">
          <label class="form-label">ইমেইল অ্যাড্রেস</label>
          <input name="email" type="email" class="form-control" placeholder="name@example.com" required autocomplete="email">
        </div>

        <button type="submit" class="btn-submit" id="forgot-btn">
          রিসেট লিংক পাঠান
        </button>
      </form>

      <a href="{{ route('admin.login') }}" class="back-link">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        লগইন পেজে ফিরে যান
      </a>

      <p class="auth-footer">© {{ date('Y') }} {{ $gs->title }}। সর্বস্বত্ব সংরক্ষিত।</p>
    </div>
  </div>

  <!-- JS -->
  <script src="{{ asset('assets/frontend/login/assets/js/jquery-3.6.0.min.js') }}"></script>

  <script>
    $(document).ready(function(){
      $('#forgotform').on('submit', function(e){
        e.preventDefault();
        var $form = $(this);
        var $btn = $('#forgot-btn');
        var oldHtml = $btn.html();

        $btn.html('<span class="spinner"></span> যাচাই করা হচ্ছে...').prop('disabled', true);
        $('#alert-container').html('');

        $.ajax({
          method: "POST",
          url: $form.attr('action'),
          data: $form.serialize(),
          success: function(data){
            if(data.errors){
              var msgs = '';
              if (typeof data.errors === 'object') {
                $.each(data.errors, function(k, v) {
                  msgs += (Array.isArray(v) ? v.join('<br>') : v) + '<br>';
                });
              } else {
                msgs = data.errors;
              }
              $('#alert-container').html('<div class="alert-box error">' + msgs + '</div>');
            } else {
              $('#alert-container').html('<div class="alert-box success">' + data + '</div>');
              $form[0].reset();
            }
            $btn.html(oldHtml).prop('disabled', false);
          },
          error: function(xhr){
            $('#alert-container').html('<div class="alert-box error">কিছু ভুল হয়েছে। অনুগ্রহ করে আবার চেষ্টা করুন।</div>');
            $btn.html(oldHtml).prop('disabled', false);
          }
        });
      });
    });
  </script>
</body>
</html>
