@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/datatables@1.10.24/media/js/jquery.dataTables.min.js"></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; }
    }

    th{
        color :#FFF !important;
    }

    .sign-box img {
        max-width: 200px;
        height: auto;
        margin-top: 10px;
        display: inline-block;
        vertical-align: top;
        margin-left: 10px;
    }

</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> {{ $query->first()->kode ?? 'INV-001' }}</p>
      <p><strong>Pemohon:</strong> {{ Auth::user()->name }}</p>
      <p><strong>Penerima:</strong> {{ $query->first()->collector ?? 'Unknown' }}</p>
    </div>
  </header>

  <div class="table-responsive">
    <table>
      <thead>
        <tr>
          <th>No</th>
          <th>Cabang</th>
          <th>Principal</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($query as $r)
          @php
              // Logika per item
              if ($r->principal == 'BTN' && $r->jumlah_kunjungan < 20) {
                  $fee = 0;
                  $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->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="7" style="text-align:right;">Subtotal</td>
          <td>Rp {{ number_format($subtotal, 0, ',', '.') }}</td>
        </tr>
        <tr>
          <td colspan="7" style="text-align:right;">Tax (10%)</td>
          <td>Rp {{ number_format($tax, 0, ',', '.') }}</td>
        </tr>
        <tr>
          <td colspan="7" 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="table table-striped" id="detail-table">
      <thead class="text-white">
        <th><strong>NO</strong></th>
            <th><strong>Status</strong></th>
            <th><strong>CATATAN</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><a @if($r->status == 'Done') class="btn btn-success text-white py-1" @elseif($r->status == 'Pending') class="btn btn-warning text-white py-1" @else class="btn btn-danger text-white py-1" @endif data-bs-toggle="modal" 
                data-bs-target="#prosess{{ $r->id }}" onclick="event.stopPropagation();">{{ $r->status }}</a></td>
            <td>{{ $r->notes }}</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>



  <div class="signature-container">
  <h2>Tanda Tangan Digital</h2>
@php
  $allDone = $detail->every(fn($d) => $d->status != 'Pending');
@endphp
  <form action="{{ route('finance.rekap.feekunjungan.update', $detail->first()->id) }}" id="signature-form" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')

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

    <div class="btn-group">
        <button type="button" class="btn-clear" id="clear">Hapus</button>
        <button {{ $allDone ? '' : 'disabled' }} type="button" class="btn-save" id="save">ACC Fee</button>
    </div>

    <!-- gabungkan semua data ke satu form -->
    <!-- <input type="hidden" id="signature-input" name="signature"> -->
  </form>
</div>

<div class="signature">
  <div class="sign-box">
    <h3>Pemohon</h3>
    <img src="{{ secure_asset('/signatures/'.$detail->first()->signature) }}" alt="TTD">
    <br>
    <p>{{ $detail->first()->signed_by ?? 'Finance Dept.' }}</p>
  </div>
  <div class="sign-box">
    <h3>Div. Finance</h3>
    <p>{{ 'Sherly Yuningsih' }}</p>
  </div>
</div>

    @foreach($detail as $r)
<div class="modal fade" id="prosess{{ $r->id }}" tabindex="-1" aria-labelledby="modalLabel{{ $r->id }}" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalLabel{{ $r->id }}">Perbarui Status</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <form id="formProsess{{ $r->id }}" action="{{ route('finance.update', ['id' => $r->id]) }}" method="POST">
        @csrf
        @method('PUT')

        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Status</label>
            <select class="form-select status-select" name="status" data-id="{{ $r->id }}" required>
              <option disabled value="">Pilih Status</option>
              <option @selected($r->status == 'Done') value="Done">Done</option>
              <option @selected($r->status == 'Pending') value="Pending">Pending</option>
              <option @selected($r->status == 'Rejected') value="Rejected">Rejected</option>
            </select>
          </div>

          <div class="mb-3 catatan-container" id="catatan-container-{{ $r->id }}" style="display:none;">
            <label class="form-label">Catatan</label>
            <select class="form-select" name="catatan">
              <option selected disabled value="">Pilih Catatan</option>
              <option value="Foto Kunjungan Tidak Lengkap">Foto Kunjungan Tidak Lengkap</option>
              <option value="Tidak Ada GPS Agunan / Domisili">Tidak Ada GPS Agunan / Domisili</option>
              <option value="Account Bermasalah">Account Bermasalah</option>
            </select>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary btn-submit" data-id="{{ $r->id }}">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endforeach

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

<script>
    $(document).ready(function() {
        $('#detail-table').DataTable();
    });

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();
    }
  });
});

$(document).on('change', '.status-select', function() {
    const id = $(this).data('id');
    const selected = $(this).val();

    if (selected === 'Rejected') {
      $(`#catatan-container-${id}`).show().find('select').attr('required', true);
    } else {
      $(`#catatan-container-${id}`).hide().find('select').attr('required', false);
    }
  });

  // Konfirmasi submit per modal
  $(document).on('click', '.btn-submit', function() {
    const id = $(this).data('id');
    Swal.fire({
      title: 'Yakin ingin memperbarui status?',
      text: 'Pastikan semua data sudah benar.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Ya, perbarui!',
      cancelButtonText: 'Batal'
    }).then((result) => {
      if (result.isConfirmed) {
        document.getElementById(`formProsess${id}`).submit();
      }
    });
  });
</script>

@endsection