{# templates/sales/estimates.html #}
{% extends "pos/base.html" %}
{% load static %}
{% block title %}Estimates / Quotations{% endblock %}

{% block stylesheets %}
<style>
  .text-end { text-align: end; }
  .filter-row .form-control, .filter-row .custom-select { min-width: 180px; }
  .btn-group-sm .btn { margin-right: 4px; }
  .badge-total { background:#01478f; color:#ffffff; font-size:1rem; }

  /* receipt modal polish (same as sales.html) */
  #receiptModal .btn-group-toggle .btn { min-width: 140px; }
  .rm-template-item { transition: box-shadow .15s ease; }
  .rm-template-item:hover { box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.08); }

  #receiptModal .btn-group.btn-group-toggle{
    flex-wrap: wrap; justify-content: center; width: 100%;
  }
  #receiptModal .btn-group.btn-group-toggle .btn{
    margin: .25rem; min-width: 130px;
  }
  @media (max-width: 575.98px){
    #receiptModal .btn-group.btn-group-toggle .btn{
      flex: 1 1 calc(50% - .5rem);
    }
  }
  @media (min-width: 576px){
    #receiptModal .btn-group.btn-group-toggle .btn{
      flex: 0 0 auto;
    }
  }
</style>
{% endblock %}

{% block heading %}Estimates / Quotations{% endblock %}

{% block content %}

<!-- Filter Bar -->
<form method="get" class="mb-3">
  <div class="card">
    <div class="card-body py-2">
      <div class="row align-items-end filter-row">
        <div class="col-md-2 col-6 mb-2">
          <label class="mb-1">Filter by</label>
          <select name="filter" id="filterType" class="custom-select custom-select-sm">
            <option value="date" {% if picked_filter == "date" or not picked_filter %}selected{% endif %}>Date</option>
            <option value="invoice" {% if picked_filter == "invoice" %}selected{% endif %}>Invoice #</option>
            <option value="customer" {% if picked_filter == "customer" %}selected{% endif %}>Customer</option>
          </select>
        </div>

        <div class="col-md-2 col-6 mb-2 filter-box filter-invoice" style="display:none;">
          <label class="mb-1">Invoice #</label>
          <input type="text" class="form-control form-control-sm" name="invoice" value="{{ invoice_q|default:'' }}" placeholder="e.g. 7001">
        </div>

        <div class="col-md-3 col-12 mb-2 filter-box filter-customer" style="display:none;">
          <label class="mb-1">Customer</label>
          <input type="text" class="form-control form-control-sm" name="customer" value="{{ customer_q|default:'' }}" placeholder="Customer name">
        </div>

        <div class="col-md-2 col-6 mb-2 filter-box filter-date" style="display:none;">
          <label class="mb-1">From</label>
          <input type="date" class="form-control form-control-sm" name="date_from" value="{{ date_from_q|default:'' }}">
        </div>
        <div class="col-md-2 col-6 mb-2 filter-box filter-date" style="display:none;">
          <label class="mb-1">To</label>
          <input type="date" class="form-control form-control-sm" name="date_to" value="{{ date_to_q|default:'' }}">
        </div>

        <div class="col-md-3 col-12 mb-2 text-right">
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="fas fa-search"></i> Filter
          </button>
          <a href="{% url 'sales:estimates_list' %}" class="btn btn-light btn-sm">
            <i class="fas fa-undo"></i> Reset
          </a>
        </div>
      </div>
    </div>
  </div>
</form>

<!-- Create New Estimate -->
<div class="row ml-0 mb-3">
  <a href="{% url 'sales:estimates_add' %}">
    <button type="button" class="btn btn-success font-weight-bold">
      <i class="fas fa-plus mr-2"></i> Create new Estimate
    </button>
  </a>
</div>

<!-- Table -->
<div class="card shadow mb-4">
  <div class="card-header py-3 d-flex align-items-center justify-content-between">
    <h6 class="m-0 font-weight-bold text-primary">Estimates</h6>
    <div>
      <a href="{% url 'sales:sales_list' %}" class="btn btn-outline-secondary btn-sm">Sales</a>
      <a href="{% url 'sales:sales_return_list' %}" class="btn btn-outline-secondary btn-sm">Returns</a>
    </div>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-bordered table-hover" id="dataTable" width="100%" cellspacing="0">
        <thead class="thead-light">
          <tr>
            <th style="width:60px;">#</th>
            <th style="width:120px;">Invoice #</th>
            <th style="width:140px;">Date</th>
            <th>Customer</th>
            <th class="text-end" style="width:160px;">Estimate Total</th>
            <th class="text-center" style="width:280px;">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for s in sales %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ s.description }}</td>
            <td>{{ s.transaction_date }}</td>
            <td>{{ s.party_descp }}</td>
            <td class="text-end">{{ s.total_amount|floatformat:2 }}</td>
            <td class="text-center">
              <div class="btn-group btn-group-sm" role="group" aria-label="actions">
                <a href="{% url 'sales:estimate_edit' s.description %}" class="btn btn-warning" title="Edit">
                  <i class="fas fa-edit"></i>
                </a>
                <a href="{% url 'sales:estimates_delete' s.description %}"
                   class="btn btn-danger"
                   onclick="return confirm('Delete estimate #{{ s.description }}?');"
                   title="Delete">
                  <i class="fas fa-trash"></i>
                </a>
                <a href="{% url 'sales:estimate_convert_to_sale' s.description %}"
                   class="btn btn-info"
                   title="Convert to Sale">
                  <i class="fas fa-exchange-alt"></i>
                </a>
                <button type="button"
                        class="btn btn-dark btn-receipt"
                        data-invoice="{{ s.description }}"
                        title="Print / Quote">
                  <i class="fas fa-print"></i>
                </button>
              </div>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="6" class="text-center text-muted">No estimates found for selected filter.</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class="text-end mt-3">
      <span class="badge badge-total p-2">
        Grand&nbsp;Total:&nbsp;{{ grand_total|floatformat:2 }}
      </span>
    </div>
  </div>
</div>

<!-- Receipt Modal (same UX as sales.html) -->
<div class="modal fade" id="receiptModal" tabindex="-1" role="dialog" aria-labelledby="receiptModalLbl" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <h6 class="modal-title" id="receiptModalLbl">Print / Share Estimate</h6>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
      </div>

      <div class="modal-body">

        <!-- carrier for invoice no -->
        <input type="hidden" id="rm_invoice_no" value="">

        <!-- 1) Actions row (single-select) -->
        <div class="mb-3 text-center">
          <div class="btn-group btn-group-toggle" data-toggle="buttons" id="rm_action_group">
            <label class="btn btn-outline-primary active">
              <input type="radio" name="rm_action" value="pdf" autocomplete="off" checked> PDF
            </label>
            <label class="btn btn-outline-primary">
              <input type="radio" name="rm_action" value="print" autocomplete="off"> Direct Print
            </label>
            <label class="btn btn-outline-primary">
              <input type="radio" name="rm_action" value="share" autocomplete="off"> Share
            </label>
            <label class="btn btn-outline-primary">
              <input type="radio" name="rm_action" value="download" autocomplete="off"> Download PDF
            </label>
          </div>
        </div>

        <!-- 2) Templates grid (built-in + dynamic) -->
        <div id="rm_tpl_grid" class="container-fluid">
          <div class="row">
            <div class="col-12 col-sm-6 col-md-4 mb-2">
              <button type="button" class="btn btn-light border w-100 text-left rm-template-item" data-template-id="a1">
                <div class="d-flex align-items-center">
                  <i class="far fa-file-pdf mr-2 text-secondary"></i><span>1. A4</span>
                </div>
              </button>
            </div>
            <div class="col-12 col-sm-6 col-md-4 mb-2">
              <button type="button" class="btn btn-light border w-100 text-left rm-template-item" data-template-id="a2">
                <div class="d-flex align-items-center">
                  <i class="far fa-file-pdf mr-2 text-secondary"></i><span>2. A4</span>
                </div>
              </button>
            </div>
            <div class="col-12 col-sm-6 col-md-4 mb-2">
              <button type="button" class="btn btn-light border w-100 text-left rm-template-item" data-template-id="a6">
                <div class="d-flex align-items-center">
                  <i class="far fa-file-pdf mr-2 text-secondary"></i><span>3. A4</span>
                </div>
              </button>
            </div>



            <div class="col-12 col-sm-6 col-md-4 mb-2">
              <button type="button" class="btn btn-light border w-100 text-left rm-template-item" data-template-id="b1">
                <div class="d-flex align-items-center">
                  <i class="far fa-file-pdf mr-2 text-secondary"></i><span>1. A5</span>
                </div>
              </button>
            </div>

            <div class="col-12 col-sm-6 col-md-4 mb-2">
              <button type="button" class="btn btn-light border w-100 text-left rm-template-item" data-template-id="b2">
                <div class="d-flex align-items-center">
                  <i class="far fa-file-pdf mr-2 text-secondary"></i><span>2. A5</span>
                </div>
              </button>
            </div>

            <div class="col-12 col-sm-6 col-md-4 mb-2">
              <button type="button" class="btn btn-light border w-100 text-left rm-template-item" data-template-id="b3">
                <div class="d-flex align-items-center">
                  <i class="far fa-file-pdf mr-2 text-secondary"></i><span>3. A5</span>
                </div>
              </button>
            </div>

            <div class="col-12 col-sm-6 col-md-4 mb-2">
              <button type="button" class="btn btn-light border w-100 text-left rm-template-item" data-template-id="t1">
                <div class="d-flex align-items-center">
                  <i class="far fa-file-pdf mr-2 text-secondary"></i><span>80mm (Thermal)</span>
                </div>
              </button>
            </div>

          </div>
        </div>

      </div>

      <div class="modal-footer">
        <small class="text-muted mr-auto">Choose an action above, then click a template.</small>
        <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
      </div>

    </div>
  </div>
</div>

{% endblock %}

{% block javascripts %}

<script>
  (function(){
    // DataTable
    // $(function(){
    //   $('#dataTable').DataTable({ "order": [[2,'desc']], "pageLength": 25 });
    // });

    // Filter UI show/hide
    function applyFilterUI(){
      var t = $('#filterType').val();
      $('.filter-box').hide();
      if (t === 'invoice') { $('.filter-invoice').show(); }
      else if (t === 'customer') { $('.filter-customer').show(); }
      else { $('.filter-date').show(); }
    }
    $('#filterType').on('change', applyFilterUI);
    applyFilterUI();

    // ----- Receipt Modal (same behavior as sales.html) -----
    // Open modal with invoice #
    $(document).on('click', '.btn-receipt', function(){
      const inv = $(this).data('invoice') || '';
      $('#rm_invoice_no').val(inv);

      // reset to PDF
      $('#rm_action_group input[name="rm_action"][value="pdf"]').prop('checked', true);
      $('#rm_action_group .btn').removeClass('active');
      $('#rm_action_group .btn input[value="pdf"]').closest('.btn').addClass('active');

      $('#receiptModal').modal('show');
    });

    // Selected action
    function getSelectedAction(){
      return $('#rm_action_group input[name="rm_action"]:checked').val() || 'pdf';
    }


  function buildViewUrl(tplId, invNo) {
    const tpl = String(tplId).toLowerCase();
    const encInv = encodeURIComponent(invNo);

    return `/invoices/invoice-templates/${tplId}/${encInv}/quotation/`;
  }

    // Template click ⇒ run action
    $(document).on('click', '.rm-template-item', async function(){
      const invNo = $('#rm_invoice_no').val();
      const tplId  = $(this).data('template-id');
      const action = getSelectedAction();
      if (!invNo || !tplId || !action) return;

      await runReceiptAction(tplId, invNo, action);
      $('#receiptModal').modal('hide');
    });

    // Runner
    async function runReceiptAction(tplId, invNo, action){
      const baseUrl = buildViewUrl(tplId, invNo);

      if (action === 'pdf')       { window.open(baseUrl, '_blank'); return; }
      if (action === 'print')     { window.open(baseUrl + '?autoprint=1&close=afterprint', '_blank'); return; }
      if (action === 'download')  { window.open(baseUrl + '?download=1', '_blank'); return; }
      if (action === 'share') {
        try {
          const pdfUrl = baseUrl + '?pdf=1';
          const resp = await fetch(pdfUrl, { credentials: 'same-origin', cache: 'no-store' });
          if (!resp.ok) throw new Error('PDF fetch failed');
          const blob = await resp.blob();
          const fileName = `estimate-${invNo}.pdf`;
          const file = new File([blob], fileName, { type: 'application/pdf' });

          const isSecure = window.isSecureContext || /^https:$/i.test(location.protocol) || /^(localhost|127\.0\.0\.1)$/i.test(location.hostname);

          if (isSecure && navigator.canShare && navigator.canShare({ files: [file] })) {
            await navigator.share({ files: [file], title: `Estimate #${invNo}`, text: 'Please find attached estimate.' });
          } else {
            const blobUrl = URL.createObjectURL(file);
            const w = window.open(blobUrl, '_blank');
            if (!w) window.open(baseUrl + '?download=1', '_blank');
          }
        } catch (err) {
          window.open(baseUrl + '?download=1', '_blank');
        }
      }
    }
  })();
</script>
{% endblock %}