@extends('layouts.location')

@section('title', 'Dispatch Dashboard')
@section('page-title', 'Dispatch Dashboard')
@push('styles')
<style>
  .no-select, .no-select * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .no-select a:focus { outline: none !important; box-shadow: none !important; }
  .chart-wrap { min-height: 260px; position: relative; }

  /* Short Picklist styling */
  #shortPicklistTable thead th {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  #shortPicklistTable tbody tr.short-pic-summary {
    background-color: #f8f9fa;
    font-weight: 500;
  }
  #shortPicklistTable tbody tr.short-pic-summary td {
    border-top-width: 0;
    border-bottom: 1px solid #dee2e6;
  }
  #shortPicklistTable tbody tr.short-pic-row td {
    border-top-width: 0;
    font-size: 0.85rem;
  }
  .toggle-short-rows {
    color: #0d6efd;
  }
  .toggle-short-rows:hover {
    text-decoration: none;
  }
</style>
@endpush

@section('content')
@php
  $activeTab = request()->query('tab', 'lr');
@endphp
<div class="no-select">
  <div class="row">
    <div class="col-lg-12 mb-4">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
          <div>
            <h5 class="mb-0">Monthly Packing Activity</h5>
            <small class="text-muted">Month: {{ $selectedMonth ?? date('Y-m') }}</small>
          </div>
          <form method="GET" action="{{ route('location.dashboard.dispatch') }}" class="d-flex align-items-center gap-2">
            <label for="monthSelect" class="me-2 mb-0 small text-muted">Select Month</label>
            <select id="monthSelect" name="month" class="form-select form-select-sm" onchange="this.form.submit()">
              @foreach(($months ?? []) as $m)
                <option value="{{ $m }}" {{ ($selectedMonth ?? '') === $m ? 'selected' : '' }}>{{ $m }}</option>
              @endforeach
            </select>
            <noscript>
              <button type="submit" class="btn btn-sm btn-primary">Go</button>
            </noscript>
          </form>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-12">
              <div class="chart-wrap">
                <canvas id="packChart"></canvas>
              </div>
            </div>
          </div>
          <div class="row mt-3">
            <div class="col-md-12">
              <div class="small text-muted">
                Data from `so_packing` for this location: Packings (records), Boxes (sum of box array length), Items Qty (sum of item qty) per day.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12 mb-4">
      <div class="card border-0 shadow-sm">
        <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
          <div>
            <h5 class="mb-0">Monthly Order Pipeline</h5>
            <small class="text-muted">Month: {{ $selectedMonth ?? date('Y-m') }}</small>
          </div>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-12">
              <div class="chart-wrap">
                <canvas id="pipeChart"></canvas>
              </div>
            </div>
          </div>
          <div class="row mt-3">
            <div class="col-md-12">
              <div class="small text-muted">
                SO counts by event day from `order_pipeline` for this location: Picking Started/Completed, Packing Started/Completed, Booking Completed, Dispatched, Delivered.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12 mb-4">
      <div class="card border-0 shadow-sm">
        @php
          $activeTab = request()->query('tab', 'lr');
        @endphp
        <div class="card-header bg-transparent">
          <ul class="nav nav-tabs card-header-tabs" id="dispatchTabs" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link {{ $activeTab === 'lr' ? 'active' : '' }}" id="lr-tab" data-bs-toggle="tab" data-bs-target="#lr-tab-pane" type="button" role="tab">LR Upload</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link {{ $activeTab === 'shortpick' ? 'active' : '' }}" id="shortpick-tab" data-bs-toggle="tab" data-bs-target="#shortpick-tab-pane" type="button" role="tab">Short Picklist</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link {{ $activeTab === 'ready' ? 'active' : '' }}" id="ready-tab" data-bs-toggle="tab" data-bs-target="#ready-tab-pane" type="button" role="tab">Ready for Dispatch</button>
            </li>
          </ul>
        </div>
        <div class="card-body">
          <div class="tab-content" id="dispatchTabsContent">
            <div class="tab-pane fade {{ $activeTab === 'lr' ? 'show active' : '' }}" id="lr-tab-pane" role="tabpanel" aria-labelledby="lr-tab">
              <div class="mb-3">
                <h5 class="mb-1">LR Upload (Dispatch)</h5>
                <small class="text-muted">Link LR and AWB with PIC ID and notify customer via WhatsApp.</small>
              </div>
              <form id="lrUploadForm" class="row g-3">
                <div class="col-md-3">
                  <label for="lr_no" class="form-label">LR No</label>
                  <input type="text" class="form-control" id="lr_no" name="lr_no" required>
                </div>
                <div class="col-md-3 d-none">
                  <label for="awb_no" class="form-label">AWB No</label>
                  <input type="text" class="form-control" id="awb_no" name="awb_no">
                </div>
                <div class="col-md-3">
                  <label for="pic_id_search" class="form-label">PIC ID</label>
                  <div class="position-relative">
                    <input type="text" class="form-control" id="pic_id_search" placeholder="Search / select PIC ID..." autocomplete="off">
                    <input type="hidden" id="pic_id" name="pic_id" required>
                    <div id="pic_id_dropdown" class="border rounded bg-white position-absolute w-100 mt-1 shadow-sm d-none" style="max-height: 200px; overflow-y: auto; z-index: 1050;">
                      @forelse(($lrPicIds ?? []) as $pid)
                        @php
                          $picVal = is_array($pid) ? ($pid['pic_id'] ?? '') : $pid;
                          $picLabel = is_array($pid) ? ($pid['label'] ?? $picVal) : $pid;
                        @endphp
                        <div class="dropdown-item py-1 px-2" data-value="{{ $picVal }}">{{ $picLabel }}</div>
                      @empty
                        <div class="dropdown-item py-1 px-2 text-muted">No PIC IDs available</div>
                      @endforelse
                    </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <label for="logistics_name" class="form-label">Transporter Name</label>
                  <input type="text" class="form-control" id="logistics_name" name="logistics_name" placeholder="e.g. Delhivery" required>
                </div>
                <div class="col-md-4">
                  <label for="lr_image" class="form-label">LR Document</label>
                  <input type="file" class="form-control" id="lr_image" accept="image/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" required>
                  <div class="form-text">Image / PDF / DOC.</div>
                </div>
                <div class="col-md-12 d-flex align-items-end mt-2">
                  <button type="submit" id="lrUploadSubmit" class="btn btn-primary me-3">
                    <span class="submit-text">Upload LR &amp; Notify</span>
                    <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                  </button>
                  <div id="lrUploadResult" class="flex-grow-1"></div>
                </div>
              </form>
            </div>

            <div class="tab-pane fade {{ $activeTab === 'shortpick' ? 'show active' : '' }}" id="shortpick-tab-pane" role="tabpanel" aria-labelledby="shortpick-tab">
              <div class="d-flex justify-content-between align-items-center mb-2">
                <div>
                  <h5 class="mb-1">Short Picklist (Hold Items)</h5>
                  <small class="text-muted">Items from so_picklist with status = 'hold', grouped by PIC ID.</small>
                </div>
              </div>

              @php
                $shortGroups = collect($shortPicklist ?? [])->groupBy('pic_id');
              @endphp

              @if($shortGroups->isEmpty())
                <div class="alert alert-info mb-0">No short picklist items in hold status.</div>
              @else
                <div class="table-responsive">
                  <table class="table table-sm align-middle mb-0" id="shortPicklistTable">
                    <thead class="table-light">
                      <tr>
                        <th style="width:40px;"></th>
                        <th>PIC ID</th>
                        <th>Sales Orders</th>
                        <th>Items (Count)</th>
                        <th class="text-end" style="width:160px;">Bulk Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      @foreach($shortGroups as $picId => $rows)
                        @php
                          $soList = $rows->pluck('sales_order_number')->unique()->implode(', ');
                          $itemCount = $rows->count();
                        @endphp
                        <tr class="short-pic-summary" data-pic-id="{{ $picId }}">
                          <td>
                            <button type="button" class="btn btn-link btn-sm p-0 toggle-short-rows" data-pic-id="{{ $picId }}" aria-label="Toggle rows">
                              ▶
                            </button>
                          </td>
                          <td>{{ $picId }}</td>
                          <td>{{ $soList }}</td>
                          <td>{{ $itemCount }}</td>
                          <td class="text-end">
                            <button type="button" class="btn btn-success btn-sm short-action-accept-all" data-pic-id="{{ $picId }}">Accept All</button>
                            <button type="button" class="btn btn-danger btn-sm short-action-reject-all ms-1" data-pic-id="{{ $picId }}">Reject All</button>
                          </td>
                        </tr>
                        @foreach($rows as $r)
                          <tr class="short-pic-row d-none" data-parent-pic-id="{{ $picId }}" data-row-id="{{ $r->id }}" data-pick-qty="{{ $r->pick_qty ?? 0 }}">
                            <td></td>
                            <td colspan="4">
                              <div class="d-flex flex-wrap align-items-center justify-content-between">
                                <div class="small">
                                  <div><strong>SO:</strong> {{ $r->sales_order_number }}</div>
                                  <div><strong>SKU:</strong> {{ $r->sku }} | <strong>Rack:</strong> {{ $r->rack }}</div>
                                  <div><strong>Picked:</strong> {{ $r->picked_qty }} | <strong>Pick Qty:</strong> {{ $r->pick_qty ?? 0 }}</div>
                                  <div><strong>Status:</strong> {{ $r->status }}</div>
                                </div>
                                <div class="d-flex gap-2 mt-1 mt-md-0">
                                  <button type="button" class="btn btn-success btn-sm short-action-accept"
                                          data-id="{{ $r->id }}"
                                          data-pick-qty="{{ $r->pick_qty ?? 0 }}">
                                    Accept
                                  </button>
                                  <button type="button" class="btn btn-danger btn-sm short-action-reject"
                                          data-id="{{ $r->id }}"
                                          data-pick-qty="{{ $r->pick_qty ?? 0 }}">
                                    Reject
                                  </button>
                                </div>
                              </div>
                            </td>
                          </tr>
                        @endforeach
                      @endforeach
                    </tbody>
                  </table>
                </div>
              @endif
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  try {
    const ctx = document.getElementById('packChart');
    if (ctx && window.Chart) {
      const labels = @json($packChart['labels'] ?? []);
      const packingCounts = @json($packChart['packing_counts'] ?? []);
      const boxesCounts = @json($packChart['boxes_counts'] ?? []);
      const itemsQtySums = @json($packChart['items_qty_sums'] ?? []);

      if ((labels || []).length) {
        new Chart(ctx, {
          type: 'bar',
          data: {
            labels: labels,
            datasets: [
              { label: 'Packings', data: packingCounts, backgroundColor: 'rgba(13,110,253,0.7)' },
              { label: 'Boxes', data: boxesCounts, backgroundColor: 'rgba(25,135,84,0.7)' },
              { label: 'Items Qty', data: itemsQtySums, backgroundColor: 'rgba(255,193,7,0.7)' }
            ]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: { x: { stacked: false }, y: { beginAtZero: true } },
            plugins: { legend: { position: 'bottom' }, tooltip: { mode: 'index', intersect: false } }
          }
        });
      } else if (ctx && ctx.getContext) {
        const g = ctx.getContext('2d');
        g.font = '14px sans-serif';
        g.fillStyle = '#6c757d';
        g.fillText('No packing records found for selected month.', 10, 20);
      }
    }
  } catch (e) {}

  // Pipeline chart
  try {
    const pctx = document.getElementById('pipeChart');
    if (pctx && window.Chart) {
      const labels = @json($pipeChart['labels'] ?? []);
      const ds = [
        { key: 'picking_started',  label: 'Picking Started',   color: 'rgba(102,16,242,0.7)' },
        { key: 'picking_completed',label: 'Picking Completed', color: 'rgba(111,66,193,0.7)' },
        { key: 'packing_started',  label: 'Packing Started',   color: 'rgba(23,162,184,0.7)' },
        { key: 'packing_completed',label: 'Packing Completed', color: 'rgba(40,167,69,0.7)' },
        { key: 'booking_completed',label: 'Booking Completed', color: 'rgba(255,193,7,0.7)' },
        { key: 'dispatched',       label: 'Dispatched',        color: 'rgba(220,53,69,0.7)' },
        { key: 'delivered',        label: 'Delivered',         color: 'rgba(13,110,253,0.7)' },
      ];
      const datasets = ds.map(d => ({ label: d.label, backgroundColor: d.color, data: (@json($pipeChart ?? []))[d.key] || [] }));

      if ((labels || []).length && datasets.some(x => (x.data||[]).some(v => v>0))) {
        new Chart(pctx, {
          type: 'bar',
          data: { labels, datasets },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: { x: { stacked: true }, y: { beginAtZero: true, stacked: true } },
            plugins: { legend: { position: 'bottom' }, tooltip: { mode: 'index', intersect: false } }
          }
        });
      } else if (pctx && pctx.getContext) {
        const g = pctx.getContext('2d');
        g.font = '14px sans-serif';
        g.fillStyle = '#6c757d';
        g.fillText('No pipeline activity for selected month.', 10, 20);
      }
    }
  } catch (e) {}

  // Short Picklist: expand/collapse rows and Accept/Reject actions (single + bulk)
  try {
    const shortToggleButtons = document.querySelectorAll('.toggle-short-rows');
    shortToggleButtons.forEach(function (btn) {
      btn.addEventListener('click', function () {
        const picId = btn.getAttribute('data-pic-id');
        const rows = document.querySelectorAll('.short-pic-row[data-parent-pic-id="' + picId + '"]');
        const isOpen = btn.classList.contains('open');
        rows.forEach(function (tr) {
          tr.classList.toggle('d-none', isOpen);
        });
        btn.classList.toggle('open', !isOpen);
        btn.textContent = isOpen ? '▶' : '▼';
      });
    });

    const shortUser = @json(session('email'));
    const shortLocationId = @json(session('location_id'));

    function sendShortUpdate(id, pickQty, status) {
      const formData = new FormData();
      formData.append('id', id);
      formData.append('status', status);
      formData.append('pick_qty', String(pickQty));
      formData.append('user', shortUser || 'dispatch');
      if (shortLocationId) {
        formData.append('location_id', String(shortLocationId));
      }

      return fetch('/directapi/update_picklist.php', {
        method: 'POST',
        body: formData
      })
        .then(function (res) { return res.json().catch(function () { return { success: false, message: 'Invalid JSON response' }; }); })
        .then(function (data) {
          if (!data || data.success !== true) {
            throw new Error(data && data.message ? data.message : 'Failed to update picklist status');
          }
          return data;
        });
    }

    function handleShortAction(button, action) {
      if (!button) return;
      const id = button.getAttribute('data-id');
      const pickQtyStr = button.getAttribute('data-pick-qty') || '0';
      const pickQty = parseFloat(pickQtyStr) || 0;

      let status = '';
      if (action === 'accept') {
        status = 'force_completed';
      } else if (action === 'reject') {
        status = (pickQty === 0 ? 'pending' : 'partial');
      }

      if (!id || !status) return;

      button.setAttribute('disabled', 'disabled');

      sendShortUpdate(id, pickQty, status)
        .then(function () {
          alert('Status updated successfully.');
          window.location.reload();
        })
        .catch(function (err) {
          alert('Error updating picklist: ' + (err && err.message ? err.message : 'Unexpected error'));
        })
        .finally(function () {
          button.removeAttribute('disabled');
        });
    }

    document.querySelectorAll('.short-action-accept').forEach(function (btn) {
      btn.addEventListener('click', function () { handleShortAction(btn, 'accept'); });
    });

    document.querySelectorAll('.short-action-reject').forEach(function (btn) {
      btn.addEventListener('click', function () { handleShortAction(btn, 'reject'); });
    });

    // Bulk actions per PIC ID
    document.querySelectorAll('.short-action-accept-all').forEach(function (btn) {
      btn.addEventListener('click', function () {
        const picId = btn.getAttribute('data-pic-id');
        if (!picId) return;
        const rows = document.querySelectorAll('.short-pic-row[data-parent-pic-id="' + picId + '"]');
        if (!rows.length) return;

        if (!confirm('Accept all short items for PIC ID ' + picId + '?')) return;

        const promises = [];
        rows.forEach(function (row) {
          const id = row.getAttribute('data-row-id');
          const pickQtyStr = row.getAttribute('data-pick-qty') || '0';
          const pickQty = parseFloat(pickQtyStr) || 0;
          if (id) {
            promises.push(sendShortUpdate(id, pickQty, 'force_completed'));
          }
        });

        Promise.allSettled(promises).then(function (results) {
          const failed = results.filter(function (r) { return r.status === 'rejected'; });
          if (failed.length) {
            alert('Some items failed to update. Please refresh and check.');
          }
          window.location.reload();
        });
      });
    });

    document.querySelectorAll('.short-action-reject-all').forEach(function (btn) {
      btn.addEventListener('click', function () {
        const picId = btn.getAttribute('data-pic-id');
        if (!picId) return;
        const rows = document.querySelectorAll('.short-pic-row[data-parent-pic-id="' + picId + '"]');
        if (!rows.length) return;

        if (!confirm('Reject all short items for PIC ID ' + picId + ' (send back to picking)?')) return;

        const promises = [];
        rows.forEach(function (row) {
          const id = row.getAttribute('data-row-id');
          const pickQtyStr = row.getAttribute('data-pick-qty') || '0';
          const pickQty = parseFloat(pickQtyStr) || 0;
          let status = (pickQty === 0 ? 'pending' : 'partial');
          if (id) {
            promises.push(sendShortUpdate(id, pickQty, status));
          }
        });

        Promise.allSettled(promises).then(function (results) {
          const failed = results.filter(function (r) { return r.status === 'rejected'; });
          if (failed.length) {
            alert('Some items failed to update. Please refresh and check.');
          }
          window.location.reload();
        });
      });
    });
  } catch (e) {}

  try {
    const lrForm = document.getElementById('lrUploadForm');
    const picSearchInput = document.getElementById('pic_id_search');
    const picHiddenInput = document.getElementById('pic_id');
    const picDropdown = document.getElementById('pic_id_dropdown');
    const lrSubmitBtn = document.getElementById('lrUploadSubmit');
    const lrResultBox = document.getElementById('lrUploadResult');
    const lrSpinner = lrSubmitBtn ? lrSubmitBtn.querySelector('.spinner-border') : null;
    const lrSubmitText = lrSubmitBtn ? lrSubmitBtn.querySelector('.submit-text') : null;

    function setLrLoading(loading) {
      if (!lrSubmitBtn) return;
      if (loading) {
        lrSubmitBtn.setAttribute('disabled', 'disabled');
        if (lrSpinner) lrSpinner.classList.remove('d-none');
        if (lrSubmitText) lrSubmitText.textContent = 'Uploading...';
      } else {
        lrSubmitBtn.removeAttribute('disabled');
        if (lrSpinner) lrSpinner.classList.add('d-none');
        if (lrSubmitText) lrSubmitText.textContent = 'Upload LR & Notify';
      }
    }

    // PIC ID searchable dropdown behavior
    if (picSearchInput && picHiddenInput && picDropdown) {
      function showPicDropdown() {
        picDropdown.classList.remove('d-none');
      }

      function hidePicDropdown() {
        picDropdown.classList.add('d-none');
      }

      function filterPicOptions(term) {
        const items = picDropdown.querySelectorAll('[data-value]');
        const t = (term || '').toLowerCase();
        items.forEach(function (el) {
          const txt = (el.textContent || '').toLowerCase();
          el.style.display = !t || txt.indexOf(t) !== -1 ? '' : 'none';
        });
      }

      picSearchInput.addEventListener('focus', function () {
        filterPicOptions(picSearchInput.value || '');
        showPicDropdown();
      });

      picSearchInput.addEventListener('input', function () {
        filterPicOptions(picSearchInput.value || '');
        showPicDropdown();
      });

      picDropdown.addEventListener('click', function (e) {
        const target = e.target.closest('[data-value]');
        if (!target) return;
        const val = target.getAttribute('data-value') || '';
        picHiddenInput.value = val;
        picSearchInput.value = val;
        hidePicDropdown();
      });

      document.addEventListener('click', function (e) {
        if (!picDropdown.contains(e.target) && e.target !== picSearchInput) {
          hidePicDropdown();
        }
      });
    }

    if (lrForm) {
      lrForm.addEventListener('submit', function (e) {
        e.preventDefault();
        if (lrResultBox) lrResultBox.innerHTML = '';

        const lrNo = (document.getElementById('lr_no')?.value || '').trim();
        const awbNo = (document.getElementById('awb_no')?.value || '').trim();
        const picId = (document.getElementById('pic_id')?.value || '').trim();
        const logisticsName = (document.getElementById('logistics_name')?.value || '').trim();
        const fileInput = document.getElementById('lr_image');
        const file = fileInput && fileInput.files && fileInput.files[0] ? fileInput.files[0] : null;

        if (!lrNo || !picId || !logisticsName) {
          if (lrResultBox) lrResultBox.innerHTML = '<div class="alert alert-warning mb-0">Please fill all required fields.</div>';
          return;
        }
        if (!file) {
          if (lrResultBox) lrResultBox.innerHTML = '<div class="alert alert-warning mb-0">Please select an LR image.</div>';
          return;
        }

        setLrLoading(true);

        const reader = new FileReader();
        reader.onload = function () {
          const result = reader.result || '';

          // Send full data URL so backend can detect MIME type (image/pdf/doc)
          const lrPayload = typeof result === 'string' ? result : '';

          const formData = new FormData();
          formData.append('lr_no', lrNo);
          formData.append('awb_no', awbNo);
          formData.append('pic_id', picId);
          formData.append('logistics_name', logisticsName);
          formData.append('lr_image', lrPayload);

          fetch('/directapi/upload_lr.php', {
            method: 'POST',
            body: formData
          })
            .then(function (res) { return res.json().catch(function () { return { status: 'error', message: 'Invalid JSON response' }; }); })
            .then(function (data) {
              if (!lrResultBox) return;
              if (data && data.status === 'success') {
                let details = '';
                if (data.whatsapp && Array.isArray(data.whatsapp)) {
                  var okCount = data.whatsapp.filter(function (x) { return x.status === 'sent'; }).length;
                  var total = data.whatsapp.length;
                  details = ' WhatsApp: ' + okCount + ' of ' + total + ' orders notified.';
                }
                lrResultBox.innerHTML = '<div class="alert alert-success mb-0">' + (data.message || 'LR uploaded successfully.') + details + '</div>';
                lrForm.reset();
              } else {
                lrResultBox.innerHTML = '<div class="alert alert-danger mb-0">' + (data && data.message ? data.message : 'Failed to upload LR.') + '</div>';
              }
            })
            .catch(function (err) {
              if (lrResultBox) lrResultBox.innerHTML = '<div class="alert alert-danger mb-0">Error: ' + (err && err.message ? err.message : 'Unexpected error') + '</div>';
            })
            .finally(function () {
              setLrLoading(false);
            });
        };

        reader.onerror = function () {
          setLrLoading(false);
          if (lrResultBox) lrResultBox.innerHTML = '<div class="alert alert-danger mb-0">Unable to read LR image file.</div>';
        };

        reader.readAsDataURL(file);
      });
    }
  } catch (e) {}
});
</script>
@endpush