{% extends "pos/base.html" %}
{% load static %}
{% block title %}Pre-Booking{% endblock %}
{% block heading %}Pre-Booking{% endblock %}

{% block content %}
{% if upload_only %}
  <div class="card card-body">
    <h5>Booking #{{ booking.booking_code }}</h5>
    <p><b>Deposit required:</b> {{ totals.grand|floatformat:2 }} × 50% = {{ booking.deposit_required|floatformat:2 }}</p>
    <form method="post" enctype="multipart/form-data">
      {% csrf_token %}
      <label>Upload Payment Proof (screenshot)</label>
      <input type="file" name="proof_file" class="form-control" required>
      <button class="btn btn-success mt-2">Upload</button>
    </form>
  </div>
{% else %}
  <form method="post">
    {% csrf_token %}
    <div class="row">
      <div class="col-md-3">{{ form.checkin_date.label_tag }}{{ form.checkin_date }}</div>
      <div class="col-md-3">{{ form.checkout_date.label_tag }}{{ form.checkout_date }}</div>
      <div class="col-md-3">{{ form.adults.label_tag }}{{ form.adults }}</div>
      <div class="col-md-3">{{ form.children.label_tag }}{{ form.children }}</div>
    </div>

    <hr>
    <h6>Select Rooms by Category</h6>
    <div class="row">
      {% for c in categories %}
      <div class="col-md-3">
        <div class="card card-body mb-2">
          <b>{{ c.name }}</b>
          <div>Base Rate: {{ c.base_rate }}</div>
          <label class="small mt-1">No. of Rooms</label>
          <input type="number" min="0" name="category_{{ c.id }}" value="0" class="form-control">
        </div>
      </div>
      {% endfor %}
    </div>

    <hr>
    <h6>Guest Info</h6>
    <div class="row">
      <div class="col-md-4">{{ guest_form.name.label_tag }}{{ guest_form.name }}</div>
      <div class="col-md-4">{{ guest_form.contact.label_tag }}{{ guest_form.contact }}</div>
      <div class="col-md-4">{{ guest_form.company_name.label_tag }}{{ guest_form.company_name }}</div>
      <div class="col-md-4">{{ guest_form.cnic.label_tag }}{{ guest_form.cnic }}</div>
      <div class="col-md-4">{{ guest_form.passport.label_tag }}{{ guest_form.passport }}</div>
      <div class="col-md-4">{{ guest_form.car_no.label_tag }}{{ guest_form.car_no }}</div>
      <div class="col-md-6">{{ guest_form.address.label_tag }}{{ guest_form.address }}</div>
      <div class="col-md-6">{{ guest_form.additional_remarks.label_tag }}{{ guest_form.additional_remarks }}</div>
    </div>

    <div class="mt-3">
      <button class="btn btn-primary">Create Pre-Booking</button>
    </div>
  </form>
{% endif %}
{% endblock %}