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

{% block title %}Booking Calendar{% endblock %}

{% block stylesheets %}
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.5/main.min.css" rel="stylesheet">
<style>
.cal-container { padding: 15px; }
.cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.cal-header h5 { margin: 0; font-weight: 700; color: #01478f; }
.cal-filter { display: flex; gap: 8px; align-items: center; }
.cal-filter select { height: 32px; font-size: 0.8rem; border: 1px solid #ddd; border-radius: 4px; padding: 2px 8px; }
.cal-wrap { background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); padding: 15px; }

/* FullCalendar overrides */
.fc { font-size: 0.82rem; }
.fc .fc-toolbar-title { font-size: 1.1rem; font-weight: 700; color: #01478f; }
.fc .fc-button-primary { background: #01478f; border-color: #01478f; font-size: 0.78rem; }
.fc .fc-button-primary:not(:disabled).fc-button-active { background: #023a6f; }
.fc .fc-event { cursor: pointer; border-radius: 4px; padding: 1px 4px; font-size: 0.72rem; }
.fc .fc-daygrid-day-number { font-weight: 600; }
.fc .fc-daygrid-day.fc-day-today { background: #f0f7ff; }
.fc-timegrid-slot { height: 35px; }

/* Legend */
.cal-legend { display: flex; gap: 15px; margin-top: 10px; font-size: 0.75rem; }
.cal-legend-item { display: flex; align-items: center; gap: 5px; }
.cal-legend-dot { width: 12px; height: 12px; border-radius: 3px; }

/* Day detail modal */
.day-detail-modal .modal-header { background: #01478f; color: #fff; padding: 10px 15px; }
.day-booking-item { padding: 10px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: flex-start; font-size: 0.82rem; }
.day-booking-item:last-child { border-bottom: none; }
.day-booking-item:hover { background: #f8f9ff; }
.dbi-left .dbi-time { font-weight: 700; color: #01478f; }
.dbi-left .dbi-customer { font-weight: 600; }
.dbi-left .dbi-services { font-size: 0.75rem; color: #666; }
.dbi-right { text-align: right; }
.dbi-right .dbi-staff { font-size: 0.75rem; color: #555; }
.dbi-right .dbi-amount { font-weight: 700; }

/* Event detail popup */
.event-popup { position: absolute; background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); padding: 15px; min-width: 260px; z-index: 9999; display: none; font-size: 0.82rem; }
.event-popup .ep-header { font-weight: 700; font-size: 0.9rem; color: #01478f; margin-bottom: 8px; border-bottom: 1px solid #eee; padding-bottom: 6px; }
.event-popup .ep-row { margin-bottom: 4px; }
.event-popup .ep-label { font-weight: 600; color: #888; font-size: 0.72rem; text-transform: uppercase; }
.event-popup .ep-actions { margin-top: 10px; display: flex; gap: 5px; }
.event-popup .ep-actions .btn { font-size: 0.72rem; padding: 3px 8px; }
.ep-close { position: absolute; top: 8px; right: 10px; cursor: pointer; font-size: 1rem; color: #999; }
</style>
{% endblock %}

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

  <div class="cal-header">
    <h5><i class="fas fa-calendar-alt mr-2"></i>Booking Calendar</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_list' %}" class="btn btn-sm btn-outline-secondary"><i class="fas fa-list mr-1"></i>List</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="cal-filter">
    <label style="font-size:0.78rem; font-weight:600;">Staff:</label>
    <select id="calStaffFilter">
      <option value="0">All Staff</option>
      {% for s in staff_list %}
      <option value="{{ s.t_id }}">{{ s.name }}</option>
      {% endfor %}
    </select>
  </div>

  <div class="cal-wrap">
    <div id="calendar"></div>
    <div class="cal-legend">
      <div class="cal-legend-item"><div class="cal-legend-dot" style="background:#ffc107;"></div> Pending</div>
      <div class="cal-legend-item"><div class="cal-legend-dot" style="background:#28a745;"></div> Confirmed</div>
      <div class="cal-legend-item"><div class="cal-legend-dot" style="background:#dc3545;"></div> Cancelled</div>
    </div>
  </div>

</div>

<!-- Event Detail Popup (positioned absolutely) -->
<div class="event-popup" id="eventPopup">
  <span class="ep-close" id="epClose">&times;</span>
  <div class="ep-header" id="epTitle"></div>
  <div class="ep-row"><span class="ep-label">Customer:</span> <span id="epCustomer"></span></div>
  <div class="ep-row"><span class="ep-label">Phone:</span> <span id="epPhone"></span></div>
  <div class="ep-row"><span class="ep-label">Time:</span> <span id="epTime"></span></div>
  <div class="ep-row"><span class="ep-label">Staff:</span> <span id="epStaff"></span></div>
  <div class="ep-row"><span class="ep-label">Services:</span> <span id="epServices"></span></div>
  <div class="ep-row"><span class="ep-label">Amount:</span> <b id="epAmount"></b></div>
  <div class="ep-row"><span class="ep-label">Advance:</span> <span id="epAdvance"></span></div>
  <div class="ep-row"><span class="ep-label">Status:</span> <span id="epStatus"></span></div>
  <div class="ep-actions">
    <a id="epEditBtn" href="#" class="btn btn-outline-primary btn-sm"><i class="fas fa-edit"></i> Edit</a>
    <a id="epInvoiceBtn" href="#" class="btn btn-outline-success btn-sm"><i class="fas fa-file-invoice"></i> Invoice</a>
  </div>
</div>

<!-- Day Detail Modal (for month view cell click) -->
<div class="modal fade day-detail-modal" id="dayDetailModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title mb-0" id="dayDetailTitle">Bookings</h6>
        <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body p-0" id="dayDetailBody" style="max-height:400px; overflow-y:auto;">
        <div class="text-center py-3 text-muted">Loading...</div>
      </div>
      <div class="modal-footer py-2">
        <button class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block javascripts %}
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.5/main.min.js"></script>
<script>
(function(){
  'use strict';
  function csrfToken() { return '{{ csrf_token }}'; }
  function fmt(n) { return Number(n||0).toLocaleString(); }

  var calendarEl = document.getElementById('calendar');
  var calendar;

  function eventsUrl() {
    var staff = $('#calStaffFilter').val() || 0;
    return "{% url 'sales:api_booking_events' %}" + (staff && staff !== '0' ? '?staff_id=' + staff : '');
  }

  function initCalendar() {
    calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      height: 'auto',
      nowIndicator: true,
      slotMinTime: '08:00:00',
      slotMaxTime: '22:00:00',
      allDaySlot: false,
      events: function(fetchInfo, successCallback, failureCallback) {
        var staff = $('#calStaffFilter').val() || 0;
        var params = 'start=' + fetchInfo.startStr + '&end=' + fetchInfo.endStr;
        if (staff && staff !== '0') params += '&staff_id=' + staff;
        $.getJSON("{% url 'sales:api_booking_events' %}?" + params)
        .done(function(events) { successCallback(events); })
        .fail(function() { failureCallback(); });
      },

      // Month view: click day cell → show day detail modal
      dateClick: function(info) {
        if (calendar.view.type === 'dayGridMonth') {
          showDayDetail(info.dateStr);
        }
      },

      // Click event → show popup
      eventClick: function(info) {
        info.jsEvent.preventDefault();
        var ep = info.event.extendedProps;
        showEventPopup(info.jsEvent, ep);
      },

      // Mobile friendly
      windowResize: function() { calendar.updateSize(); }
    });
    calendar.render();
  }

  // ═══ EVENT POPUP ═══
  function showEventPopup(jsEvent, ep) {
    var $popup = $('#eventPopup');
    $('#epTitle').text('Booking #B-' + ep.booking_id);
    $('#epCustomer').text(ep.customer_name);
    $('#epPhone').text(ep.customer_phone);
    $('#epTime').text(ep.booking_time + ' (' + ep.estimated_duration + ' min)');
    $('#epStaff').text(ep.staff_name);
    $('#epServices').text(ep.services_summary);
    $('#epAmount').text('Rs. ' + fmt(ep.total_amount));
    $('#epAdvance').text(ep.advance_amount > 0 ? 'Rs. ' + fmt(ep.advance_amount) : '-');
    $('#epStatus').html(ep.is_cancelled
      ? '<span class="badge badge-danger">Cancelled</span>'
      : ep.status === 'confirmed'
        ? '<span class="badge badge-success">Confirmed</span>'
        : '<span class="badge badge-warning text-dark">Pending</span>');

    var editUrl = "{% url 'sales:booking_edit' 0 %}".replace('0', ep.booking_id);
    var invoiceUrl = "{% url 'sales:pos_invoice' %}?booking=" + ep.booking_id + "&phone=" + ep.customer_phone;
    $('#epEditBtn').attr('href', editUrl);
    $('#epInvoiceBtn').attr('href', invoiceUrl);

    if (ep.is_cancelled || ep.invoice_no) {
      $('#epInvoiceBtn').hide();
    } else {
      $('#epInvoiceBtn').show();
    }

    // Position popup near click
    var x = jsEvent.pageX, y = jsEvent.pageY;
    if (x + 280 > $(window).width()) x = $(window).width() - 290;
    if (y + 300 > $(window).height() + $(window).scrollTop()) y -= 200;

    $popup.css({left: x, top: y}).show();
  }

  $(document).on('click', '#epClose', function() { $('#eventPopup').hide(); });
  $(document).on('click', function(e) {
    if (!$(e.target).closest('#eventPopup, .fc-event').length) {
      $('#eventPopup').hide();
    }
  });

  // ═══ DAY DETAIL MODAL ═══
  function showDayDetail(dateStr) {
    $('#dayDetailTitle').text('Bookings — ' + dateStr);
    $('#dayDetailBody').html('<div class="text-center py-3"><i class="fas fa-spinner fa-spin"></i></div>');
    $('#dayDetailModal').modal('show');

    $.getJSON("{% url 'sales:api_booking_day_detail' %}", {date: dateStr}).done(function(resp) {
      if (!resp.ok || !resp.bookings.length) {
        $('#dayDetailBody').html('<div class="text-center py-3 text-muted">No bookings</div>');
        return;
      }
      var html = '';
      resp.bookings.forEach(function(bk) {
        var statusCls = bk.is_cancelled ? 'badge-danger' : (bk.status === 'confirmed' ? 'badge-success' : 'badge-warning text-dark');
        var statusTxt = bk.is_cancelled ? 'Cancelled' : (bk.status === 'confirmed' ? 'Confirmed' : 'Pending');
        html += '<div class="day-booking-item">'
              + '<div class="dbi-left">'
              + '<div class="dbi-time">' + bk.booking_time + ' <span class="badge ' + statusCls + '">' + statusTxt + '</span></div>'
              + '<div class="dbi-customer">' + bk.customer_name + ' <small class="text-muted">(' + bk.customer_phone + ')</small></div>'
              + '<div class="dbi-services">' + bk.services_summary + '</div>'
              + '</div>'
              + '<div class="dbi-right">'
              + '<div class="dbi-staff"><i class="fas fa-user-tie mr-1"></i>' + bk.staff_name + '</div>'
              + '<div class="dbi-amount">Rs. ' + fmt(bk.total_amount) + '</div>'
              + '</div>'
              + '</div>';
      });
      $('#dayDetailBody').html(html);
    });
  }

  // ═══ STAFF FILTER ═══
  $('#calStaffFilter').on('change', function() {
    calendar.refetchEvents();
  });

  // ═══ INIT ═══
  $(function() { initCalendar(); });

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