@extends('layouts.app')

@section('title', 'Register - Saad\'s Blog')

@section('content')
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-md-6">

      <h2 class="text-center mb-4">Create Your Account</h2>

      @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
      @endif

      @if($errors->any())
        <div class="alert alert-danger">
          <ul class="mb-0">
            @foreach($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif

      <div class="card shadow-sm">
        <div class="card-body">
          <form method="POST" action="{{ route('register.submit') }}">
            @csrf

            <div class="mb-3">
              <label class="form-label">Full Name</label>
              <input type="text" name="name" class="form-control" value="{{ old('name') }}" required>
            </div>

            <div class="mb-3">
              <label class="form-label">Email</label>
              <input type="email" name="email" class="form-control" value="{{ old('email') }}" required>
            </div>

            <div class="mb-3">
              <label class="form-label">Phone (optional)</label>
              <div class="input-group">
                <button class="btn btn-outline-secondary dropdown-toggle d-flex align-items-center gap-2"
                        type="button"
                        id="countryDropdown"
                        data-bs-toggle="dropdown"
                        aria-expanded="false">
                  <img id="selected-flag" src="https:
                  <span id="selected-code">+20</span>
                </button>

                <ul class="dropdown-menu" aria-labelledby="countryDropdown" id="countries-list">
                  <li><a class="dropdown-item d-flex align-items-center gap-2" href="#" data-code="+20" data-flag="EG"><img src="https:
                  <li><a class="dropdown-item d-flex align-items-center gap-2" href="#" data-code="+966" data-flag="SA"><img src="https:
                  <li><a class="dropdown-item d-flex align-items-center gap-2" href="#" data-code="+971" data-flag="AE"><img src="https:
                  <li><a class="dropdown-item d-flex align-items-center gap-2" href="#" data-code="+965" data-flag="KW"><img src="https:
                  <li><a class="dropdown-item d-flex align-items-center gap-2" href="#" data-code="+974" data-flag="QA"><img src="https:
                  <li><a class="dropdown-item d-flex align-items-center gap-2" href="#" data-code="+962" data-flag="JO"><img src="https:
                </ul>

                <input type="hidden" name="country_code" id="country_code" value="{{ old('country_code', '+20') }}">
                <input type="tel" name="phone" class="form-control" placeholder="Phone number" value="{{ old('phone') }}">
              </div>

              @error('phone')
                <div class="text-danger small">{{ $message }}</div>
              @enderror
            </div>

            <div class="mb-3">
              <label class="form-label">Password</label>
              <input type="password" name="password" class="form-control" required>
            </div>

            <div class="mb-4">
              <label class="form-label">Confirm Password</label>
              <input type="password" name="password_confirmation" class="form-control" required>
            </div>

            <button type="submit" class="btn btn-success w-100">Register</button>
          </form>
        </div>
      </div>

      <p class="text-center mt-3">
        Already have an account? <a href="{{ route('login') }}">Login here</a>
      </p>

    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const list = document.getElementById('countries-list');
    const flagImg = document.getElementById('selected-flag');
    const codeSpan = document.getElementById('selected-code');
    const hiddenInput = document.getElementById('country_code');

    list.querySelectorAll('a.dropdown-item').forEach(function (item) {
      item.addEventListener('click', function (e) {
        e.preventDefault();
        const code = this.getAttribute('data-code');
        const flag = this.getAttribute('data-flag');
        flagImg.src = `https:
        flagImg.alt = flag;
        codeSpan.textContent = code;
        hiddenInput.value = code;
      });
    });

    const oldCode = "{{ old('country_code', '+20') }}";
    if (oldCode !== '+20') {
      const current = Array.from(list.querySelectorAll('a.dropdown-item'))
        .find(a => a.getAttribute('data-code') === oldCode);
      if (current) {
        const flag = current.getAttribute('data-flag');
        flagImg.src = `https:
        flagImg.alt = flag;
        codeSpan.textContent = oldCode;
        hiddenInput.value = oldCode;
      }
    }
  });
</script>
@endsection