@extends('layouts.location')

@section('title', 'SO Conversion')
@section('page-title', 'SO Conversion')

@push('scripts')
<script>
  (function(){
    function toJSON(form){
      const fd = new FormData(form);
      const obj = {};
      for (const [k,v] of fd.entries()) obj[k] = v;
      return obj;
    }

    async function postJSON(url, payload){
      const res = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify(payload)
      });
      let data = null; try { data = await res.json(); } catch(e) {}
      return { ok: res.ok, status: res.status, data };
    }

    document.querySelectorAll('.add-charges-form').forEach(form => {
      form.addEventListener('submit', async (e) => {
        e.preventDefault();
        const payload = toJSON(form);

        if (!payload.so_no) { alert('SO No missing.'); return; }
        if (!payload.extra_charge_type) { alert('Please select a charge type.'); return; }

        const btn = form.querySelector('button[type="submit"]');
        const original = btn.innerHTML;
        btn.disabled = true; btn.innerHTML = 'Submitting...';

        try {
          const resp = await postJSON('{{ route('location.conversion.store') }}', payload);
          if (resp.ok && resp.data && resp.data.success) {
            const modalId = form.getAttribute('data-modal-id');
            const modalEl = modalId ? document.getElementById(modalId) : null;
            if (modalEl && window.bootstrap) {
              const instance = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
              instance.hide();
            }
            alert('Sent SO for the conversion to admin team.');
            const so = payload.so_no || '';
            const targetUrl = so
              ? `${window.location.origin}/location-user/converted-so?so_no=${encodeURIComponent(so)}`
              : `${window.location.origin}/location-user/converted-so`;
            window.location.assign(targetUrl);
          } else {
            const msg = (resp.data && resp.data.message) ? resp.data.message : 'Please try again.';
            alert('Failed to save charges. ' + msg);
          }
        } catch (err) {
          alert('Network error while saving charges.');
        } finally {
          btn.disabled = false; btn.innerHTML = original;
        }
      });
    });

    const params = new URLSearchParams(window.location.search || '');
    const soFromQuery = params.get('so_no');
    if (soFromQuery) {
      const rows = document.querySelectorAll('table.table tbody tr');
      let firstMatch = null;
      rows.forEach(row => {
        const cells = row.children;
        if (!cells || cells.length < 2) return;
        const text = (cells[1].textContent || '').trim();
        if (text === soFromQuery || text.indexOf(soFromQuery) !== -1) {
          row.classList.add('table-success');
          if (!firstMatch) firstMatch = row;
        }
      });
      if (firstMatch && typeof firstMatch.scrollIntoView === 'function') {
        firstMatch.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
    }
  })();
</script>
@endpush

@section('content')
<div class="card border-0 shadow-sm">
    <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
        <h5 class="mb-0">SO Conversion Queue</h5>
        <div class="text-muted small">Showing latest 100 records</div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th scope="col">Sr. No</th>
                        <th scope="col">SO No</th>
                        <th scope="col">Location</th>
                        <th scope="col">SO Sent for Conversion Time</th>
                        <th scope="col">Status</th>
                        <th scope="col">Preview</th>
                        {{-- <th scope="col">Action</th> --}}
                    </tr>
                </thead>
                <tbody>
                    @forelse ($records as $rec)
                        @php
                            $loopId = $loop->iteration;
                            $j = [];
                            try {
                                $decoded = json_decode($rec->data ?? '{}', true);
                                if (json_last_error() === JSON_ERROR_NONE && is_array($decoded)) {
                                    $j = $decoded;
                                }
                            } catch (Throwable $e) {}
                            $hasExtra = !empty($rec->extra_charge_type) || !empty($rec->extra_charge_remark) || !empty(($j['extra_charges']['type'] ?? null)) || !empty(($j['extra_charges']['remark'] ?? null));
                            $hasPreview = !empty($j) || $hasExtra;
                        @endphp
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td class="fw-semibold">{{ $rec->so_no ?? '-' }}</td>
                            <td>{{ $rec->location_id ?? '-' }}</td>
                            <td>{{ $rec->updated_at ?? '-' }}</td>
                            <td>
                                @php $status = $rec->status ?? null; @endphp
                                @if ($status === 'pending')
                                    <span class="badge bg-warning text-dark">pending</span>
                                @elseif ($status === 'update')
                                    <span class="badge bg-info text-dark">update</span>
                                @elseif ($status === 'complete')
                                    <span class="badge bg-success">complete</span>
                                @else
                                    <span class="badge bg-secondary">n/a</span>
                                @endif
                            </td>
                            <td>
                                @if ($hasPreview)
                                    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#rvw-{{ $loopId }}">Preview</button>
                                    <!-- Modal -->
                                    <div class="modal fade" id="rvw-{{ $loopId }}" tabindex="-1" aria-labelledby="rvwLbl-{{ $loopId }}" aria-hidden="true">
                                      <div class="modal-dialog modal-dialog-centered modal-lg">
                                        <div class="modal-content">
                                          <div class="modal-header">
                                            <h5 class="modal-title" id="rvwLbl-{{ $loopId }}">Conversion Data Preview</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                          </div>
                                          <div class="modal-body">
                                            @php
                                                $service_name = $j['service_name'] ?? ($j['payload']['service_name'] ?? null);
                                                $total_charges = $j['total_charges'] ?? ($j['amount'] ?? ($j['rate'] ?? null));
                                                $charged_wt = $j['charged_wt'] ?? ($j['charged_weight'] ?? null);
                                                $risk_type = $j['risk_type'] ?? null;
                                                $risk_type_charge = $j['risk_type_charge'] ?? null;
                                                $tat = $j['tat'] ?? null;
                                                $source_pincode = $j['source_pincode'] ?? null;
                                                $destination_pincode = $j['destination_pincode'] ?? null;
                                                $invoice_amount = $j['invoice_amount'] ?? null;
                                                $so_no = $j['so_no'] ?? ($rec->so_no ?? null);
                                                $so_no_trimmed = is_string($so_no) ? trim($so_no) : $so_no;
                                                $soRemark = isset($so_no_trimmed) && isset($remarksBySo[$so_no_trimmed]) ? $remarksBySo[$so_no_trimmed] : null;
                                                $soDeliveryMethod = isset($so_no_trimmed) && isset($deliveryMethodsBySo[$so_no_trimmed]) ? $deliveryMethodsBySo[$so_no_trimmed] : null;
                                                $extra_type = $j['extra_charges']['type'] ?? ($rec->extra_charge_type ?? null);
                                                $extra_remark = $j['extra_charges']['remark'] ?? ($rec->extra_charge_remark ?? null);
                                            @endphp
                                            @if (!empty($j))
                                            <div class="table-responsive mb-3">
                                              <table class="table table-sm table-bordered">
                                                <thead>
                                                  <tr><th colspan="2">Conversion Details</th></tr>
                                                </thead>
                                                <tbody>
                                                  <tr><th style="width:240px">Service Name</th><td>{{ $service_name ?? '-' }}</td></tr>
                                                  <tr><th>Total Charges</th><td>{{ $total_charges !== null ? $total_charges : '-' }}</td></tr>
                                                  <tr><th>Charged Weight</th><td>{{ $charged_wt !== null ? $charged_wt : '-' }}</td></tr>
                                                  <tr><th>Risk Type</th><td>{{ $risk_type ?? '-' }}</td></tr>
                                                  <tr><th>Risk Type Charge</th><td>{{ $risk_type_charge !== null ? $risk_type_charge : '-' }}</td></tr>
                                                  <tr><th>TAT</th><td>{{ $tat !== null ? $tat : '-' }}</td></tr>
                                                  <tr><th>Source Pincode</th><td>{{ $source_pincode ?? '-' }}</td></tr>
                                                  <tr><th>Destination Pincode</th><td>{{ $destination_pincode ?? '-' }}</td></tr>
                                                  <tr><th>Invoice Amount</th><td>{{ $invoice_amount !== null ? $invoice_amount : '-' }}</td></tr>
                                                  <tr><th>SO No</th><td>{{ $so_no ?? '-' }}</td></tr>
                                                  <tr><th>Remark</th><td>{{ $soRemark ?? '-' }}</td></tr>
                                                  <tr><th>Delivery Method</th><td>{{ $soDeliveryMethod ?? '-' }}</td></tr>
                                                </tbody>
                                              </table>
                                            </div>
                                            @endif
                                            @if ($extra_type || $extra_remark)
                                            <div class="table-responsive">
                                              <table class="table table-sm table-bordered">
                                                <thead>
                                                  <tr><th colspan="2">Extra Charges</th></tr>
                                                </thead>
                                                <tbody>
                                                  <tr><th style="width:240px">Type</th><td>{{ $extra_type ?? '-' }}</td></tr>
                                                  <tr><th>Remark</th><td>{{ $extra_remark ?? '-' }}</td></tr>
                                                </tbody>
                                              </table>
                                            </div>
                                            @endif
                                          </div>
                                          <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                @else
                                    <span class="badge bg-secondary">n/a</span>
                                @endif
                            </td>
                            {{-- <td>
                                @php $so = $rec->so_no ?? null; @endphp
                                @if ($so)
                                    <button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#ac-{{ $loopId }}">
                                        Add Charges
                                    </button>
                                    <!-- Add Charges Modal -->
                                    <div class="modal fade" id="ac-{{ $loopId }}" tabindex="-1" aria-labelledby="acLbl-{{ $loopId }}" aria-hidden="true">
                                      <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                          <div class="modal-header">
                                            <h5 class="modal-title" id="acLbl-{{ $loopId }}">Add Charges for SO {{ $so }}</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                          </div>
                                          <div class="modal-body">
                                            <form class="add-charges-form" data-modal-id="ac-{{ $loopId }}">
                                              <input type="hidden" name="so_no" value="{{ $so }}">
                                              <input type="hidden" name="location_id" value="{{ $rec->location_id }}">
                                              <div class="mb-3">
                                                <label class="form-label">Charge Type</label>
                                                <select name="extra_charge_type" class="form-select" required>
                                                  <option value="">Select a charge</option>
                                                  <option value="handling">Handling Charge</option>
                                                  <option value="insurance">Insurance</option>
                                                  <option value="surcharge">Other Surcharge</option>
                                                </select>
                                              </div>
                                              <div class="mb-3">
                                                <label class="form-label">Remark</label>
                                                <textarea name="extra_charge_remark" class="form-control" rows="3" placeholder="Enter any remarks..."></textarea>
                                              </div>
                                              <div class="d-flex justify-content-end gap-2">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                <button type="submit" class="btn btn-primary">Submit</button>
                                              </div>
                                            </form>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                @else
                                    <button class="btn btn-sm btn-secondary" disabled>Convert Invoice</button>
                                @endif
                            </td> --}}
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted">No records found</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection