@extends('layouts.app')

@section('content')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.1.7/dist/signature_pad.umd.min.js"></script>

<style>
  body {
    font-family: 'Poppins', sans-serif;
    background: #f5f6fa;
    color: #333;
    margin: 0;
    padding: 0;
  }

  .invoice-container {
    width: 100%;
    max-width: 1200px;
    background: #fff;
    margin: 20px auto;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    padding: 30px;
  }

  header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid #007bff;
    padding-bottom: 15px;
  }

  header h1 {
    font-size: 1.8rem;
    color: #007bff;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
  }

  thead {
    background: #007bff;
    color: #fff;
  }

  th, td {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
  }

  tfoot td {
    font-weight: bold;
  }

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .signature {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 40px;
  }

  .sign-box {
    width: 45%;
    text-align: center;
  }

  .sign-box p {
    margin-top: 60px;
    border-top: 1px solid #555;
    display: inline-block;
    padding-top: 5px;
  }

  @media (max-width: 768px) {
    .invoice-container {
      padding: 20px;
      border-radius: 0;
    }

    .signature {
      flex-direction: column;
      align-items: center;
    }

    .sign-box {
      width: 100%;
      margin-bottom: 40px;
    }

    th, td {
      font-size: 0.85rem;
      padding: 8px;
    }
  }

  .signature-container {
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      width: 90%;
      max-width: 500px;
    }

    h2 {
      text-align: center;
      margin-bottom: 10px;
    }

    canvas {
      border: 2px dashed #ccc;
      border-radius: 10px;
      width: 100%;
      height: 220px;
      background-color: #fafafa;
      touch-action: none; /* penting: agar touchscreen bisa menggambar */
    }

    .btn-group {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;
    }

    button {
      flex: 1;
      margin: 0 5px;
      padding: 10px;
      border: none;
      border-radius: 6px;
      color: white;
      font-weight: bold;
      cursor: pointer;
      transition: 0.2s;
    }

    .btn-clear { background: #e74c3c; }
    .btn-save { background: #27ae60; }

    .btn-clear:hover { background: #c0392b; }
    .btn-save:hover { background: #1e8449; }

    @media (max-width: 600px) {
      canvas { height: 160px; }
    }
</style>

<div class="invoice-container">
  <header>
    <h1>Invoice Fee Kunjungan</h1>
    <div class="info">
      <p><strong>Date:</strong> {{ $invoice->date ?? date('d M Y') }}</p>
      <p><strong>Invoice #:</strong> {{ $invoice->number ?? 'INV-001' }}</p>
      <p><strong>Pemohon:</strong> {{ Auth::user()->name }}</p>
      <p><strong>Penerima:</strong> {{ $data->first()->collector ?? 'Unknown' }}</p>
    </div>
  </header>

  <div class="table-responsive">
    <table>
      <thead>
        <tr>
          <th>No</th>
          <th>Cabang</th>
          <th>Principal</th>
          <th>PIC</th>
          <th>Jumlah Kunjungan</th>
          <th>Fee Kunjungan</th>
          <th>Rek. AO/TO</th>
          <th>Rek. Bank</th>
          <th>Total</th>
        </tr>
      </thead>
      <tbody>
        @php 
          $i = 1; 
          $subtotal = 0; 
        @endphp

        @foreach($data as $r)
          @php
              // Logika per item
              if ($r->principal == 'BTN' && $r->jumlah_kunjungan < 20) {
                  $fee = $r->jumlah_kunjungan * 10000;
                  $feeText = '< 20 Kunjungan';
              } else {
                  $fee = $r->jumlah_kunjungan * 10000;
                  $feeText = 'Rp ' . number_format(10000, 0, ',', '.');
              }
              $subtotal += $fee;
          @endphp
          <tr>
              <td>{{ $i++ }}</td>
              <td>{{ $r->cabang }}</td>
              <td>{{ $r->principal }}</td>
              <td>{{ $r->collector }}</td>
              <td>{{ $r->jumlah_kunjungan }}</td>
              <td>{{ $feeText }}</td>
              <td>{{ $r->rekening }}</td>
              <td>{{ $r->bank }}</td>
              <td>Rp {{ number_format($fee, 0, ',', '.') }}</td>
          </tr>
        @endforeach
      </tbody>

      @php $tax = $subtotal * 0.1; @endphp

      <tfoot>
        <tr>
          <td colspan="8" style="text-align:right;">Subtotal</td>
          <td>Rp {{ number_format($subtotal, 0, ',', '.') }}</td>
        </tr>
        <tr>
          <td colspan="8" style="text-align:right;">Tax (10%)</td>
          <td>Rp {{ number_format($tax, 0, ',', '.') }}</td>
        </tr>
        <tr>
          <td colspan="8" style="text-align:right;">Estimasi Total</td>
          <td><strong>Rp {{ number_format($subtotal - $tax, 0, ',', '.') }}</strong></td>
        </tr>
      </tfoot>
    </table>
  </div>
  <div class="table-responsive">
    <table class="table2">
      <thead>
        <th><strong>NO</strong></th>
            <th><strong>CABANG/AREA</strong></th>
            <th><strong>BANK/PRINCIPAL</strong></th>
            <th><strong>NAMA AO/TO</strong></th>
            <th><strong>NAMA DEBITUR</strong></th>
            <th><strong>TGL KUNJUNGAN</strong></th>
            <th><strong>AKSI</strong></th>
            <th><strong>PHOTO KUNJUNGAN</strong></th>
            <th><strong>KOORDINAT LOKASI AGUNAN</strong></th>
            <th><strong>KOORDINAT LOKASI DOMISILI</strong></th>
      </thead>
      <tbody>
        @php $j = 1; @endphp
        @foreach($detail as $r)
        <tr>
            <td>{{ $j }}</td>
            <td>{{ $r->cabang }}</td>
            <td>{{ $r->principal }}</td>
            <td>{{ $r->collector }}</td>
            <td>{{ $r->debitur }}</td>
            <td>{{ $r->tgl_kunjungan }}</td>
            <td>{{ $r->jenis_penagihan }}</td>
            <td><a href="{{ 'https://dev.noesolution.com/new_cms/public/photo/'.$r->asset_id }}">{{ "https://dev.noesolution.com/new_cms/public/photo/".$r->asset_id }}</a></td>
            <td><a href="{{ $r->koordinat_agunan ? "https://www.google.com/maps?q=$r->koordinat_agunan" : '#' }}">{{ $r->koordinat_agunan ? "https://www.google.com/maps?q=$r->koordinat_agunan" : '-' }}</a></td>
            <td><a href="{{ $r->koordinat_asset ? "https://www.google.com/maps?q=$r->koordinat_asset" : '#' }}">{{ $r->koordinat_asset ? "https://www.google.com/maps?q=$r->koordinat_asset" : '-' }}</a></td>
        </tr>
        @php $j++; @endphp
        @endforeach
      </tbody>
    </table>
  </div>
@foreach($detail as $val)
  @endforeach
  <div class="signature-container">
  <h2>Tanda Tangan Digital</h2>

  <form action="{{ route('finance.rekap.feekunjungan.insert') }}" id="signature-form" method="POST" enctype="multipart/form-data">
    @csrf

    <canvas id="signature-pad"></canvas>

    <div class="btn-group">
      <button type="button" class="btn-clear" id="clear">Hapus</button>
      <button type="button" class="btn-save" id="save">Ajukan Fee</button>
    </div>

    <!-- gabungkan semua data ke satu form -->
    <input type="hidden" id="signature-input" name="signature">
    <input type="hidden" name="latest_ca_ids" value="{{ implode(',', $array) }}">
  </form>
</div>

<div class="signature">
  <div class="sign-box">
    <h3>Pemohon</h3>
    <p>{{ Auth::user()->name }}</p>
  </div>
  <div class="sign-box">
    <h3>Div. Finance</h3>
    <p>{{ 'Sherly Yuningsih' }}</p>
  </div>
</div>

<p style="margin-top:40px;font-size:0.9rem;color:#555;">Thank you for your business!</p>

<script>
const canvas = document.getElementById('signature-pad');
const signaturePad = new SignaturePad(canvas, {
  backgroundColor: 'rgba(255,255,255,0)',
  penColor: 'rgb(0, 0, 0)'
});

// agar canvas tetap proporsional
function fixCanvas() {
  const ratio = Math.max(window.devicePixelRatio || 1, 1);
  canvas.width = canvas.offsetWidth * ratio;
  canvas.height = canvas.offsetHeight * ratio;
  canvas.getContext('2d').scale(ratio, ratio);
  signaturePad.clear();
}
window.addEventListener('resize', fixCanvas);
fixCanvas();

document.getElementById('clear').addEventListener('click', () => signaturePad.clear());

document.getElementById('save').addEventListener('click', () => {
  if (signaturePad.isEmpty()) {
    Swal.fire('Tanda tangan belum diisi!', '', 'warning');
    return;
  }

  Swal.fire({
    title: 'Yakin ingin ajukan fee?',
    text: "Pastikan semua data sudah benar.",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Ya, ajukan!',
    cancelButtonText: 'Batal'
  }).then((result) => {
    if (result.isConfirmed) {
      Swal.fire({
        title: 'Mengirim...',
        allowOutsideClick: false,
        didOpen: () => Swal.showLoading()
      });

      const dataURL = signaturePad.toDataURL('image/png');
      document.getElementById('signature-input').value = dataURL;

      // kirim form utama
      document.getElementById('signature-form').submit();
    }
  });
});
</script>

@endsection