{% extends "hotel/guest/base.html" %}

{% block title %}My Profile{% endblock %}
{% block page_title %}My Profile{% endblock %}

{% block head %}
<style>
  .profile-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:16px;
  }

  .profile-hero{
    color:#fff;
    border-radius:24px;
    padding:20px;
    margin-bottom:16px;
    background:
      linear-gradient(135deg,rgba(37,99,235,.96),rgba(30,64,175,.92)),
      radial-gradient(circle at top right,rgba(147,197,253,.45),transparent 35%);
    box-shadow:0 18px 40px rgba(37,99,235,.20);
  }

  .profile-hero h2{
    margin:0;
    font-size:1.55rem;
    font-weight:900;
  }

  .profile-hero p{
    margin:7px 0 0;
    color:#dbeafe;
  }

  .form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .field-full{
    grid-column:1 / -1;
  }

  .profile-avatar{
    width:82px;
    height:82px;
    border-radius:28px;
    background:linear-gradient(135deg,#2563eb,#60a5fa);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    font-weight:900;
    margin-bottom:12px;
  }

  .profile-side-line{
    padding:10px 0;
    border-bottom:1px dashed #e5e7eb;
  }

  .profile-side-line:last-child{
    border-bottom:0;
  }

  .profile-side-line .label{
    color:#64748b;
    font-size:.78rem;
    font-weight:900;
    text-transform:uppercase;
  }

  .profile-side-line .value{
    margin-top:3px;
    font-weight:900;
    color:#111827;
    word-break:break-word;
  }

  @media(max-width:900px){
    .profile-grid{
      grid-template-columns:1fr;
    }

    .form-grid{
      grid-template-columns:1fr;
    }

    .field-full{
      grid-column:auto;
    }
  }
</style>
{% endblock %}

{% block content %}

<section class="profile-hero">
  <h2>{{ guest_name|default:"Guest" }}</h2>
  <p>
    Keep your guest information updated for faster check-in and smoother booking verification.
  </p>
</section>

<section class="profile-grid">

  <div class="card">
    <h3 style="margin-top:0;">Personal Information</h3>
    <p class="muted">
      This information is used by the hotel team for booking verification and guest records.
    </p>

    <form method="post">
      {% csrf_token %}

      <div class="form-grid">
        <div class="field">
          <label>Full Name *</label>
          <input name="name" value="{{ form.name.value|default:'' }}" required>
        </div>

        <div class="field">
          <label>Email *</label>
          <input name="email" type="email" value="{{ form.email.value|default:'' }}" required>
        </div>

        <div class="field">
          <label>Phone *</label>
          <input name="phone" value="{{ form.phone.value|default:'' }}" required>
        </div>

        <div class="field">
          <label>Nationality</label>
          <input name="nationality" value="{{ form.nationality.value|default:'' }}">
        </div>

        <div class="field">
          <label>CNIC</label>
          <input name="cnic" value="{{ form.cnic.value|default:'' }}">
        </div>

        <div class="field">
          <label>Passport</label>
          <input name="passport" value="{{ form.passport.value|default:'' }}">
        </div>

        <div class="field">
          <label>Profession</label>
          <input name="profession" value="{{ form.profession.value|default:'' }}">
        </div>

        <div class="field">
          <label>Company</label>
          <input name="company_name" value="{{ form.company_name.value|default:'' }}">
        </div>

        <div class="field">
          <label>Car No</label>
          <input name="car_no" value="{{ form.car_no.value|default:'' }}">
        </div>

        <div class="field field-full">
          <label>Address</label>
          <input name="address" value="{{ form.address.value|default:'' }}">
        </div>
      </div>

      {% if form.errors %}
        <div style="margin-top:12px;background:#fee2e2;color:#991b1b;border-radius:14px;padding:10px;font-weight:800;">
          Please check the form fields and try again.
        </div>
      {% endif %}

      <div style="margin-top:14px;">
        <button class="btn primary">
          <i class="fa-regular fa-floppy-disk"></i>
          Save Profile
        </button>
      </div>
    </form>
  </div>

  <aside class="card">
    <div class="profile-avatar">
      {{ guest_name|default:"G"|first|upper }}
    </div>

    <h3 style="margin:0;">Guest Account</h3>
    <p class="muted" style="margin-top:5px;">
      Your hotel portal account details.
    </p>

    <div class="profile-side-line">
      <div class="label">Name</div>
      <div class="value">{{ guest.name|default:guest_name|default:"Guest" }}</div>
    </div>

    <div class="profile-side-line">
      <div class="label">Email</div>
      <div class="value">{{ guest_account.email|default:"-" }}</div>
    </div>

    <div class="profile-side-line">
      <div class="label">Phone</div>
      <div class="value">{{ guest.contact|default:guest_account.mobile|default:"-" }}</div>
    </div>

    <div class="profile-side-line">
      <div class="label">Guest ID</div>
      <div class="value">#{{ guest.t_id|default:guest_account.pk }}</div>
    </div>

    <div style="margin-top:14px;">
      <a class="btn" href="{% url 'hotel:guest:password_change' %}">
        <i class="fa-solid fa-key"></i>
        Change Password
      </a>
    </div>
  </aside>

</section>

{% endblock %}