@extends('layouts.app')
<link rel="stylesheet" href="{{ asset('style/step2.css') }}">

<style>
/* Fix date picker text visibility */
input[type="date"] {
    color: #333 !important;
    -webkit-text-fill-color: #333 !important;
}

/* Fix date picker calendar text */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.5);
}

/* Fix date picker button and controls */
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    color: #333 !important;
    -webkit-text-fill-color: #333 !important;
}

/* Firefox date picker fix */
input[type="date"]::-moz-placeholder {
    color: #666 !important;
}
</style>
@section('scripts')
<!-- Make sure jQuery is loaded first -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include Summernote CSS and JS -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
<!-- Include AutoNumeric -->
<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.6.0/dist/autoNumeric.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize Summernote
    $('#keterangan').summernote({
        placeholder: 'Tulis hasil kunjungan di sini...',
        tabsize: 2,
        height: 200,
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['font', ['strikethrough']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link']],
            ['view', ['fullscreen', 'codeview']]
        ]
    });

    // Clear note functionality
    $('#clearNote').click(function() {
        $('#keterangan').summernote('code', '');
    });
});</script>

@section('content')
<div class="row">
  <div class="col-12">
    <div class="card modern-card mb-4">
      <div class="modern-header">
        <h5>👤 {{$assets->nama_debitur}}</h5>
      </div>


      <div class="progress-container">
        <div class="progress-label">
          <h6>📊 Report Activity {{ $step }}/7</h6>
          <span class="progress-percent" id="progressPercent">{{floor(($step / 7) * 100)}}%</span>
        </div>
        <div class="progress">
          <div class="progress-bar" role="progressbar"
            aria-valuenow="0"
            aria-valuemin="0"
            aria-valuemax="100">
          </div>
        </div>
      </div>

      <div class="card-body" style="padding: 24px;">

        <form action="{{ route('collection_activities.store_step', [$id, $step]) }}" method="POST">
          @csrf

          <div style="display:none" class="form-group-wrapper">
            <label class="form-label">Asset ID</label>
            <input type="text"
            value="{{ old('asset_id', $previousData['asset_id'] ?? $id) }}"
            name="asset_id"
            class="form-control"
            placeholder="ID Asset"
            required
            readonly>
            @error('asset_id')
              <div class="error-message">❌ {{ $message }}</div>
            @enderror
          </div>

          <div style="display:none" class="form-group-wrapper">
            <label class="form-label">Respon Debitur <span class="required-badge">*</span></label>
            <select name="response" class="form-control" id="response" required>
              <option value="" disabled {{ empty(old('response', $previousData['response'] ?? '')) ? 'selected' : '' }}>
                💬 Pilih Respon Debitur
              </option>
              @if(!empty($previousData['activity_tipe']) && isset($responseOptions))
                @foreach($responseOptions as $option)
                  <option value="{{ $option['value'] }}"
                  {{ old('response', $previousData['response'] ?? '') == $option['value'] ? 'selected' : '' }}>
                    {{ $option['text'] }}
                  </option>
                @endforeach
              @endif
            </select>
            <span class="helper-text" style="color:red;font-size:12px;">⚠️ Wajib dipilih</span>
            @error('response')
              <div class="error-message">❌ {{ $message }}</div>
            @enderror
          </div>
          <div class="form-group-wrapper">
            <label class="form-label">Hasil Penagihan <span class="required-badge">*</span></label>
            <select name="result" class="form-control" id="result" data-response="{{ old('response', $previousData['response'] ?? '') }}" data-selected="{{ old('result', $previousData['result'] ?? '') }}" required>
              <option value="" disabled {{ empty(old('result', $previousData['result'] ?? '')) ? 'selected' : '' }}>
                📋 Pilih Hasil Penagihan
              </option>
              @if(!empty($previousData['response']) && isset($resultOptions))
                @foreach($resultOptions as $option)
                  <option value="{{ $option['value'] }}"
                  {{ old('result', $previousData['result'] ?? '') == $option['value'] ? 'selected' : '' }}>
                    {{ $option['text'] }}
                  </option>
                @endforeach
              @endif
            </select>
            <span class="helper-text" style="color:red;font-size:12px;">⚠️ Wajib dipilih</span>
            @error('result')
              <div class="error-message">❌ {{ $message }}</div>
            @enderror
          </div>

          <div class="form-group-wrapper">
            <label class="form-label">Rencana Penyelesaian <span class="required-badge">*</span></label>
            <select name="plan" class="form-control" id="plan" data-selected="{{ old('plan', $previousData['plan'] ?? '') }}" required>
              <option value="" disabled {{ empty(old('plan', $previousData['plan'] ?? '')) ? 'selected' : '' }}>
                🎯 Pilih Plan Penyelesaian
              </option>
              @if(!empty($previousData['result']) && isset($planOptions))
                @foreach($planOptions as $option)
                  <option value="{{ $option['value'] }}"
                  {{ old('plan', $previousData['plan'] ?? '') == $option['value'] ? 'selected' : '' }}>
                    {{ $option['text'] }}
                  </option>
                @endforeach
              @endif
            </select>
            <span class="helper-text" style="color:red;font-size:12px;">⚠️ Wajib dipilih</span>
            @error('plan')
              <div class="error-message">❌ {{ $message }}</div>
            @enderror
          </div>

          <div style="display: none;" class="form-group-wrapper" id="price_group">
            <label class="form-label">Harga Jual <span class="required-badge">*</span></label>
            <input type="text" name="price" class="form-control" id="price" value="{{ old('price', $previousData['price'] ?? '0') }}" @if(!in_array(old('result', $previousData['plan'] ?? ''), ['6', '7', '9'])) @else readonly @endif required>
            <span class="helper-text" style="color:red;font-size:12px;">💰 Wajib diisi jika plannya Jual Agunan</span>
            @error('price')
              <div class="error-message">❌ {{ $message }}</div>
            @enderror
          </div>

          <div style="display: none;" class="form-group-wrapper" id="promise_group">
            <label class="form-label">Periode Janji Bayar <span class="required-badge">*</span></label>
            <input type="date" name="plan_date" class="form-control" id="plan_date" value="{{ old('plan_date', $previousData['plan_date'] ?? '') }}" min="{{ \Carbon\Carbon::now()->addDay()->format('Y-m-d') }}" @if(!in_array(old('result', $previousData['result'] ?? ''), ['3', '4', '5', '6', '7'])) @else readonly @endif required>
            <span class="helper-text" style="color:red;font-size:12px;">📅 Wajib diisi jika plannya Janji Bayar</span>
            @error('plan_date')
              <div class="error-message">❌ {{ $message }}</div>
            @enderror
          </div>

          <div style="display: none;" class="form-group-wrapper" id="nominal_group">
            <label class="form-label">Nominal Janji Bayar <span class="required-badge">*</span></label>
            <input type="text" name="nominal" class="form-control" id="nominal" value="{{ old('nominal', $previousData['nominal'] ?? '0') }}" @if(!in_array(old('result', $previousData['result'] ?? ''), ['3', '4', '5', '6', '7'])) @else readonly @endif required>
            <span class="helper-text" style="color:red;font-size:12px;">💵 Wajib diisi jika plannya Janji Bayar</span>
            @error('nominal')
              <div class="error-message">❌ {{ $message }}</div>
            @enderror
          </div>

          <div style="display: none;" class="form-group-wrapper" id="payment_date_group">
            <label class="form-label">Tanggal Pembayaran <span class="required-badge">*</span></label>
            <input type="date" name="payment_date" class="form-control" id="payment_date" value="{{ old('payment_date', $previousData['payment_date'] ?? '') }}" min="{{ \Carbon\Carbon::now()->subDays(2)->format('Y-m-d') }}" max="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" @if(!in_array(old('result', $previousData['result'] ?? ''), ['1'])) @else readonly @endif required>
            <span class="helper-text" style="color:red;font-size:12px;">📅 Wajib diisi jika malakukan Pembayaran</span>
            @error('payment_date')
              <div class="error-message">❌ {{ $message }}</div>
            @enderror
          </div>

          <div style="display: none;" class="form-group-wrapper" id="payment_group">
            <label class="form-label">Nominal Pembayaran <span class="required-badge">*</span></label>
            <input type="text" name="payment" class="form-control" id="payment" value="{{ old('payment', $previousData['payment'] ?? '0') }}" @if(!in_array(old('result', $previousData['result'] ?? ''), ['1'])) @else readonly @endif required>
            <span class="helper-text" style="color:red;font-size:12px;">💵 Wajib diisi jika malakukan Pembayaran</span>
            @error('payment')
              <div class="error-message">❌ {{ $message }}</div>
            @enderror
          </div>

          <div class="form-group-wrapper">
            <label class="form-label">Keterangan Visit <span class="required-badge">*</span></label>
            <textarea id="keterangan" name="keterangan" class="form-control" required style="min-height: 150px;">{{ old('keterangan', $previousData['keterangan'] ?? $note->notes ??'') }}</textarea>
            <span class="helper-text" style="color:red;font-size:12px;">📝 Silahkan tulis hasil kunjungan dan wajib diisi</span>
            <button type="button" class="btn btn-danger" id="clearNote" style="margin-top: 8px;">🗑️ Hapus Catatan</button>
            @error('keterangan')
              <div class="error-message">❌ {{ $message }}</div>
            @enderror
          </div>

          <div class="button-group">
            <a href="{{ route('collection_activities.create_step', [$id, $step - 1]) }}" class="btn btn-secondary">
              ← Sebelumnya
            </a>
            <button type="submit" class="btn btn-primary">
              Selanjutnya →
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
  // Initialize progress percentage
  document.addEventListener('DOMContentLoaded', function() {
    const step = parseInt('{{ $step }}');
    const progressPercent = (step / 7) * 100;
    const progressBar = document.querySelector('.progress-bar');
    
    console.log('Step:', step, 'Progress %:', progressPercent);
    
    if (progressBar) {
      // Set initial state
      progressBar.style.width = '0%';
      
      // Animate to target width after a short delay
      setTimeout(function() {
        progressBar.style.width = progressPercent + '%';
      }, 300);
    }

    // Add focus animations to form controls
    const formControls = document.querySelectorAll('.form-control');
    formControls.forEach(function(control) {
      control.addEventListener('focus', function() {
        this.classList.add('focused');
      });
      control.addEventListener('blur', function() {
        this.classList.remove('focused');
      });
    });

    // Form submission animation
    const form = document.querySelector('form');
    if (form) {
      form.addEventListener('submit', function(e) {
        const button = form.querySelector('.btn-primary');
        if (button) {
          button.style.opacity = '0.7';
        }
      });
    }
  });
</script>

@endsection
@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
  const alertData = {
    success: "{{ session('success') }}",
    error: "{{ session('error') }}",
    warning: "{{ session('warning') }}",
    info: "{{ session('info') }}"
  };


document.addEventListener('DOMContentLoaded', function () {
  //respon -> Result
  // Handle session alerts
    Object.entries(alertData).forEach(([key, value]) => {
      if (value) {
        Swal.fire({
          icon: key,
          title: key.charAt(0).toUpperCase() + key.slice(1),
          text: value,
          timer: 3000,
          showConfirmButton: false
        });
      }
    });


  const responToResultOptions = {
    
    "Diangkat": [
      { value: "23", text: "Debitur Minta Waktu" },
      { value: "1", text: "Debitur Tidak Mampu" },
      { value: "3", text: "Janji Bayar Bertahap/Cicilan" },
      { value: "4", text: "Janji Bayar Bantuan Keluarga" }, 
      { value: "5", text: "Janji Bayar Penyelesaian" },
      { value: "6", text: "Janji Bayar Pelunasan/BTC" },
      { value: "7", text: "Janji Bayar Pihak Take Over/Ketiga" },
      { value: "8", text: "Mengaku Sudah Lunas/BTC" }, 
      { value: "9", text: "Mengaku Sudah Restruktur" },
      { value: "10", text: "Mengaku Membeli Lelang" },
      { value: "11", text: "Melakukan Pembayaran" },
      { value: "19", text: "Order Somasi / Pengosongan" },
      { value: "21", text: "Order Surat Pra Lelang" }
    ],
    "Ditutup": [
      { value: "14", text: "Tunggu Respon Somasi" },
      { value: "15", text: "Debitur Mengabaikan Somasi" },
      { value: "19", text: "Order Somasi / Pengosongan" },
      { value: "21", text: "Order Surat Pra Lelang" }

    ],
    "Tidak Diangkat": [
      { value: "13", text: "Dihubungi Tidak Respon" },
      { value: "14", text: "Tunggu Respon Somasi" },
      { value: "15", text: "Debitur Mengabaikan Somasi" },
      { value: "18", text: "Tidak ada info Debitur" },
      { value: "19", text: "Order Somasi / Pengosongan" },
      { value: "21", text: "Order Surat Pra Lelang" }
    ],
    "Bertemu": [
      { value: "23", text: "Debitur Minta Waktu" },
      { value: "1", text: "Debitur Tidak Mampu" },
      { value: "3", text: "Janji Bayar Bertahap/Cicilan" },
      { value: "4", text: "Janji Bayar Bantuan Keluarga" }, 
      { value: "5", text: "Janji Bayar Penyelesaian" },
      { value: "6", text: "Janji Bayar Pelunasan/BTC" },
      { value: "7", text: "Janji Bayar Pihak Take Over/Ketiga" },
      { value: "8", text: "Mengaku Sudah Lunas/BTC" }, 
      { value: "9", text: "Mengaku Sudah Restruktur" },
      { value: "10", text: "Mengaku Membeli Lelang" },
      { value: "11", text: "Melakukan Pembayaran" },
      { value: "14", text: "Tunggu Respon Somasi" },
      { value: "19", text: "Order Somasi / Pengosongan" },
      { value: "21", text: "Order Surat Pra Lelang" }

    ],
    "Tidak Bertemu": [
      { value: "22", text: "Debitur Sedang Tidak Di Rumah" },
      { value: "1", text: "Debitur Meninggal" },
      { value: "13", text: "Dihubungi Tidak Respon" },
      { value: "14", text: "Tunggu Respon Somasi" },
      { value: "15", text: "Debitur Mengabaikan Somasi" },
      { value: "16", text: "Info Sudah di Take Over" },
      { value: "18", text: "Tidak ada info Debitur" },
      { value: "19", text: "Order Somasi / Pengosongan" },
      { value: "21", text: "Order Surat Pra Lelang" }
    ],
    "Pindah Rumah": [
      { value: "12", text: "Ada Peminat Cessie/Lelang" },
      { value: "13", text: "Dihubungi Tidak Respon" },
      { value: "15", text: "Debitur Mengabaikan Somasi" },
      { value: "16", text: "Info Sudah di Take Over" },
      { value: "21", text: "Order Surat Pra Lelang" }
    ],
    "Alamat tidak ditemukan": [
      { value: "17", text: "Lokasi Tidak Ditemukan" },
      { value: "18", text: "Tidak ada info Debitur" }
    ],
    "Debitur Meninggal": [
      { value: "2", text: "Fileback" },
      { value: "1", text: "Debitur / Keluarga Tidak Mampu" },
      { value: "4", text: "Janji Bayar Bantuan Keluarga" },
      { value: "23", text: "Debitur / Keluarga Minta Waktu" },
    ]
  };


  // marketable -> Kondisi
  const resultToPlanOptions = {
    
    1: [
      { value: "6", text: "Jual Cessie/Lelang" },
      { value: "7", text: "Jual Bersama Agunan" },
      { value: "8", text: "Jual Aset Lain" },
      { value: "9", text: "Menyerahkan Agunan" } 
    ],
    2: [
      { value: "15", text: "Fileback" }

    ],
    3: [
      { value: "2", text: "BTC" },
      { value: "3", text: "Pelunasan Partial" },
      { value: "4", text: "BTC Partial" },
      { value: "10", text: "Visit Ulang Agunan Push Lagi" }
    ],
    4: [
      { value: "1", text: "Pelunasan" },
      { value: "2", text: "BTC" },
      { value: "3", text: "Pelunasan Partial" },
      { value: "4", text: "BTC Partial" },
      { value: "10", text: "Visit Ulang Agunan Push Lagi" }
    ],
    5: [
      { value: "1", text: "Pelunasan" },
      { value: "3", text: "Pelunasan Partial" },
      { value: "10", text: "Visit Ulang Agunan Push Lagi" }
    ],
    6: [
      { value: "1", text: "Pelunasan" },
      { value: "2", text: "BTC" },
      { value: "10", text: "Visit Ulang Agunan Push Lagi" }
    ],
    7: [
      { value: "1", text: "Pelunasan" },
      { value: "2", text: "BTC" },
      { value: "3", text: "Pelunasan Partial" },
      { value: "4", text: "BTC Partial" },
      { value: "10", text: "Visit Ulang Agunan Push Lagi" }
    ],
    8: [
      { value: "13", text: "Koordinasi principal" },
      { value: "15", text: "Fileback"}
    ],
    9: [
      { value: "13", text: "Koordinasi principal" },
      { value: "15", text: "Fileback"}
    ],
    10: [
      { value: "13", text: "Koordinasi principal" },
      { value: "15", text: "Visit Ulang Agunan Push Lagi"}
    ],
    11: [
      { value: "5", text: "Kawal Pembayaran" }
    ],
    12: [
      { value: "6", text: "Jual Cessie/Lelang" },
      { value: "7", text: "Jual Bersama Agunan" },
      { value: "8", text: "Jual Aset Lain" },
      { value: "9", text: "Menyerahkan Agunan" }
    ],
    13: [
      { value: "12", text: "Lakukan Visit Awal" },
      { value: "14", text: "Support Divisi Hukum" },
      { value: "16", text: "DC Ulang/FU" }
    ],
    14: [
      { value: "14", text: "Support Divisi Hukum" },
      { value: "16", text: "DC Ulang/FU" }
    ],
    15: [
      { value: "12", text: "Lakukan Visit Awal" },
      { value: "14", text: "Support Divisi Hukum" },
      { value: "16", text: "DC Ulang/FU" }
    ],
    16: [
      { value: "11", text: "Visit Lanjutan KTP/Kerja/Usaha" },
      { value: "13", text: "Koordinasi Principal" }
    ],
    17: [
      { value: "11", text: "Visit Lanjutan KTP/Kerja/Usaha" },
      { value: "13", text: "Koordinasi Principal" },
      { value: "16", text: "Fileback" }
    ],
    18: [
      { value: "6", text: "Jual Cessie/Lelang" },
      { value: "11", text: "Visit Lanjutan KTP/Kerja/Usaha" },
      { value: "12", text: "Lakukan Visit Awal" },
      { value: "13", text: "Koordinasi Principal" },
      { value: "15", text: "Fileback" }
    ],
    19: [
      { value: "14", text: "Support Divisi Hukum" }
    ],
    21: [
      { value: "14", text: "Support Divisi Hukum" }
    ],
    22: [
      { value: "10", text: "Visit Ulang Agunan Push Lagi" },
      { value: "16", text: "DC Ulang/FU" }
    ],
    23: [
      { value: "10", text: "Visit Ulang Agunan Push Lagi" },
      { value: "16", text: "DC Ulang/FU" }
    ]
  };

  

  const resultSelect = document.getElementById('result');
  const planSelect = document.getElementById('plan');
  const storedResponse = resultSelect.dataset.response;
  const selectedResult = resultSelect.dataset.selected;

  // Populate RESULT options dari response
  if (storedResponse && responToResultOptions[storedResponse]) {
    resultSelect.innerHTML = '<option value="" disabled selected>Pilih Hasil Kunjungan</option>';
    responToResultOptions[storedResponse].forEach(function (item) {
      const option = document.createElement('option');
      option.value = item.value;
      option.text = item.text;
      resultSelect.appendChild(option);
    });

    if (selectedResult) {
      resultSelect.value = selectedResult;
    }
  }

  // Populate PLAN options jika result sudah terpilih
  if (selectedResult && resultToPlanOptions[selectedResult]) {
    planSelect.innerHTML = '<option value="" disabled selected>Pilih Plan Penyelesaian</option>';
    resultToPlanOptions[selectedResult].forEach(function (item) {
      const option = document.createElement('option');
      option.value = item.value;
      option.text = item.text;
      planSelect.appendChild(option);
    });

    const oldPlan = planSelect.dataset.selected;
    if (oldPlan) {
      planSelect.value = oldPlan;
    }
  }

  // Event: saat user mengganti result
  resultSelect.addEventListener('change', function () {
    const val = this.value;

    // Update Plan options
    planSelect.innerHTML = '<option value="" disabled selected>Pilih Plan Penyelesaian</option>';
    if (resultToPlanOptions[val]) {
      resultToPlanOptions[val].forEach(function (item) {
        const option = document.createElement('option');
        option.value = item.value;
        option.text = item.text;
        planSelect.appendChild(option);
      });
    }
  });
});


$("#result").on("change", function() {
  const selectedresult = $(this).val();
  if (["3", "4", "5", "6", "7"].includes(selectedresult)) {
    $("#plan_date").prop("readonly", false);
    $("#nominal").prop("readonly", false);
    $('#promise_group').show();
    $('#nominal_group').show();
    AutoNumeric.multiple('#nominal', {
    digitGroupSeparator: '.',
    decimalCharacter: ',',
    decimalPlaces: 0,
    unformatOnSubmit: true,
    currencySymbol: 'Rp. ',
    currencySymbolPlacement: 'p'
  });
  } else {
    $("#plan_date").prop("readonly", true);
    $("#nominal").prop("readonly", true);
    $('#promise_group').hide();
    $('#nominal_group').hide();
  }
});

$("#result").on("change", function() {
  const selectedResult = $(this).val();
  if (selectedResult == 1) {
    $("#price").prop("readonly", false);
    $('#price_group').show();
    AutoNumeric.multiple('#price', {
    digitGroupSeparator: '.',
    decimalCharacter: ',',
    decimalPlaces: 0,
    unformatOnSubmit: true,
    currencySymbol: 'Rp. ',
    currencySymbolPlacement: 'p'
  });
  } else {
    $("#price").prop("readonly", true);
    $('#price_group').hide();
  }
});

$("#result").on("change", function() {
  const selectedResult = $(this).val();
  if (selectedResult == 11) {
    $("#payment").prop("readonly", false);
    $("#payment_date").prop("readonly", false);
    $('#payment_group').show();
    $('#payment_date_group').show();
    AutoNumeric.multiple('#payment', {
    digitGroupSeparator: '.',
    decimalCharacter: ',',
    decimalPlaces: 0,
    unformatOnSubmit: true,
    currencySymbol: 'Rp. ',
    currencySymbolPlacement: 'p'
  });
  } else {
    $("#payment").prop("readonly", true);
    $("#payment_date").prop("readonly", true);
    $('#payment_group').hide();
    $('#payment_date_group').hide();
  }
});


</script>
@endsection
</html>