{# templates/sales/saloon_booking_form.html #}
{% extends "pos/base.html" %}
{% load static %}

{% block title %}{% if is_edit %}Edit Booking #{{ booking.booking_id }}{% else %}New Booking{% endif %}{% endblock %}

{% block stylesheets %}
<style>
.bk-container { max-width: 700px; margin: 20px auto; padding: 0 15px; }
.bk-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); overflow: hidden; }
.bk-card-header { background: #01478f; color: #fff; padding: 12px 20px; font-size: 1rem; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.bk-card-body { padding: 20px; }
.bk-section { margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.bk-section:last-child { border-bottom: none; margin-bottom: 0; }
.bk-section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #6c757d; margin-bottom: 10px; }
.bk-row { display: flex; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.bk-row > .bk-field { flex: 1; min-width: 140px; }
.bk-field label { font-size: 0.72rem; font-weight: 600; color: #555; margin-bottom: 3px; display: block; }
.bk-field input, .bk-field select, .bk-field textarea { width: 100%; height: 36px; border: 1px solid #ddd; border-radius: 5px; padding: 4px 10px; font-size: 0.85rem; }
.bk-field textarea { height: 60px; resize: vertical; }
.bk-field .input-group { display: flex; }
.bk-field .input-group input { border-radius: 5px 0 0 5px; }
.bk-field .input-group .btn { border-radius: 0 5px 5px 0; height: 36px; }

.phone-section { background: #f8f9fa; padding: 15px; border-radius: 6px; margin-bottom: 15px; }
.phone-section .form-control { font-size: 1.1rem; height: 42px; letter-spacing: 1px; }
.phone-result { margin-top: 8px; font-size: 0.82rem; }
.phone-result.found { color: #28a745; }
.phone-result.not-found { color: #dc3545; }

.svc-search { position: relative; }
.svc-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #ddd; border-top: none; border-radius: 0 0 5px 5px; max-height: 180px; overflow-y: auto; z-index: 100; display: none; }
.svc-dropdown .svc-option { padding: 8px 12px; cursor: pointer; font-size: 0.82rem; display: flex; justify-content: space-between; border-bottom: 1px solid #f0f0f0; }
.svc-dropdown .svc-option:hover { background: #f0f7ff; }
.svc-list { margin-top: 8px; }
.svc-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #f8f9fa; border-radius: 5px; margin-bottom: 5px; font-size: 0.82rem; }
.svc-item .svc-name { flex: 1; font-weight: 600; }
.svc-item input { width: 50px; height: 28px; text-align: center; border: 1px solid #ddd; border-radius: 4px; font-size: 0.82rem; }
.svc-item .svc-price-input { width: 80px; text-align: right; }
.svc-item .svc-total { font-weight: 700; color: #01478f; min-width: 70px; text-align: right; }
.svc-item .svc-remove { width: 24px; height: 24px; border: none; background: #dc3545; color: #fff; border-radius: 4px; cursor: pointer; font-size: 0.7rem; }
.svc-grand { text-align: right; font-size: 1rem; font-weight: 700; color: #01478f; padding: 8px 0; }

.advance-fields { display: none; margin-top: 10px; }
.advance-fields.show { display: flex; gap: 12px; flex-wrap: wrap; }

.bk-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 15px; }
.bk-actions .btn { min-width: 120px; height: 40px; font-weight: 700; font-size: 0.85rem; }
</style>
{% endblock %}

{% block content %}
<div class="bk-container">
  <div class="bk-card">
    <div class="bk-card-header">
      <span><i class="fas fa-calendar-plus mr-2"></i>{% if is_edit %}Edit Booking #{{ booking.booking_id }}{% else %}New Pre-Booking{% endif %}</span>
      <div>
        <a href="{% url 'sales:booking_list' %}" class="btn btn-sm btn-outline-light"><i class="fas fa-list"></i></a>
        <a href="{% url 'sales:booking_calendar' %}" class="btn btn-sm btn-outline-light"><i class="fas fa-calendar"></i></a>
      </div>
    </div>

    <div class="bk-card-body">

      <!-- ═══ PHONE FIRST ═══ -->
      <div class="phone-section">
        <div class="bk-field">
          <label><i class="fas fa-phone mr-1"></i>Customer Phone Number</label>
          <div class="input-group">
            <input type="text" id="bk_phone" class="form-control" placeholder="03001234567"
                   maxlength="15" pattern="[0-9]*" inputmode="numeric"
                   value="{% if is_edit %}{{ booking.customer_phone }}{% endif %}">
            <button class="btn btn-primary" type="button" id="btnSearchPhone">
              <i class="fas fa-search"></i>
            </button>
          </div>
          <div class="phone-result" id="phoneResult"></div>
        </div>
      </div>

      <!-- ═══ CUSTOMER INFO ═══ -->
      <div class="bk-section" id="customerSection" {% if not is_edit %}style="display:none;"{% endif %}>
        <div class="bk-section-title">Customer Info</div>
        <input type="hidden" id="bk_customer_id" value="{% if is_edit %}{{ booking.customer_t_id }}{% else %}0{% endif %}">
        <div class="bk-row">
          <div class="bk-field">
            <label>Name</label>
            <input type="text" id="bk_customer_name" value="{% if is_edit %}{{ booking.customer_name }}{% endif %}">
          </div>
          <div class="bk-field">
            <label>Address</label>
            <input type="text" id="bk_address" value="{% if is_edit %}{{ customer_address }}{% endif %}">
          </div>
        </div>
      </div>

      <!-- ═══ SCHEDULE ═══ -->
      <div class="bk-section" id="scheduleSection" {% if not is_edit %}style="display:none;"{% endif %}>
        <div class="bk-section-title">Schedule</div>
        <div class="bk-row">
          <div class="bk-field">
            <label>Booking Date</label>
            <input type="date" id="bk_date"
                   value="{% if is_edit %}{{ booking.booking_date|date:'Y-m-d' }}{% else %}{{ today }}{% endif %}">
          </div>
          <div class="bk-field">
            <label>Time</label>
            <input type="time" id="bk_time"
                   value="{% if is_edit %}{{ booking.booking_time|time:'H:i' }}{% endif %}">
          </div>
          <div class="bk-field" style="max-width:100px;">
            <label>Duration (min)</label>
            <input type="number" id="bk_duration" value="{% if is_edit %}{{ booking.estimated_duration }}{% else %}30{% endif %}" min="5">
          </div>
        </div>
        <div class="bk-row">
          <div class="bk-field">
            <label>Staff</label>
            <select id="bk_staff">
              <option value="">-- Select Staff --</option>
              {% for s in staff_list %}
              <option value="{{ s.t_id }}" {% if is_edit and booking.staff_t_id == s.t_id %}selected{% endif %}>{{ s.name }}</option>
              {% endfor %}
            </select>
          </div>
          {% if is_edit %}
          <div class="bk-field" style="max-width:160px;">
            <label>Status</label>
            <select id="bk_status">
              <option value="pending" {% if booking.status == 'pending' %}selected{% endif %}>Pending</option>
              <option value="confirmed" {% if booking.status == 'confirmed' %}selected{% endif %}>Confirmed</option>
            </select>
          </div>
          {% endif %}
        </div>
      </div>

      <!-- ═══ SERVICES ═══ -->
      <div class="bk-section" id="servicesSection" {% if not is_edit %}style="display:none;"{% endif %}>
        <div class="bk-section-title">Services</div>
        <div class="bk-field svc-search">
          <input type="text" id="svcSearchInput" placeholder="Search services / products...">
          <div class="svc-dropdown" id="svcDropdown"></div>
        </div>
        <div class="svc-list" id="svcList"></div>
        <div class="svc-grand">Total: Rs. <span id="svcGrandTotal">0</span></div>
      </div>

      <!-- ═══ ADVANCE PAYMENT ═══ -->
      <div class="bk-section" id="advanceSection" {% if not is_edit %}style="display:none;"{% endif %}>
        <div class="bk-section-title">Advance Payment</div>
        <div class="bk-field">
          <label>
            <input type="checkbox" id="bk_take_advance"
                   {% if is_edit and booking.advance_amount > 0 %}checked{% endif %}>
            Take Advance
          </label>
        </div>
        <div class="advance-fields {% if is_edit and booking.advance_amount > 0 %}show{% endif %}" id="advanceFields">
          <div class="bk-field">
            <label>Amount</label>
            <input type="number" id="bk_advance_amount" min="0"
                   value="{% if is_edit %}{{ booking.advance_amount|floatformat:0 }}{% else %}0{% endif %}">
          </div>
          <div class="bk-field">
            <label>Bank</label>
            <select id="bk_advance_bank">
              <option value="">-- Select Bank --</option>
              {% for b in bank_accounts %}
              <option value="{{ b.t_id }}" {% if is_edit and booking.advance_bank_id == b.t_id %}selected{% endif %}>{{ b.name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="bk-field">
            <label>Payment Date</label>
            <input type="date" id="bk_advance_date"
                   value="{% if is_edit and booking.advance_payment_date %}{{ booking.advance_payment_date|date:'Y-m-d' }}{% else %}{{ today }}{% endif %}">
          </div>
        </div>
        {% if is_edit and booking.advance_invoice_no %}
        <div style="margin-top:6px; font-size:0.75rem; color:#888;">
          <i class="fas fa-receipt mr-1"></i>Advance Invoice #{{ booking.advance_invoice_no }}
        </div>
        {% endif %}
      </div>

      <!-- ═══ NOTES ═══ -->
      <div class="bk-section" id="notesSection" {% if not is_edit %}style="display:none;"{% endif %}>
        <div class="bk-field">
          <label>Notes / Special Instructions</label>
          <textarea id="bk_notes">{% if is_edit %}{{ booking.notes }}{% endif %}</textarea>
        </div>
      </div>

      <!-- ═══ ACTIONS ═══ -->
      <div class="bk-actions" id="actionsSection" {% if not is_edit %}style="display:none;"{% endif %}>
        <a href="{% url 'sales:booking_list' %}" class="btn btn-secondary">Cancel</a>
        <button type="button" class="btn btn-primary" id="btnSaveBooking">
          <i class="fas fa-save mr-1"></i>{% if is_edit %}Update{% else %}Save Booking{% endif %}
        </button>
      </div>

    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
(function(){
  'use strict';

  const API = {
    custSearch:  "{% url 'sales:api_booking_customer_search' %}",
    prodSearch:  "{% url 'sales:api_booking_products_search' %}",
    save:        "{% url 'sales:api_booking_save' %}",
  };

  const isEdit = {{ is_edit|yesno:"true,false" }};
  const editBookingId = {% if is_edit %}{{ booking.booking_id }}{% else %}0{% endif %};

  let services = [];
  {% if is_edit %}
  services = {{ booking_services_json|safe }};
  {% endif %}

  function csrfToken() { return '{{ csrf_token }}'; }
  function fmt(n) { return Number(n||0).toLocaleString(); }

  // Enforce digits only
  $('#bk_phone').on('input', function() {
    this.value = this.value.replace(/\D/g, '');
  });

  // ═══ PHONE SEARCH ═══
  function searchPhone() {
    var phone = $('#bk_phone').val().trim();
    if (!phone || phone.length < 4) {
      $('#phoneResult').html('<span class="text-muted">Enter phone number and press search</span>');
      return;
    }
    $.getJSON(API.custSearch, {phone: phone}).done(function(resp) {
      if (resp.ok && resp.found) {
        var c = resp.customer;
        $('#phoneResult').html('<span class="found"><i class="fas fa-check-circle"></i> Found: <b>'+c.name+'</b> (Balance: Rs.'+fmt(c.balance)+')</span>');
        $('#bk_customer_id').val(c.id);
        $('#bk_customer_name').val(c.name);
        $('#bk_address').val(c.address);
      } else {
        $('#phoneResult').html('<span class="not-found"><i class="fas fa-exclamation-circle"></i> New customer — fill in name below</span>');
        $('#bk_customer_id').val(0);
        $('#bk_customer_name').val('');
        $('#bk_address').val('');
      }
      $('#customerSection, #scheduleSection, #servicesSection, #advanceSection, #notesSection, #actionsSection').slideDown(200);
    });
  }

  $('#btnSearchPhone').on('click', searchPhone);
  $('#bk_phone').on('keypress', function(e) { if (e.which === 13) { e.preventDefault(); searchPhone(); } });

  // ═══ ADVANCE TOGGLE ═══
  $('#bk_take_advance').on('change', function() {
    if (this.checked) { $('#advanceFields').addClass('show'); }
    else { $('#advanceFields').removeClass('show'); $('#bk_advance_amount').val(0); }
  });

  // ═══ SERVICES AUTOCOMPLETE ═══
  var searchTimer = null;
  $('#svcSearchInput').on('input', function() {
    var q = $(this).val().trim();
    clearTimeout(searchTimer);
    if (q.length < 1) { $('#svcDropdown').hide(); return; }
    searchTimer = setTimeout(function() {
      $.getJSON(API.prodSearch, {q: q}).done(function(resp) {
        if (!resp.ok || !resp.products.length) {
          $('#svcDropdown').html('<div class="svc-option text-muted">No results</div>').show();
          return;
        }
        var html = '';
        resp.products.forEach(function(p) {
          html += '<div class="svc-option" data-product=\''+JSON.stringify(p)+'\'>'
                + '<span>'+p.name+'</span><span>Rs.'+fmt(p.price)+'</span></div>';
        });
        $('#svcDropdown').html(html).show();
      });
    }, 250);
  });

  $(document).on('click', '.svc-option[data-product]', function() {
    var p = $(this).data('product');
    var exists = services.find(function(s) { return s.prod_id === p.prod_id; });
    if (exists) { exists.qty = (exists.qty || 1) + 1; }
    else { services.push({prod_id: p.prod_id, name: p.name, price: p.price, qty: 1}); }
    renderServices();
    $('#svcSearchInput').val('');
    $('#svcDropdown').hide();
  });

  $(document).on('click', function(e) {
    if (!$(e.target).closest('.svc-search').length) $('#svcDropdown').hide();
  });

  function renderServices() {
    if (!services.length) {
      $('#svcList').html('<div class="text-muted" style="font-size:0.82rem;">No services added</div>');
      calcServiceTotal();
      return;
    }
    var html = '';
    services.forEach(function(s, i) {
      var total = (s.qty || 1) * (s.price || 0);
      html += '<div class="svc-item" data-idx="'+i+'">'
            + '<span class="svc-name">'+s.name+'</span>'
            + '<input type="number" class="svc-qty" value="'+(s.qty||1)+'" min="1" data-idx="'+i+'">'
            + '<span style="font-size:0.75rem;">&times;</span>'
            + '<input type="number" class="svc-price-input" value="'+(s.price||0)+'" min="0" step="1" data-idx="'+i+'">'
            + '<span class="svc-total">'+fmt(total)+'</span>'
            + '<button class="svc-remove" data-idx="'+i+'"><i class="fas fa-times"></i></button>'
            + '</div>';
    });
    $('#svcList').html(html);
    calcServiceTotal();
  }

  function calcServiceTotal() {
    var total = 0;
    services.forEach(function(s) { total += (s.qty || 1) * (s.price || 0); });
    $('#svcGrandTotal').text(fmt(total));
  }

  $(document).on('change input', '.svc-qty', function() {
    services[$(this).data('idx')].qty = Math.max(1, +$(this).val() || 1);
    renderServices();
  });
  $(document).on('change input', '.svc-price-input', function() {
    services[$(this).data('idx')].price = +$(this).val() || 0;
    renderServices();
  });
  $(document).on('click', '.svc-remove', function() {
    services.splice($(this).data('idx'), 1);
    renderServices();
  });

  // ═══ SAVE ═══
  $('#btnSaveBooking').on('click', function() {
    var phone = $('#bk_phone').val().trim();
    if (!phone) { Swal.fire('Error', 'Phone number required', 'error'); return; }
    if (!services.length) { Swal.fire('Error', 'Add at least one service', 'error'); return; }

    var total = 0;
    services.forEach(function(s) { total += (s.qty||1) * (s.price||0); });

    var payload = {
      booking_id:           isEdit ? editBookingId : 0,
      phone:                phone,
      customer_name:        $('#bk_customer_name').val().trim(),
      address:              $('#bk_address').val().trim(),
      booking_date:         $('#bk_date').val(),
      booking_time:         $('#bk_time').val(),
      duration:             +$('#bk_duration').val() || 30,
      staff_id:             +$('#bk_staff').val() || 0,
      services:             services,
      total_amount:         total,
      take_advance:         $('#bk_take_advance').is(':checked'),
      advance_amount:       +$('#bk_advance_amount').val() || 0,
      advance_bank_id:      +$('#bk_advance_bank').val() || 0,
      advance_payment_date: $('#bk_advance_date').val() || '',
      notes:                $('#bk_notes').val().trim(),
    };

    $.ajax({
      url: API.save, type: 'POST', contentType: 'application/json',
      headers: {'X-CSRFToken': csrfToken()},
      data: JSON.stringify(payload),
      success: function(resp) {
        if (resp.ok) {
          var icon = resp.conflict ? 'warning' : 'success';
          Swal.fire({icon: icon, title: resp.conflict ? 'Saved with Warning' : 'Saved!', text: resp.message, timer: 2000, showConfirmButton: false})
          .then(function() { window.location.href = "{% url 'sales:booking_list' %}"; });
        } else { Swal.fire('Error', resp.error || 'Failed', 'error'); }
      },
      error: function(xhr) {
        Swal.fire('Error', (xhr.responseJSON && xhr.responseJSON.error) || 'Server error', 'error');
      }
    });
  });

  // ═══ INIT ═══
  $(function() {
    if (isEdit) {
      renderServices();
      $('#customerSection, #scheduleSection, #servicesSection, #advanceSection, #notesSection, #actionsSection').show();
    }
  });

})();
</script>
{% endblock %}