{% extends "pos/base.html" %}

{% block title %}Customers Quick Edit{% endblock title %}
{% block heading %}Customers Quick Edit{% endblock heading %}

{% block stylesheets %}
  {{ block.super }}
  <style>
    .photo-preview {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 4px;
      border: 1px solid #dee2e6;
      display: block;
      margin-top: 6px;
    }
    .file-clear-btn {
      font-size: 0.75rem;
      padding: 1px 6px;
      margin-top: 4px;
    }
  </style>
{% endblock stylesheets %}

{% block content %}
<div class="row ml-0 mb-3">
  <a href="{% url 'customers:customers_list' %}">
    <button type="button" class="btn btn-info font-weight-bold">
      <i class="fas fa-long-arrow-alt-left mr-2"></i> Go back
    </button>
  </a>
</div>

<div class="row">
  <div class="card col-md-10">
    <div class="card-body">

      <form id="customer-quick-form">
        {% csrf_token %}

        <input type="hidden" id="id_customer_pk" name="customer_pk" value="">

        <!-- ── Search Row ───────────────────────────────── -->
        <div class="form-row">
          <div class="form-group col-md-3">
            <label>Customer Code (t_id)</label>
            <input type="text" class="form-control" id="id_customer_tid" placeholder="Enter code...">
            <small class="text-muted">Enter = load. Empty + Enter = name search.</small>
          </div>

          <div class="form-group col-md-6">
            <label>Customer Name (Search)</label>
            <select id="id_customer_name" style="width:100%"></select>
          </div>

          <div class="form-group col-md-3 d-flex align-items-end">
            <button type="button" id="btn_load" class="btn btn-outline-primary mr-2 w-50">Load</button>
            <button type="button" id="btn_save" class="btn btn-success w-50">Update</button>
          </div>
        </div>

        <hr>

        <!-- ── Row 1: Name / Balance / Balance Date ─────── -->
        <div class="form-row">
          <div class="form-group col-md-4">
            <label>Customer Name (Editable)</label>
            <input type="text" class="form-control" id="id_edit_name" name="edit_name" placeholder="Edit name..." />
          </div>
          <div class="form-group col-md-4">
            <label>Balance</label>
            <input type="number" step="any" class="form-control" id="id_balance" name="balance">
          </div>
          <div class="form-group col-md-4">
            <label>Balance Date</label>
            <input type="date" class="form-control" id="id_balance_date" name="balance_date"
                   value="{{ today_str }}">
          </div>
        </div>

        <!-- ── Row 2: Mobile / Person Name / Address ────── -->
        <div class="form-row">
          <div class="form-group col-md-4">
            <label>Mobile</label>
            <input type="text" class="form-control" id="id_mobile" name="mobile">
          </div>
          <div class="form-group col-md-4">
            <label>Person Name</label>
            <input type="text" class="form-control" id="id_person_name" name="person_name">
          </div>
          <div class="form-group col-md-4">
            <label>Address</label>
            <input type="text" class="form-control" id="id_address" name="address">
          </div>
        </div>

        <!-- ── Row 3: Sale Area / Order Booker / Type ───── -->
        <div class="form-row">
          <div class="form-group col-md-4">
            <label>Sale Area</label>
            <select class="form-control" id="id_phone" name="phone">
              <option value="0">-</option>
              {% for area in sale_areas %}
                <option value="{{ area.t_id }}">{{ area.area_name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group col-md-4">
            <label>Order Booker</label>
            <select class="form-control" id="id_max_balance" name="max_balance">
              <option value="0">-</option>
              {% for ob in order_bookers %}
                <option value="{{ ob.t_id }}">{{ ob.name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="form-group col-md-4">
            <label>Customer Type</label>
            <select class="form-control" id="id_type_c" name="type_c">
              <option value="">Select type...</option>
              <option>Local Sale</option>
              <option>Whole Sale</option>
              <option>Supplier</option>
              <option>Branches</option>
            </select>
          </div>
        </div>

        <!-- ── Row 3b: Department ────────────────────────── -->
        <div class="form-row">
          <div class="form-group col-md-4">
            <label>Department</label>
            <select class="form-control" id="id_department_id" name="department_id" style="width:100%">
              <option value=""></option>
            </select>
          </div>
        </div>

        <!-- ── Row 4: CNIC / NTN / STRN / Urdu Name ────── -->
        <div class="form-row">
          <div class="form-group col-md-3">
            <label>CNIC</label>
            <input type="text" class="form-control" id="id_cnic" name="cnic">
          </div>
          <div class="form-group col-md-3">
            <label>NTN</label>
            <input type="text" class="form-control" id="id_ntn_num" name="ntn_num">
          </div>
          <div class="form-group col-md-3">
            <label>STRN</label>
            <input type="text" class="form-control" id="id_str_no" name="str_no">
          </div>
          <div class="form-group col-md-3">
            <label>Urdu Name</label>
            <input type="text" class="form-control" id="id_urdu_name" name="urdu_name">
          </div>
        </div>

        <!-- ── Row 5: License No / License Expiry / Filer ─ -->
        <div class="form-row">
          <div class="form-group col-md-4">
            <label>License No</label>
            <input type="text" class="form-control" id="id_license_no" name="license_no">
          </div>
          <div class="form-group col-md-4">
            <label>License Expiry</label>
            <input type="date" class="form-control" id="id_license_expiry" name="license_expiry">
          </div>
          <div class="form-group col-md-4 d-flex flex-column justify-content-end">
            <div class="form-check mb-2">
              <input type="checkbox" class="form-check-input" id="id_filer_status" name="filer_status" value="true">
              <label class="form-check-label font-weight-bold" for="id_filer_status">
                Filer Status (Active Taxpayer)
              </label>
            </div>
          </div>
        </div>

        <!-- ── Row 6: Profile Photo / CNIC Image ─────────── -->
        <div class="form-row">
          <div class="form-group col-md-4">
            <label>Profile Photo</label>
            <input type="file" class="form-control-file" id="id_profile_photo" name="profile_photo"
                   accept="image/*">
            <img id="profile_photo_preview" class="photo-preview d-none" src="" alt="Profile Photo">
            <button type="button" class="btn btn-outline-danger btn-sm file-clear-btn d-none"
                    id="btn_clear_profile">
              <i class="fas fa-times mr-1"></i>Clear
            </button>
          </div>
          <div class="form-group col-md-4">
            <label>CNIC Image</label>
            <input type="file" class="form-control-file" id="id_cnic_image" name="cnic_image"
                   accept="image/*">
            <img id="cnic_image_preview" class="photo-preview d-none" src="" alt="CNIC Image">
            <button type="button" class="btn btn-outline-danger btn-sm file-clear-btn d-none"
                    id="btn_clear_cnic_img">
              <i class="fas fa-times mr-1"></i>Clear
            </button>
          </div>

          <!-- Message box moved here -->
          <div class="form-group col-md-4">
            <div id="msg_box" class="alert d-none mt-4 mb-0"></div>
          </div>
        </div>

      {% include "customer_portal/_portal_login_panel.html" with portal=portal %}


      </form>

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

{% block javascripts %}
{{ block.super }}

<script>
jQuery(function($){

  // ─────────────────────────────────────────────
  // Elements
  // ─────────────────────────────────────────────
  const $form = $('#customer-quick-form');
  const $tid  = $('#id_customer_tid');
  const $name = $('#id_customer_name');
  const $pk   = $('#id_customer_pk');
  const $msg  = $('#msg_box');
  const csrf  = $('input[name=csrfmiddlewaretoken]').val();

  // ─────────────────────────────────────────────
  // Messages
  // ─────────────────────────────────────────────
  function showMsg(type, text){
    $msg.removeClass('d-none alert-success alert-danger alert-warning')
        .addClass('alert-' + type)
        .text(text);
  }
  function clearMsg(){
    $msg.addClass('d-none').text('');
  }

  // ─────────────────────────────────────────────
  // Select2 focus helper
  // ─────────────────────────────────────────────
  function focusSelect2Search(){
    setTimeout(() => {
      document.querySelector(
        '.select2-container--open .select2-search__field'
      )?.focus();
    }, 0);
  }
  $(document).on('select2:open', focusSelect2Search);

  // ─────────────────────────────────────────────
  // Customer Select2 (TOP – search only)
  // ─────────────────────────────────────────────
  $name.select2({
    ajax: {
      url: "{% url 'customers:get_customers' %}",
      type: "POST",
      headers: { 'X-CSRFToken': csrf },
      data: params => ({ term: params.term }),
      processResults: data => ({
        results: data.map(c => ({ id: c.id, text: c.text }))
      })
    },
    placeholder: "Type customer name...",
    minimumInputLength: 1,
    allowClear: true,
    width: "100%"
  });

  // Department Select2 (ajax search against Department.name)
  const $dept = $('#id_department_id');
  $dept.select2({
    ajax: {
      url: "{% url 'products:departments_autocomplete' %}",
      dataType: 'json',
      delay: 250,
      data: params => ({ term: params.term }),
      processResults: data => ({
        results: data.map(d => ({ id: d.id, text: d.text }))
      }),
      cache: true
    },
    placeholder: "Search department...",
    minimumInputLength: 1,
    allowClear: true,
    width: "100%"
  });

  // helper: pre-populate an ajax-backed select2 with a known id/text pair
  function setSelect2Option($el, id, text){
    if(id){
      if($el.find("option[value='" + id + "']").length === 0){
        $el.append(new Option(text, id, true, true));
      }
      $el.val(id).trigger('change');
    } else {
      $el.val(null).trigger('change');
    }
  }

  // ─────────────────────────────────────────────
  // Photo Preview helpers
  // ─────────────────────────────────────────────
  function setPhotoPreview(imgId, clearBtnId, url){
    if(url){
      $('#' + imgId).attr('src', url).removeClass('d-none');
      $('#' + clearBtnId).removeClass('d-none');
    } else {
      $('#' + imgId).attr('src', '').addClass('d-none');
      $('#' + clearBtnId).addClass('d-none');
    }
  }

  // Live preview on file select
  $('#id_profile_photo').on('change', function(){
    const file = this.files[0];
    if(file){
      const url = URL.createObjectURL(file);
      setPhotoPreview('profile_photo_preview', 'btn_clear_profile', url);
    }
  });

  $('#id_cnic_image').on('change', function(){
    const file = this.files[0];
    if(file){
      const url = URL.createObjectURL(file);
      setPhotoPreview('cnic_image_preview', 'btn_clear_cnic_img', url);
    }
  });

  // Clear buttons — reset file input + hide preview
  $('#btn_clear_profile').on('click', function(){
    $('#id_profile_photo').val('');
    setPhotoPreview('profile_photo_preview', 'btn_clear_profile', null);
  });

  $('#btn_clear_cnic_img').on('click', function(){
    $('#id_cnic_image').val('');
    setPhotoPreview('cnic_image_preview', 'btn_clear_cnic_img', null);
  });

  // ─────────────────────────────────────────────
  // Fill / Clear Form
  // ─────────────────────────────────────────────
  function fillForm(c){
    $pk.val(c.pk);
    $tid.val(c.t_id);

    $('#id_edit_name').val(c.name || '');
    $('#id_balance').val(c.balance);
    $('#id_address').val(c.address);
    $('#id_mobile').val(c.mobile);

    $('#id_phone').val(String(c.phone || 0)).trigger('change');
    $('#id_max_balance').val(String(c.max_balance || 0)).trigger('change');

    setSelect2Option($dept, c.department_id, c.department_text || '');

    $('#id_person_name').val(c.person_name);
    $('#id_cnic').val(c.cnic);
    $('#id_ntn_num').val(c.ntn_num);
    $('#id_type_c').val(c.type_c).trigger('change');
    $('#id_urdu_name').val(c.urdu_name);
    $('#id_str_no').val(c.str_no);

    // ── New fields ──────────────────────────────
    $('#id_license_no').val(c.license_no || '');
    $('#id_license_expiry').val(c.license_expiry || '');

    $('#id_filer_status')
        .prop('checked', c.filer_status === true || c.filer_status === 'true');

    // Profile photo preview
    setPhotoPreview('profile_photo_preview', 'btn_clear_profile',
                    c.profile_photo_url || null);
    $('#id_profile_photo').val('');   // file input clear (security)

    // CNIC image preview
    setPhotoPreview('cnic_image_preview', 'btn_clear_cnic_img',
                    c.cnic_image_url || null);
    $('#id_cnic_image').val('');

    // balance date → today
    const today = new Date().toISOString().split('T')[0];
    $('#id_balance_date').val(today);

    $name.val(null).trigger('change');
  }

  function clearForm(){
    $pk.val('');
    $tid.val('');
    $name.val(null).trigger('change');

    $form.find('input:not(#id_customer_tid):not([type=file]):not([type=checkbox])').val('');
    $form.find('input[type=file]').val('');
    $form.find('input[type=checkbox]').prop('checked', false);
    $form.find('select:not(#id_department_id)').val('').trigger('change');
    $dept.empty().val(null).trigger('change');
    setPhotoPreview('profile_photo_preview', 'btn_clear_profile', null);
    setPhotoPreview('cnic_image_preview',    'btn_clear_cnic_img',  null);

    clearMsg();
    $tid.focus().select();
  }

  // ─────────────────────────────────────────────
  // AJAX Load
  // ─────────────────────────────────────────────
  function ajaxLoad(payload){
    clearMsg();
    $.post("{% url 'customers:customer_quick_load' %}", payload)
      .done(resp => {
        if(!resp.ok){
          showMsg('danger', resp.message || 'Customer not found');
          return;
        }
        fillForm(resp.customer);
        if (window.cplSetPortal) window.cplSetPortal(resp.portal || {enabled:false});
        showMsg('success', 'Loaded: ' + resp.customer.name);
        $('#id_edit_name').focus().select();
      })
      .fail(() => showMsg('danger', 'Load failed'));
  }

  // ─────────────────────────────────────────────
  // AJAX Save — FormData (supports file uploads)
  // ─────────────────────────────────────────────
  function ajaxSave(){
    clearMsg();

    const fd = new FormData();
    fd.append('csrfmiddlewaretoken', csrf);
    fd.append('customer_pk',   $pk.val());
    fd.append('customer_tid',  $tid.val());

    fd.append('name',          ($('#id_edit_name').val() || '').trim());
    fd.append('balance',       $('#id_balance').val());
    fd.append('balance_date',  $('#id_balance_date').val());
    fd.append('address',       $('#id_address').val());
    fd.append('mobile',        $('#id_mobile').val());
    fd.append('phone',         $('#id_phone').val());
    fd.append('max_balance',   $('#id_max_balance').val());
    fd.append('department_id', $dept.val() || '');
    fd.append('person_name',   $('#id_person_name').val());
    fd.append('cnic',          $('#id_cnic').val());

    // ── Portal login fields (so the quick-edit can create/attach a login) ──
    var cplOn = document.getElementById('cplEnabled');
    fd.append('portal_enabled',  cplOn && cplOn.checked ? '1' : '');
    fd.append('portal_username', ($('#cplUsername').val() || '').trim());
    fd.append('portal_email',    ($('#cplEmail').val() || '').trim());
    fd.append('portal_pw_mode',  $('input[name="portal_pw_mode"]:checked').val() || 'manual');
    fd.append('portal_password', $('#cplPassword').val() || '');


    fd.append('ntn_num',       $('#id_ntn_num').val());
    fd.append('type_c',        $('#id_type_c').val());
    fd.append('urdu_name',     $('#id_urdu_name').val());
    fd.append('str_no',        $('#id_str_no').val());

    // ── New fields ──────────────────────────────
    fd.append('license_no',     $('#id_license_no').val());
    fd.append('license_expiry', $('#id_license_expiry').val());
    fd.append('filer_status',   $('#id_filer_status').is(':checked') ? 'true' : 'false');

    const profileFile = $('#id_profile_photo')[0].files[0];
    if(profileFile) fd.append('profile_photo', profileFile);

    const cnicImgFile = $('#id_cnic_image')[0].files[0];
    if(cnicImgFile) fd.append('cnic_image', cnicImgFile);

    $.ajax({
      url:         "{% url 'customers:customer_quick_save' %}",
      method:      'POST',
      data:        fd,
      processData: false,   // FormData ko serialize mat karo
      contentType: false,   // jQuery ka default Content-Type nahi chahiye
    })
    .done(resp => {
      if(!resp.ok){
        showMsg('danger', resp.message || 'Update failed');
        return;
      }
      if (resp.portal_ok === false && resp.portal_warning) {
        showMsg('warning', 'Login not saved: ' + resp.portal_warning);
      }


      showMsg('success', resp.message || 'Updated');
      setTimeout(clearForm, 200);
    })
    .fail(() => showMsg('danger', 'Save failed'));
  }

  // ─────────────────────────────────────────────
  // t_id → ENTER = LOAD
  // ─────────────────────────────────────────────
  $tid.on('keydown', function(e){
    if(e.key !== 'Enter') return;
    e.preventDefault();
    e.stopPropagation();

    const v = ($(this).val() || '').trim();
    if(!v){
      $name.select2('open');
      focusSelect2Search();
      return;
    }
    ajaxLoad({ csrfmiddlewaretoken: csrf, customer_tid: v });
  });

  // ─────────────────────────────────────────────
  // Buttons
  // ─────────────────────────────────────────────
  $('#btn_load').on('click', function(){
    const v = ($tid.val() || '').trim();
    if(v) ajaxLoad({ csrfmiddlewaretoken: csrf, customer_tid: v });
    else  $name.select2('open');
  });

  $('#btn_save').on('click', ajaxSave);

  $name.on('select2:select', e => {
    ajaxLoad({ csrfmiddlewaretoken: csrf, customer_tid: e.params.data.id });
  });

  // ─────────────────────────────────────────────
  // ENTER → NEXT FIELD
  // ─────────────────────────────────────────────
  function getFields(){
    return $form.find('input, select, textarea')
      .filter(':visible')
      .not('[type=hidden],[type=submit],[type=file]')
      .not(':disabled');
  }

  function moveNext(from){
    const fields = getFields();
    const idx  = fields.index(from);
    const next = fields.eq(idx + 1);
    if(!next.length) return;

    if(next.hasClass('select2-hidden-accessible')){
      next.select2('open');
    } else {
      next.focus();
      if(next[0].select) next[0].select();
    }
  }

  $form.on('keydown', 'input, select, textarea', function(e){
    if(e.key !== 'Enter') return;
    if(this.id === 'id_customer_tid') return;
    if(this.tagName.toLowerCase() === 'textarea') return;
    if($('.select2-container--open').length){ e.preventDefault(); return; }
    e.preventDefault();
    moveNext(this);
  });

  $(document).on('keydown', '.select2-search__field', function(e){
    if(e.key !== 'Enter') return;
    e.preventDefault();
    const $hl = $('.select2-results__option--highlighted');
    if($hl.length) $hl.trigger('mouseup');
    setTimeout(() => { moveNext(document.activeElement); }, 80);
  });

  // ─────────────────────────────────────────────
  // Ctrl + S → Save
  // ─────────────────────────────────────────────
  $(document).on('keydown', function(e){
    if((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's'){
      e.preventDefault();
      ajaxSave();
    }
  });

  // ─────────────────────────────────────────────
  // Auto-load on page open (if tid passed in URL)
  // ─────────────────────────────────────────────
  const autoTid = "{{ auto_load_tid }}";
  if(autoTid){
    $tid.val(autoTid);
    ajaxLoad({ csrfmiddlewaretoken: csrf, customer_tid: autoTid });
  } else {
    $tid.focus();
  }

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