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

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

{% block head %}
<style>
  .dash-hero{
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);
    gap:16px;
    margin-bottom:16px;
  }

  .welcome-card{
    color:#fff;
    border-radius:24px;
    padding:20px;
    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,.22);
  }

  .welcome-card h2{
    margin:0;
    font-size:1.55rem;
    font-weight:900;
  }

  .welcome-card p{
    margin:7px 0 0;
    color:#dbeafe;
    font-size:.92rem;
  }

  .welcome-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
  }

  .welcome-actions a{
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    border-radius:999px;
    padding:8px 12px;
    font-size:.84rem;
    font-weight:800;
  }

  .kpi-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }

  .kpi-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:20px;
    padding:14px;
    box-shadow:0 12px 30px rgba(15,23,42,.06);
  }

  .kpi-card .label{
    color:#64748b;
    font-size:.78rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.05em;
  }

  .kpi-card .value{
    margin-top:6px;
    font-size:1.7rem;
    font-weight:900;
    color:#0f172a;
  }

  .action-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
  }

  .action-card{
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:14px;
    background:#fff;
    box-shadow:0 10px 24px rgba(15,23,42,.05);
    transition:.15s ease;
  }

  .action-card:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(15,23,42,.08);
  }

  .action-icon{
    width:42px;
    height:42px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:linear-gradient(135deg,#2563eb,#60a5fa);
    margin-bottom:10px;
  }

  .action-title{
    font-weight:900;
    color:#111827;
    font-size:.92rem;
  }

  .action-sub{
    color:#64748b;
    font-size:.78rem;
    margin-top:3px;
  }

  .section-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
  }

  .section-title h3{
    margin:0;
    font-size:1.05rem;
    font-weight:900;
  }

  .booking-code{
    font-weight:900;
    color:#1d4ed8;
  }

  .status-pill{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 9px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:900;
  }

  .status-pending{
    background:#fef3c7;
    color:#92400e;
  }

  .status-confirmed{
    background:#dcfce7;
    color:#166534;
  }

  .status-checkedin{
    background:#dbeafe;
    color:#1d4ed8;
  }

  .evidence-box{
    border:1px dashed #cbd5e1;
    background:#f8fafc;
    border-radius:18px;
    padding:14px;
  }

  .evidence-box h3{
    margin:0;
    font-size:1.02rem;
    font-weight:900;
  }

  .evidence-box p{
    color:#64748b;
    font-size:.86rem;
    margin:6px 0 12px;
  }

  .evidence-status{
    margin-top:10px;
    font-size:.86rem;
    font-weight:800;
    color:#64748b;
  }

  @media(max-width:980px){
    .dash-hero{
      grid-template-columns:1fr;
    }
    .action-grid{
      grid-template-columns:repeat(2,1fr);
    }
  }

  @media(max-width:560px){
    .kpi-grid,
    .action-grid{
      grid-template-columns:1fr;
    }
  }
</style>
{% endblock %}

{% block content %}

{% with pc=pending|length uc=upcoming|length %}

<section class="dash-hero">
  <div class="welcome-card">
    <h2>Welcome back, {{ guest_name|default:"Guest" }}!</h2>
    <p>
      Manage your bookings, upload bank transfer slips, view booking status,
      and keep your guest profile updated.
    </p>

    <div class="welcome-actions">
      <a href="{% url 'hotel:guest:bookings' %}">
        <i class="fa-solid fa-list-check"></i> My Bookings
      </a>
      <a href="{% url 'hotel:public:booking_tenant' tenant=tenant_id %}">
        <i class="fa-solid fa-calendar-plus"></i> New Booking
      </a>
      <a href="{% url 'hotel:guest:profile' %}">
        <i class="fa-solid fa-user"></i> Profile
      </a>
    </div>
  </div>

  <div class="kpi-grid">
    <div class="kpi-card">
      <div class="label">Pending</div>
      <div class="value">{{ pc }}</div>
    </div>

    <div class="kpi-card">
      <div class="label">Upcoming</div>
      <div class="value">{{ uc }}</div>
    </div>

    <div class="kpi-card">
      <div class="label">Total</div>
      <div class="value">{{ total|default:0 }}</div>
    </div>

    <div class="kpi-card">
      <div class="label">Evidence Missing</div>
      <div class="value">{{ evidence_missing|default:0 }}</div>
    </div>
  </div>
</section>

<section class="card" style="margin-bottom:16px;">
  <div class="section-title">
    <h3>Quick Actions</h3>
    <span class="badge info">Guest Services</span>
  </div>

  <div class="action-grid">
    <a class="action-card" href="{% url 'hotel:guest:bookings' %}">
      <div class="action-icon"><i class="fa-solid fa-calendar-check"></i></div>
      <div class="action-title">My Bookings</div>
      <div class="action-sub">View all booking history</div>
    </a>

    <a class="action-card" href="{% url 'hotel:public:booking_tenant' tenant=tenant_id %}">
      <div class="action-icon"><i class="fa-solid fa-plus"></i></div>
      <div class="action-title">New Booking</div>
      <div class="action-sub">Create a new request</div>
    </a>

    <a class="action-card" href="#evidence-card">
      <div class="action-icon"><i class="fa-solid fa-file-arrow-up"></i></div>
      <div class="action-title">Upload Evidence</div>
      <div class="action-sub">Bank transfer slip</div>
    </a>

    <a class="action-card" href="{% url 'hotel:guest:password_change' %}">
      <div class="action-icon"><i class="fa-solid fa-key"></i></div>
      <div class="action-title">Password</div>
      <div class="action-sub">Secure your account</div>
    </a>
  </div>
</section>

<section class="grid">

  <div class="card">
    <div class="section-title">
      <h3>Pending Bookings</h3>
      <a class="btn" href="{% url 'hotel:guest:bookings' %}?status=PENDING">
        View All
      </a>
    </div>

    {% if pending %}
      <div style="overflow:auto;">
        <table class="table">
          <thead>
            <tr>
              <th>Booking</th>
              <th>Dates</th>
              <th>Status</th>
              <th>Evidence</th>
              <th class="r">Action</th>
            </tr>
          </thead>

          <tbody>
            {% for b in pending %}
              <tr>
                <td>
                  <span class="booking-code">#{{ b.t_id }}</span>
                </td>
                <td>
                  {{ b.checkin_date }} → {{ b.checkout_date }}
                </td>
                <td>
                  <span class="status-pill status-pending">
                    <i class="fa-regular fa-clock"></i> {{ b.status }}
                  </span>
                </td>
                <td>
                  {% if b.proof_file %}
                    <span class="badge success">
                      <i class="fa-regular fa-circle-check"></i> Uploaded
                    </span>
                  {% else %}
                    <span class="badge warn">
                      <i class="fa-regular fa-clock"></i> Missing
                    </span>
                  {% endif %}
                </td>
                <td class="r">
                  {% if not b.proof_file %}
                    <button class="btn" type="button" onclick="openEvidence('{{ b.t_id }}')">
                      <i class="fa-solid fa-upload"></i> Upload
                    </button>
                  {% else %}
                    <a class="btn" href="{% url 'hotel:guest:bookings' %}">
                      View
                    </a>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <p class="muted">No pending bookings found.</p>
    {% endif %}
  </div>

  <aside class="card" id="evidence-card">
    <div class="evidence-box">
      <h3>
        <i class="fa-solid fa-shield-halved"></i>
        Upload Evidence
      </h3>

      <p>
        Select your pending booking and upload a clear PNG, JPG, JPEG, or PDF file.
        Maximum file size: 5 MB.
      </p>

      <div class="field">
        <label>Select Booking</label>
        <select id="evidenceBooking">
          <option value="">— choose pending booking —</option>
          {% for b in pending %}
            <option value="{{ b.t_id }}">
              #{{ b.t_id }} — {{ b.checkin_date }} → {{ b.checkout_date }}
            </option>
          {% endfor %}
        </select>
      </div>

      <div class="field">
        <label>Evidence File</label>
        <input type="file" id="evidenceFile" accept=".jpg,.jpeg,.png,.pdf">
      </div>

      <button class="btn primary block" type="button" onclick="uploadEvidence()">
        <i class="fa-solid fa-cloud-arrow-up"></i>
        Upload Evidence
      </button>

      <div id="evStatus" class="evidence-status"></div>
    </div>
  </aside>

</section>

<section class="card" style="margin-top:16px;">
  <div class="section-title">
    <h3>Upcoming Stays</h3>
    <a class="btn" href="{% url 'hotel:guest:bookings' %}">
      View All
    </a>
  </div>

  {% if upcoming %}
    <div style="overflow:auto;">
      <table class="table">
        <thead>
          <tr>
            <th>Booking</th>
            <th>Dates</th>
            <th>Status</th>
            <th>Total</th>
            <th class="r">Action</th>
          </tr>
        </thead>

        <tbody>
          {% for b in upcoming %}
            <tr>
              <td>
                <span class="booking-code">#{{ b.t_id }}</span>
              </td>
              <td>
                {{ b.checkin_date }} → {{ b.checkout_date }}
              </td>
              <td>
                <span class="status-pill status-{{ b.status|lower }}">
                  {{ b.status }}
                </span>
              </td>
              <td>
                {{ b.total_amount|floatformat:0 }}
              </td>
              <td class="r">
                <a class="btn" href="{% url 'hotel:guest:bookings' %}">
                  View
                </a>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% else %}
    <p class="muted">No upcoming stays found.</p>
  {% endif %}
</section>

{% endwith %}

{% endblock %}

{% block scripts %}
<script>
  function openEvidence(code){
    const dd = document.getElementById("evidenceBooking");
    const file = document.getElementById("evidenceFile");

    if (dd) dd.value = code;
    if (file) file.focus();

    document.getElementById("evidence-card").scrollIntoView({
      behavior: "smooth",
      block: "start"
    });
  }

  async function uploadEvidence(){
    const booking = document.getElementById("evidenceBooking").value;
    const file = document.getElementById("evidenceFile").files[0];
    const status = document.getElementById("evStatus");

    status.textContent = "";

    if(!booking){
      status.textContent = "Please select a booking.";
      return;
    }

    if(!file){
      status.textContent = "Please choose a file.";
      return;
    }

    const fd = new FormData();
    fd.append("code", booking);
    fd.append("evidence", file);

    status.textContent = "Uploading...";

    try{
      const res = await fetch("{% url 'hotel:guest:api_guest_evidence_upload' %}", {
        method: "POST",
        headers: {
          "X-CSRFToken": getCookie("csrftoken")
        },
        body: fd
      });

      if(!res.ok){
        const txt = await res.text();
        throw new Error(txt || "Upload failed");
      }

      const j = await res.json();

      if(j.ok){
        status.innerHTML = '<span class="badge success"><i class="fa-regular fa-circle-check"></i> Uploaded successfully</span>';
        setTimeout(function(){
          window.location.reload();
        }, 900);
      }else{
        status.textContent = j.error || "Upload error";
      }

    }catch(e){
      status.textContent = e.message || "Network error";
    }
  }
</script>
{% endblock %}