@extends('layout.app')
@section('title', 'Edit Item')

@push('header_script')
<link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
<style>
  /* Base prototype variables & styling for the form layout */
  :root {
    --canvas: #F5F6F8;
    --surface: #FFFFFF;
    --ink: #17212B;
    --muted: #67727E;
    --border: #E2E5E9;
    --control: #C99248;
    --product: #35608C;
    --required: #C0392B;
    --panel-bg: #1B212B;
    --panel-border: #2A313D;
    --panel-text: #E7EAEE;
    --panel-muted: #8890A0;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  }

  /* ---------- Layout ---------- */
  .layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 70vh;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
  }
  .layout.panel-hidden { grid-template-columns: 1fr; }
  .layout.panel-hidden .control-plane { display: none; }
  @media (max-width: 900px) {
    .layout { grid-template-columns: 1fr; }
  }

  /* ---------- Control plane (Sidebar) ---------- */
  .control-plane {
    background: var(--panel-bg);
    color: var(--panel-text);
    padding: 22px 20px 40px;
    border-right: 1px solid var(--panel-border);
  }
  .control-plane .plane-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--panel-muted);
    margin-bottom: 8px;
  }
  .control-plane .plane-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
  .control-plane .plane-desc { font-size: 12px; color: var(--panel-muted); line-height: 1.5; margin-bottom: 20px; }
  
  .control-plane h2 {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--control);
    margin: 22px 0 6px;
    font-family: var(--font-mono);
    font-weight: 600;
  }

  .toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--panel-border);
  }
  .toggle-row .label { font-size: 13px; display: block; }

  /* Switch */
  .switch { position: relative; width: 34px; height: 20px; flex: none; }
  .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
  .switch .track {
    position: absolute; inset: 0; background: #3A4250; border-radius: 999px; transition: background .15s; pointer-events: none;
  }
  .switch .thumb {
    position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: #C7CDD6; transition: transform .15s, background .15s; pointer-events: none;
  }
  .switch input:checked + .track { background: var(--control); }
  .switch input:checked + .track .thumb { transform: translateX(14px); background: #1B212B; }

  /* ---------- Live preview (Form Area) ---------- */
  .live-preview {
    background: var(--surface);
    padding: 0;
  }
  .form-card-header {
    padding: 20px 28px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #FAFBFC, #FFFFFF);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }
  .form-card-header h2 { margin: 0; font-size: 19px; font-weight: 700; }
  .panel-toggle-btn {
    font-family: var(--font-mono); font-size: 11px; padding: 7px 12px;
    border-radius: 7px; border: 1px solid var(--border); background: #fff;
    color: var(--muted); cursor: pointer; white-space: nowrap;
  }
  .panel-toggle-btn:hover { border-color: var(--product); color: var(--product); }

  .form-section { padding: 22px 28px; border-bottom: 1px solid var(--border); }
  .form-section h3 {
    font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--product); margin: 0 0 16px; font-family: var(--font-mono); font-weight: 600;
  }
  
  .required-star { color: var(--required); }
  .field-hint { font-size: 11px; color: var(--muted); margin-top: 4px; display: block; }
</style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0);">Master</a></li>
        <li class="breadcrumb-item"><a href="{{ route('product.index') }}">Item Master</a></li>
        <li class="breadcrumb-item active">Edit Item</li>
    </ol>
</div>

<div class="app-body">
    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show m-3" role="alert">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
  <div class="layout" id="item-form-layout">
    
    <!-- Control plane (Sidebar Settings) -->
    <aside class="control-plane">
      <div class="plane-label">Control plane</div>
      <div class="plane-title">Item Settings</div>
      <div class="plane-desc">Toggling a setting here immediately updates the form and saves it as the default for everyone.</div>
      
      <h2>Basic details</h2>
      <div class="toggle-row">
        <div><span class="label">Item Category</span></div>
        <label class="switch"><input type="checkbox" id="s-itemCategory"><span class="track"><span class="thumb"></span></span></label>
      </div>

      <h2>Pricing &amp; tax</h2>
      <div class="toggle-row">
        <div><span class="label">MRP / Sale Price</span></div>
        <label class="switch"><input type="checkbox" id="s-mrp"><span class="track"><span class="thumb"></span></span></label>
      </div>
      <div class="toggle-row">
        <div><span class="label">GST</span></div>
        <label class="switch"><input type="checkbox" id="s-gst"><span class="track"><span class="thumb"></span></span></label>
      </div>

      <h2>Stock</h2>
      <div class="toggle-row">
        <div><span class="label">Stock Maintenance</span></div>
        <label class="switch"><input type="checkbox" id="s-stockMaintenance"><span class="track"><span class="thumb"></span></span></label>
      </div>

      <h2>Tracking &amp; identification</h2>
      <div class="toggle-row">
        <div><span class="label">Batch Tracking</span></div>
        <label class="switch"><input type="checkbox" id="s-batchTracking"><span class="track"><span class="thumb"></span></span></label>
      </div>
      <div class="toggle-row">
        <div><span class="label">Manufacturing Date</span></div>
        <label class="switch"><input type="checkbox" id="s-mfgDate"><span class="track"><span class="thumb"></span></span></label>
      </div>
      <div class="toggle-row">
        <div><span class="label">Expiry Date</span></div>
        <label class="switch"><input type="checkbox" id="s-expiryDate"><span class="track"><span class="thumb"></span></span></label>
      </div>
      <div class="toggle-row">
        <div><span class="label">Model No.</span></div>
        <label class="switch"><input type="checkbox" id="s-modelNo"><span class="track"><span class="thumb"></span></span></label>
      </div>
      <div class="toggle-row">
        <div><span class="label">Size</span></div>
        <label class="switch"><input type="checkbox" id="s-size"><span class="track"><span class="thumb"></span></span></label>
      </div>
      <div class="toggle-row">
        <div><span class="label">Part Number</span></div>
        <label class="switch"><input type="checkbox" id="s-partNumber"><span class="track"><span class="thumb"></span></span></label>
      </div>
      <div class="toggle-row">
        <div><span class="label">Item Code / SKU</span></div>
        <label class="switch"><input type="checkbox" id="s-itemCodeSku"><span class="track"><span class="thumb"></span></span></label>
      </div>
      <div class="toggle-row">
        <div><span class="label">Brand</span></div>
        <label class="switch"><input type="checkbox" id="s-brand"><span class="track"><span class="thumb"></span></span></label>
      </div>

      <h2>Other</h2>
      <div class="toggle-row">
        <div><span class="label">Description</span></div>
        <label class="switch"><input type="checkbox" id="s-description"><span class="track"><span class="thumb"></span></span></label>
      </div>
    </aside>

    <!-- Live preview (Form Area) -->
    <div class="live-preview">
      <div class="form-card-header">
        <div>
          <h2>Edit Item: {{ $productData->product_name }}</h2>
        </div>
        <button type="button" class="panel-toggle-btn" id="btn-toggle-panel">Hide settings panel</button>
      </div>

      <div style="padding: 20px;">
        {!! Form::model($productData, [
            'route' => ['product.update', $productData->id],
            'onsubmit' => 'BtnSubmit.disabled = true',
            'class' => 'needs-validation',
            'method' => 'put',
            'autocomplete' => 'off',
        ]) !!}
        <input type="hidden" name="id" value="{{ $productData->id }}">
        
        <!-- Basic Item Details -->
        <div class="form-section pt-0 px-0">
          <h3>Basic Item Details</h3>
          <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label">Item Name <span class="required-star">*</span></label>
                {!! Form::text('product_name', null, ['class' => 'form-control', 'required']) !!}
                <div class="text-danger">{{ $errors->first('product_name') }}</div>
            </div>
            <div class="col-md-6" id="fld-item-category">
                <label class="form-label">Category <span class="required-star">*</span>
                    <button type="button" class="btn btn-sm btn-primary py-0 px-1 btnQuickAddCategory" style="margin-left: 5px;" title="Add Category">
                        <i class="ri-add-circle-line"></i>
                    </button>
                </label>
                {!! Form::select('product_category_id', ['' => '--Select--'] + $category, null, [
                    'class' => 'form-select select2', 'id' => 'product_category_id',
                ]) !!}
                <div class="text-danger">{{ $errors->first('product_category_id') }}</div>
            </div>
            <div class="col-md-6">
                <label class="form-label">Unit <span class="required-star">*</span>
                    <button type="button" class="btn btn-sm btn-primary py-0 px-1 btnQuickAddUnit" style="margin-left: 5px;" title="Add Unit">
                        <i class="ri-add-circle-line"></i>
                    </button>
                </label>
                {!! Form::select('units', ['' => '--Select--'] + $units, null, [
                    'class' => 'form-select select2', 'id' => 'units', 'required'
                ]) !!}
                <div class="text-danger">{{ $errors->first('units') }}</div>
            </div>
            <div class="col-md-6" id="fld-brand">
                <label class="form-label">Brand <span class="required-star">*</span>
                    <button type="button" class="btn btn-sm btn-primary py-0 px-1 btnQuickAddBrand" style="margin-left: 5px;" title="Add Brand">
                        <i class="ri-add-circle-line"></i>
                    </button>
                </label>
                {!! Form::select('brand_id', ['' => '--Select--'] + $brands, null, [
                    'class' => 'form-select select2', 'id' => 'brand_id'
                ]) !!}
                <div class="text-danger">{{ $errors->first('brand_id') }}</div>
            </div>
          </div>
        </div>

        <!-- Pricing & Tax -->
        <div class="form-section px-0">
          <h3>Pricing & Tax</h3>
          <div class="row g-3">
            <div class="col-md-4">
                <label class="form-label">Purchase Rate</label>
                {!! Form::number('purchase_rate', null, ['class' => 'form-control floatnumber', 'step' => '0.01']) !!}
                <div class="text-danger">{{ $errors->first('purchase_rate') }}</div>
            </div>
            <div class="col-md-4" id="fld-mrp">
                <label class="form-label">MRP / Sale Price</label>
                {!! Form::number('mrp', null, ['class' => 'form-control floatnumber', 'step' => '0.01']) !!}
                <div class="text-danger">{{ $errors->first('mrp') }}</div>
            </div>
            <div class="col-md-4" id="fld-gst">
                <label class="form-label">GST Applicable <span class="required-star">*</span></label>
                {!! Form::select('gst_applicable', ['yes' => 'Applicable', 'no' => 'Not-Applicable'], null, [
                    'class' => 'form-select', 'id' => 'gst_applicable', 'required'
                ]) !!}
                <div class="text-danger">{{ $errors->first('gst_applicable') }}</div>
            </div>
            <div class="col-md-4 ApplicableYes">
                <label class="form-label">Tax Slab <span class="required-star">*</span></label>
                {!! Form::select('tax_group_id', ['' => '--Select--'] + $taxGroup, null, [
                    'class' => 'form-select select2', 'id' => 'tax_group_id'
                ]) !!}
                <div class="text-danger">{{ $errors->first('tax_group_id') }}</div>
            </div>
            <div class="col-md-4 ApplicableYes">
                <label class="form-label">HSN Code</label>
                {!! Form::text('hsn_code', null, ['class' => 'form-control', 'id' => 'hsn_code', 'oninput' => "this.value = this.value.replace(/[^0-9]/g, '')"]) !!}
                <div class="text-danger">{{ $errors->first('hsn_code') }}</div>
            </div>
          </div>
        </div>

        <!-- Opening Stock -->
        <div class="form-section px-0" id="section-opening-stock">
          <h3>Opening Stock</h3>
          <div class="row g-3">
            <div class="col-md-4" id="fld-opening-stock-qty">
                <label class="form-label">Opening Stock (Qty) <span class="required-star">*</span></label>
                {!! Form::number('opening_stock', null, ['class' => 'form-control number', 'id' => 'opening_stock']) !!}
                <div class="text-danger">{{ $errors->first('opening_stock') }}</div>
            </div>
            <div class="col-md-4" id="fld-rate-per">
                <label class="form-label">Rate Per Unit <span class="required-star">*</span></label>
                {!! Form::number('rate_per', null, ['class' => 'form-control floatnumber', 'id' => 'rate_per']) !!}
                <div class="text-danger">{{ $errors->first('rate_per') }}</div>
            </div>
            <div class="col-md-4" id="fld-stock-alert">
                <label class="form-label">Minimum Stock Alert</label>
                {!! Form::number('stock_alert', null, ['class' => 'form-control number']) !!}
                <div class="text-danger">{{ $errors->first('stock_alert') }}</div>
            </div>
          </div>
        </div>

        <!-- Additional Details -->
        <div class="form-section px-0 border-bottom-0 pb-0">
          <h3>Additional / Tracking Details</h3>
          <div class="row g-3">
            <div class="col-md-4">
                <label class="form-label">Manufacturer</label>
                {!! Form::select('manufacturer_id', ['' => '--Select--'] + $manufacturers, null, [
                    'class' => 'form-select select2', 'id' => 'manufacturer_id'
                ]) !!}
                <div class="text-danger">{{ $errors->first('manufacturer_id') }}</div>
            </div>
            <div class="col-md-4" id="fld-part-number" style="display:none;">
                <label class="form-label">Part Number <span class="required-star">*</span></label>
                {!! Form::text('part_number', null, ['class' => 'form-control']) !!}
                <div class="text-danger">{{ $errors->first('part_number') }}</div>
            </div>
            <div class="col-md-4" id="fld-item-code" style="display:none;">
                <label class="form-label">Item Code / SKU <span class="required-star">*</span></label>
                {!! Form::text('item_code', null, ['class' => 'form-control']) !!}
                <div class="text-danger">{{ $errors->first('item_code') }}</div>
            </div>
            <div class="col-md-4" id="fld-model-no" style="display:none;">
                <label class="form-label">Model No. <span class="required-star">*</span></label>
                {!! Form::text('model_no', null, ['class' => 'form-control']) !!}
                <div class="text-danger">{{ $errors->first('model_no') }}</div>
            </div>
            <div class="col-md-4" id="fld-size" style="display:none;">
                <label class="form-label">Size <span class="required-star">*</span></label>
                {!! Form::text('size', null, ['class' => 'form-control']) !!}
                <div class="text-danger">{{ $errors->first('size') }}</div>
            </div>
            <div class="col-md-4" id="fld-batch-number" style="display:none;">
                <label class="form-label">Batch Number <span class="required-star">*</span></label>
                {!! Form::text('batch_number', null, ['class' => 'form-control']) !!}
                <div class="text-danger">{{ $errors->first('batch_number') }}</div>
            </div>
            <div class="col-md-4" id="fld-mfg-date" style="display:none;">
                <label class="form-label">Manufacturing Date <span class="required-star">*</span></label>
                <div class="input-group">
                    <span class="input-group-text"><i class="ri-calendar-todo-line"></i></span>
                    <input type="text" class="form-control datepicker" name="manufacturing_date" id="manufacturing_date" value="{{ old('manufacturing_date', !empty($productData->manufacturing_date) ? date('d-m-Y', strtotime($productData->manufacturing_date)) : '') }}" placeholder="DD-MM-YYYY">
                </div>
                <div class="text-danger">{{ $errors->first('manufacturing_date') }}</div>
            </div>
            <div class="col-md-4" id="fld-expiry-date" style="display:none;">
                <label class="form-label">Expiry Date <span class="required-star">*</span></label>
                <div class="input-group">
                    <span class="input-group-text"><i class="ri-calendar-todo-line"></i></span>
                    <input type="text" class="form-control datepicker" name="expiry_date" id="expiry_date" value="{{ old('expiry_date', !empty($productData->expiry_date) ? date('d-m-Y', strtotime($productData->expiry_date)) : '') }}" placeholder="DD-MM-YYYY">
                </div>
                <div class="text-danger">{{ $errors->first('expiry_date') }}</div>
            </div>
            <div class="col-md-4">
                <label class="form-label">Status <span class="required-star">*</span></label>
                {!! Form::select('status', ['Active' => 'Active', 'Inactive' => 'Inactive'], null, ['class' => 'form-select', 'required']) !!}
                <div class="text-danger">{{ $errors->first('status') }}</div>
            </div>
            <div class="col-md-12" id="fld-description">
                <label class="form-label">Description / Remarks</label>
                {!! Form::textarea('remark', null, ['class' => 'form-control', 'rows' => 2]) !!}
            </div>
          </div>
        </div>

        <div class="d-flex gap-2 mt-4 pt-3 border-top">
            <button class="btn btn-primary" id="BtnSubmit" type="submit">
                <i class="ri-save-line me-1"></i> Update Item
            </button>
            <a href="{{ route('product.index') }}" class="btn btn-outline-secondary">Cancel</a>
        </div>
        
        {!! Form::close() !!}
      </div>
    </div>

  </div>
</div>

@include('common.modal.category')
@include('common.modal.unit')
@include('common.modal.brand')

@endsection

@push('footer_script')
<script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
<script>
    var CSRF = document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').getAttribute('content') : '{{ csrf_token() }}';

    // ─── Apply Item Settings Visibility ───────────────────────────────────────
    var itemSettings = {
        itemCategory:      {{ $settings->item_category_enabled ? 'true' : 'false' }},
        mrp:               {{ $settings->mrp_enabled ? 'true' : 'false' }},
        gst:               {{ $settings->gst_enabled ? 'true' : 'false' }},
        stockMaintenance:  {{ $settings->stock_maintenance_enabled ? 'true' : 'false' }},
        brand:             {{ $settings->brand_enabled ? 'true' : 'false' }},
        partNumber:        {{ $settings->part_number_enabled ? 'true' : 'false' }},
        itemCodeSku:       {{ $settings->item_code_sku_enabled ? 'true' : 'false' }},
        modelNo:           {{ $settings->model_no_enabled ? 'true' : 'false' }},
        size:              {{ $settings->size_enabled ? 'true' : 'false' }},
        batchTracking:     {{ $settings->batch_tracking_enabled ? 'true' : 'false' }},
        mfgDate:           {{ $settings->manufacturing_date_enabled ? 'true' : 'false' }},
        expiryDate:        {{ $settings->expiry_date_enabled ? 'true' : 'false' }},
        description:       {{ $settings->description_enabled ? 'true' : 'false' }},
    };

    var settingIdMap = {
        itemCategory:     's-itemCategory',
        mrp:              's-mrp',
        gst:              's-gst',
        stockMaintenance: 's-stockMaintenance',
        brand:            's-brand',
        partNumber:       's-partNumber',
        itemCodeSku:      's-itemCodeSku',
        modelNo:          's-modelNo',
        size:             's-size',
        batchTracking:    's-batchTracking',
        mfgDate:          's-mfgDate',
        expiryDate:       's-expiryDate',
        description:      's-description',
    };

    // 1. Sync toggles state to initial data
    Object.keys(settingIdMap).forEach(function(key) {
        var el = document.getElementById(settingIdMap[key]);
        if (el) el.checked = !!itemSettings[key];
    });

    // 2. Apply visibility to form fields based on data
    function applyVisibility() {
        function show(id, visible, isRequired) {
            var el = document.getElementById(id);
            if (!el) return;
            el.style.display = visible ? '' : 'none';
            
            var label = el.querySelector('label.form-label');
            var input = el.querySelector('input, select, textarea');
            if (label && input) {
                if (isRequired && visible) {
                    input.setAttribute('required', 'required');
                    if (!label.querySelector('.required-star')) {
                        label.innerHTML += ' <span class="required-star">*</span>';
                    }
                } else {
                    input.removeAttribute('required');
                    var star = label.querySelector('.required-star');
                    if (star) star.remove();
                }
            }
        }
        
        show('fld-item-category',   itemSettings.itemCategory, true);
        show('fld-mrp',             itemSettings.mrp, false);
        
        show('fld-gst',             itemSettings.gst, true);
        if (!itemSettings.gst) {
            $('.ApplicableYes').hide();
            $('#gst_applicable').removeAttr('required').val('no');
            $('#tax_group_id').removeAttr('required');
        } else {
            if($('#gst_applicable').val() == 'yes') $('.ApplicableYes').show();
        }
        
        show('section-opening-stock', itemSettings.stockMaintenance, false);
        show('fld-opening-stock-qty', itemSettings.stockMaintenance, true);
        show('fld-rate-per',          itemSettings.stockMaintenance, true);
        show('fld-stock-alert',       itemSettings.stockMaintenance, false);
        
        show('fld-brand',           itemSettings.brand, true);
        show('fld-part-number',     itemSettings.partNumber, true);
        show('fld-item-code',       itemSettings.itemCodeSku, true);
        show('fld-model-no',        itemSettings.modelNo, true);
        show('fld-size',            itemSettings.size, true);
        show('fld-batch-number',    itemSettings.batchTracking, true);
        show('fld-mfg-date',        itemSettings.mfgDate, true);
        show('fld-expiry-date',     itemSettings.expiryDate, true);
        show('fld-description',     itemSettings.description, false);
    }

    applyVisibility();

    // 3. Listen for toggle changes
    document.querySelectorAll('.control-plane input[type="checkbox"]').forEach(function(el) {
        el.addEventListener('change', function() {
            // Update local state
            Object.keys(settingIdMap).forEach(function(key) {
                var chk = document.getElementById(settingIdMap[key]);
                if (chk) itemSettings[key] = chk.checked;
            });
            applyVisibility();
            
            // Persist to server
            fetch('{{ route("item-settings.update") }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
                body: JSON.stringify({
                    item_category_enabled:    itemSettings.itemCategory,
                    mrp_enabled:              itemSettings.mrp,
                    gst_enabled:              itemSettings.gst,
                    stock_maintenance_enabled:itemSettings.stockMaintenance,
                    brand_enabled:            itemSettings.brand,
                    part_number_enabled:      itemSettings.partNumber,
                    item_code_sku_enabled:    itemSettings.itemCodeSku,
                    model_no_enabled:         itemSettings.modelNo,
                    size_enabled:             itemSettings.size,
                    batch_tracking_enabled:   itemSettings.batchTracking,
                    manufacturing_date_enabled:itemSettings.mfgDate,
                    expiry_date_enabled:      itemSettings.expiryDate,
                    description_enabled:      itemSettings.description,
                })
            });
        });
    });

    // ─── Toggle Sidebar ──────────────────────────────────────────────────────
    var isPanelVisible = true;
    document.getElementById('btn-toggle-panel').addEventListener('click', function() {
      var layout = document.getElementById('item-form-layout');
      isPanelVisible = !isPanelVisible;
      
      if (isPanelVisible) {
        layout.classList.remove('panel-hidden');
        this.textContent = 'Hide settings panel';
      } else {
        layout.classList.add('panel-hidden');
        this.textContent = 'Show settings panel';
      }
    });

    // ─── Validation and Behaviours ──────────────────────────────────────────
    $('.number').on('input', function() {
        this.value = this.value.replace(/\D/g, '');
    });

    $('.floatnumber').on('input', function() {
        this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
    });

    $('#gst_applicable').on('change', function() {
        if ($(this).val() == 'yes') {
            $('.ApplicableYes').show();
            $('#tax_group_id').attr('required', true);
        } else {
            $('.ApplicableYes').hide();
            $('#tax_group_id').attr('required', false).val(null).trigger('change');
        }
    });

    if (typeof $.fn.daterangepicker !== 'undefined') {
        $('.datepicker').daterangepicker({
            singleDatePicker: true,
            autoUpdateInput: false,
            locale: { format: 'DD-MM-YYYY' }
        }).on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD-MM-YYYY'));
        });
    }
</script>
@endpush