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

{% block title %}Bookings List{% endblock %}

{% block stylesheets %}
<style>
.bl-container { padding: 15px; }
.bl-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.bl-header h5 { margin: 0; font-weight: 700; color: #01478f; }
.bl-filters { background: #fff; border-radius: 6px; padding: 10px 15px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.bl-filters .filter-group { display: flex; flex-direction: column; }
.bl-filters label { font-size: 0.65rem; font-weight: 600; color: #888; text-transform: uppercase; margin-bottom: 2px; }
.bl-filters input, .bl-filters select { height: 32px; font-size: 0.8rem; border: 1px solid #ddd; border-radius: 4px; padding: 2px 8px; }
.bl-filters .btn { height: 32px; font-size: 0.8rem; }

.bl-cards { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.bl-card { background: #fff; border-radius: 6px; padding: 10px 15px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); min-width: 130px; }
.bl-card .card-label { font-size: 0.65rem; color: #888; text-transform: uppercase; font-weight: 600; }
.bl-card .card-value { font-size: 1.1rem; font-weight: 700; color: #01478f; }

.bl-bulk { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.bl-bulk .btn { height: 32px; font-size: 0.78rem; }
.bl-bulk .selected-count { font-size: 0.8rem; color: #666; }

.bl-table-wrap { background: #fff; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); overflow-x: auto; }
.bl-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.bl-table th { background: #f5f6f8; padding: 8px 10px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: #666; border-bottom: 2px solid #dee2e6; position: sticky; top: 0; }
.bl-table td { padding: 8px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.bl-table tr:hover { background: #f8f9ff; }

.bk-id { font-weight: 700; color: #01478f; }
.bk-customer { font-weight: 600; }
.bk-phone { font-size: 0.75rem; color: #888; }
.bk-services { font-size: 0.72rem; color: #555; }
.bk-amount { font-weight: 700; }
.bk-advance { font-size: 0.72rem; color: #28a745; }

.status-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.68rem; font-weight: 700; cursor: pointer; }
.status-badge.pending { background: #fff3cd; color: #856404; }
.status-badge.confirmed { background: #d4edda; color: #155724; }
.status-badge.cancelled { background: #f8d7da; color: #721c24; text-decoration: line-through; }
.status-badge.invoiced { background: #d1ecf1; color: #0c5460; }

.bk-actions-cell { white-space: nowrap; }
.bk-actions-cell .btn { padding: 2px 6px; font-size: 0.7rem; margin: 1px; }

.bl-table tr.cancelled-row { opacity: 0.5; }
.bl-table tr.cancelled-row td { text-decoration: line-through; }
.bl-table tr.cancelled-row td:last-child { text-decoration: none; }
</style>
{% endblock %}

{% block content %}
<div class="bl-container">

  <div class="bl-header">
    <h5><i class="fas fa-calendar-check mr-2"></i>Saloon Bookings</h5>
    <div>
      <a href="{% url 'sales:booking_add' %}" class="btn btn-sm btn-primary"><i class="fas fa-plus mr-1"></i>New Booking</a>
      <a href="{% url 'sales:booking_calendar' %}" class="btn btn-sm btn-outline-primary"><i class="fas fa-calendar"></i></a>
      <a href="{% url 'sales:booking_staff_schedule' %}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-users mr-1"></i>Staff Schedule</a>
    </div>
  </div>

  <div class="bl-filters">
    <div class="filter-group">
      <label>From</label>
      <input type="date" id="f_date_from" value="{{ date_from }}">
    </div>
    <div class="filter-group">
      <label>To</label>
      <input type="date" id="f_date_to" value="{{ date_to }}">
    </div>
    <div class="filter-group">
      <label>Status</label>
      <select id="f_status">
        <option value="" {% if not status_filter %}selected{% endif %}>All</option>
        <option value="active" {% if status_filter == 'active' %}selected{% endif %}>Active</option>
        <option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>Pending</option>
        <option value="confirmed" {% if status_filter == 'confirmed' %}selected{% endif %}>Confirmed</option>
        <option value="cancelled" {% if status_filter == 'cancelled' %}selected{% endif %}>Cancelled</option>
      </select>
    </div>
    <div class="filter-group">
      <label>Staff</label>
      <select id="f_staff">
        <option value="0">All Staff</option>
        {% for s in staff_list %}
        <option value="{{ s.t_id }}" {% if staff_filter == s.t_id %}selected{% endif %}>{{ s.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="filter-group">
      <label>Search</label>
      <input type="text" id="f_search" placeholder="Name/Phone..." value="{{ search }}">
    </div>
    <button class="btn btn-primary btn-sm" id="btnFilter"><i class="fas fa-search"></i></button>
  </div>

  <div class="bl-cards">
    <div class="bl-card">
      <div class="card-label">Total Bookings</div>
      <div class="card-value">{{ bookings|length }}</div>
    </div>
    <div class="bl-card">
      <div class="card-label">Total Amount</div>
      <div class="card-value">Rs. {{ total_amount|floatformat:0 }}</div>
    </div>
    <div class="bl-card">
      <div class="card-label">Advance Collected</div>
      <div class="card-value" style="color:#28a745;">Rs. {{ total_advance|floatformat:0 }}</div>
    </div>
  </div>

  <div class="bl-bulk">
    <button class="btn btn-success btn-sm" id="btnBulkWhatsapp" disabled>
      <i class="fab fa-whatsapp mr-1"></i>Bulk WhatsApp Reminder
    </button>
    <span class="selected-count" id="selectedCount">0 selected</span>
  </div>

  <div class="bl-table-wrap">
    <table class="bl-table">
      <thead>
        <tr>
          <th style="width:30px;"><input type="checkbox" id="checkAll"></th>
          <th>#</th>
          <th>Customer</th>
          <th>Date / Time</th>
          <th>Staff</th>
          <th>Services</th>
          <th>Amount</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for bk in bookings %}
        <tr class="{% if bk.is_cancelled %}cancelled-row{% endif %}" data-id="{{ bk.booking_id }}">
          <td><input type="checkbox" class="bk-check" value="{{ bk.booking_id }}" data-phone="{{ bk.customer_phone }}"></td>
          <td><span class="bk-id">B-{{ bk.booking_id }}</span></td>
          <td>
            <div class="bk-customer">{{ bk.customer_name }}</div>
            <div class="bk-phone">{{ bk.customer_phone }}</div>
          </td>
          <td>
            <div>{{ bk.booking_date|date:"M d, Y" }}</div>
            <div style="font-size:0.75rem; color:#555;">{{ bk.booking_time|time:"h:i A" }} ({{ bk.estimated_duration }}min)</div>
          </td>
          <td>{{ bk.staff_name }}</td>
          <td><div class="bk-services">{{ bk.services_summary }}</div></td>
          <td>
            <div class="bk-amount">Rs. {{ bk.total_amount|floatformat:0 }}</div>
            {% if bk.advance_amount > 0 %}
            <div class="bk-advance">Adv: {{ bk.advance_amount|floatformat:0 }}{% if bk.advance_invoice_no %} (#{{ bk.advance_invoice_no }}){% endif %}</div>
            {% endif %}
            {% if bk.advance_refunded %}
            <div style="font-size:0.68rem; color:#dc3545;">Refunded{% if bk.cancel_refund_invoice_no %} (#{{ bk.cancel_refund_invoice_no }}){% endif %}</div>
            {% endif %}
          </td>
          <td>
            {% if bk.is_cancelled %}
              <span class="status-badge cancelled">Cancelled</span>
            {% elif bk.invoice_no %}
              <span class="status-badge invoiced">Invoiced #{{ bk.invoice_no }}</span>
            {% else %}
              <span class="status-badge {{ bk.status }} toggle-status" data-id="{{ bk.booking_id }}">{{ bk.get_status_display }}</span>
            {% endif %}
          </td>
          <td class="bk-actions-cell">
            {% if not bk.is_cancelled and not bk.invoice_no %}
            <a href="{% url 'sales:booking_edit' bk.booking_id %}" class="btn btn-outline-primary btn-sm" title="Edit"><i class="fas fa-edit"></i></a>
            <a href="{% url 'sales:pos_invoice' %}?booking={{ bk.booking_id }}&phone={{ bk.customer_phone }}" class="btn btn-outline-success btn-sm" title="Convert to Invoice"><i class="fas fa-file-invoice"></i></a>
            <button class="btn btn-outline-warning btn-sm btn-cancel-bk" data-id="{{ bk.booking_id }}" data-advance="{{ bk.advance_amount|floatformat:0 }}" title="Cancel"><i class="fas fa-ban"></i></button>
            {% endif %}
            <a href="#" class="btn btn-outline-info btn-sm btn-whatsapp-single" data-phone="{{ bk.customer_phone }}" data-name="{{ bk.customer_name }}" title="WhatsApp"><i class="fab fa-whatsapp"></i></a>
            <button class="btn btn-outline-secondary btn-sm btn-print-bk" data-id="{{ bk.booking_id }}" title="Pre-Print"><i class="fas fa-print"></i></button>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="9" class="text-center py-4 text-muted">No bookings found</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

</div>

<!-- Cancel Modal (with cancel_date) -->
<div class="modal fade" id="cancelModal" tabindex="-1">
  <div class="modal-dialog modal-sm modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-warning"><h6 class="modal-title mb-0">Cancel Booking</h6></div>
      <div class="modal-body">
        <input type="hidden" id="cancel_bk_id">
        <div id="cancelAdvanceSection" style="display:none;">
          <p class="mb-2" style="font-size:0.85rem;">Advance paid: <b>Rs. <span id="cancelAdvAmt">0</span></b></p>
          <div class="form-group">
            <label style="font-size:0.8rem;">
              <input type="radio" name="refund_choice" value="refund" checked> Cancel &amp; Refund Advance
            </label><br>
            <label style="font-size:0.8rem;">
              <input type="radio" name="refund_choice" value="keep"> Cancel &amp; Keep Advance
            </label>
          </div>
        </div>
        <div class="form-group">
          <label style="font-size:0.78rem;">Cancel Date</label>
          <input type="date" id="cancel_date" class="form-control form-control-sm" value="">
        </div>
        <div class="form-group">
          <label style="font-size:0.78rem;">Reason (optional)</label>
          <input type="text" id="cancel_reason" class="form-control form-control-sm">
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-sm btn-secondary" data-dismiss="modal">Back</button>
        <button class="btn btn-sm btn-danger" id="btnConfirmCancel">Confirm Cancel</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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

  // ═══ FILTERS ═══
  $('#btnFilter').on('click', applyFilters);
  $('#f_search').on('keypress', function(e) { if (e.which === 13) applyFilters(); });

  function applyFilters() {
    var params = new URLSearchParams();
    params.set('date_from', $('#f_date_from').val());
    params.set('date_to', $('#f_date_to').val());
    var st = $('#f_status').val(); if (st) params.set('status', st);
    var sf = $('#f_staff').val(); if (sf && sf !== '0') params.set('staff_id', sf);
    var sr = $('#f_search').val().trim(); if (sr) params.set('search', sr);
    window.location.href = "{% url 'sales:booking_list' %}?" + params.toString();
  }

  // ═══ CHECKBOXES ═══
  $('#checkAll').on('change', function() {
    $('.bk-check').prop('checked', this.checked);
    updateBulkCount();
  });
  $(document).on('change', '.bk-check', updateBulkCount);

  function updateBulkCount() {
    var count = $('.bk-check:checked').length;
    $('#selectedCount').text(count + ' selected');
    $('#btnBulkWhatsapp').prop('disabled', count === 0);
  }

  // ═══ STATUS TOGGLE ═══
  $(document).on('click', '.toggle-status', function() {
    var $badge = $(this), bid = $badge.data('id');
    $.ajax({
      url: "{% url 'sales:api_booking_toggle_status' 0 %}".replace('0', bid),
      type: 'POST', headers: {'X-CSRFToken': csrfToken()},
      success: function(resp) {
        if (resp.ok) {
          $badge.removeClass('pending confirmed').addClass(resp.new_status)
            .text(resp.new_status === 'confirmed' ? 'Confirmed' : 'Pending');
        }
      }
    });
  });

  // ═══ CANCEL (with cancel_date) ═══
  $(document).on('click', '.btn-cancel-bk', function() {
    var bid = $(this).data('id'), adv = +$(this).data('advance') || 0;
    $('#cancel_bk_id').val(bid);
    $('#cancel_reason').val('');
    // Default cancel date = today
    $('#cancel_date').val(new Date().toISOString().slice(0,10));
    if (adv > 0) {
      $('#cancelAdvanceSection').show();
      $('#cancelAdvAmt').text(adv);
    } else {
      $('#cancelAdvanceSection').hide();
    }
    $('#cancelModal').modal('show');
  });

  $('#btnConfirmCancel').on('click', function() {
    var bid = $('#cancel_bk_id').val();
    var refund = $('input[name=refund_choice]:checked').val() === 'refund';
    var reason = $('#cancel_reason').val().trim();
    var cancelDate = $('#cancel_date').val() || '';

    $.ajax({
      url: "{% url 'sales:api_booking_cancel' 0 %}".replace('0', bid),
      type: 'POST', contentType: 'application/json',
      headers: {'X-CSRFToken': csrfToken()},
      data: JSON.stringify({refund_advance: refund, reason: reason, cancel_date: cancelDate}),
      success: function(resp) {
        $('#cancelModal').modal('hide');
        if (resp.ok) {
          Swal.fire({icon:'success', title:'Cancelled', text: resp.message, timer:1500, showConfirmButton:false})
          .then(function() { location.reload(); });
        } else { Swal.fire('Error', resp.error, 'error'); }
      }
    });
  });

  // ═══ WHATSAPP (Placeholder) ═══
  $(document).on('click', '.btn-whatsapp-single', function(e) {
    e.preventDefault();
    var phone = $(this).data('phone'), name = $(this).data('name');
    Swal.fire('WhatsApp', 'Send reminder to ' + name + ' (' + phone + ')', 'info');
  });

  $('#btnBulkWhatsapp').on('click', function() {
    var selected = [];
    $('.bk-check:checked').each(function() {
      selected.push({id: $(this).val(), phone: $(this).data('phone')});
    });
    Swal.fire('Bulk WhatsApp', 'Send reminder to ' + selected.length + ' customers.\n(Implementation coming soon)', 'info');
  });

  $(document).on('click', '.btn-print-bk', function() {
    var bid = $(this).data('id');
    Swal.fire('Pre-Print', 'Print booking slip #B-' + bid + '\n(Implementation coming soon)', 'info');
  });

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