@extends('layouts.app')

@section('content')
<!-- Scripts eksternal -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- Styles -->
<style>
    .password-wrapper {
        position: relative;
    }

    .password-wrapper input {
        padding-right: 2.5rem; /* ruang untuk icon mata */
    }

    .password-toggle {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        cursor: pointer;
        font-size: 1.2rem;
        color: #6c757d;
    }

    h1 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 24px;
    color: #333;
  }

  .timeline-container {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
  }

  .timeline-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    transform: translateY(-50%);
    z-index: 0;
  }

  .timeline-track {
    display: flex;
    transition: transform 0.6s ease-in-out;
  }

  .timeline-card {
    position: relative;
    background: white;
    flex: 0 0 calc(20% - 20px); /* 5 per layar */
    margin: 0 10px;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    z-index: 2;
  }

  .timeline-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  }


  /* Zigzag */
  .timeline-card:nth-child(odd) { align-self: flex-start; margin-top: 40px; }
  .timeline-card:nth-child(even) { align-self: flex-end; margin-bottom: 40px; }

  /* Tombol navigasi */
  .timeline-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    cursor: pointer;
    color: #6366f1;
    font-size: 20px;
    z-index: 5;
    transition: all 0.3s ease;
  }

  .timeline-nav:hover {
    background: #6366f1;
    color: white;
  }

  .timeline-prev { left: -25px; }
  .timeline-next { right: -25px; }

  /* Responsif tablet */
  @media (max-width: 1024px) {
    .timeline-card {
      flex: 0 0 calc(33.33% - 20px); /* 3 per layar */
    }
  }

  /* Responsif HP */
  @media (max-width: 768px) {
    .timeline-track {
      flex-direction: column;
      align-items: center;
    }
    .timeline-card {
      flex: 1 0 100%;
      width: 90%;
      margin: 20px 0;
    }
    .timeline-line {
      width: 4px;
      height: 100%;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      background: linear-gradient(180deg, #6366f1, #8b5cf6);
    }
    .timeline-nav { display: none; }
  }

  .active {
    border: 2px solid #6366f1;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
  }

</style>

<!-- Konten Utama -->
<div class="row">
    <div class="col-12">
        <div class="card mb-4 shadow-sm">
            <div class="card-header bg-gradient-primary text-white">
                <div class="d-flex align-items-center justify-content-between">
                    <h6 class="mb-0">
                        <i class="fas fa-users me-2"></i>
                        Daftar Pengguna & Mapping Asset
                    </h6>
                    <small class="text-white-50">
                        <i class="fas fa-info-circle me-1"></i>
                        Real-time data
                    </small>
                </div>
            </div>

            <div class="card-body px-0 pt-0 pb-2">
                <div class="table-responsive p-3">
                    <table class="table table-striped table-hover align-items-center mb-0" id="example">
                        <thead class="thead-light">
                            <tr>
                                <th class="text-center">#</th>
                                <th class="text-center">Bank</th>
                                <th class="text-center">Cabang</th>
                                <th class="text-center">Nama Debitur</th>
                                <th class="text-center">Termapping ke</th>
                                @foreach($users as $user)
                                    <th class="km-col text-center">{{ $user->name }} ({{ $user->total_assets }})</th>
                                @endforeach
                                <th class="text-center">Mapping Ulang</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($results as $row)
                                <tr>
                                    <td class="text-center">{{ $loop->iteration }}</td>
                                    <td class="text-truncate" style="max-width: 120px;" title="{{ $row['bank_name'] }}">
                                        {{ $row['bank_name'] }}
                                    </td>
                                    <td class="text-truncate" style="max-width: 120px;" title="{{ $row['branch_name'] }}">
                                        {{ $row['branch_name'] }}
                                    </td>
                                    <td class="text-truncate" style="max-width: 150px;" title="{{ $row['nama_debitur'] }}">
                                        {{ $row['nama_debitur'] }}
                                    </td>
                                    <td class="text-center">{{ $row['fc'] }}</td>

                                    @foreach($users as $user)
                                        <td class="text-center">
                                            <span class="badge bg-light text-dark">
                                                {{ $row['distances'][$user->id] ?? '-' }} km
                                            </span>
                                        </td>
                                    @endforeach

                                    <td class="text-center">
                                        @if(Auth::user()->role === 'AO' || Auth::user()->role === 'CAO')
                                            <button type="button"
                                                    class="btn btn-sm btn-success"
                                                    onclick="openRoute({{ $row['asset_lat'] }}, {{ $row['asset_lng'] }})">
                                                <i class="fas fa-route me-1"></i>Mulai Rute
                                            </button>
                                        @else
                                            <button type="button"
                                                    class="btn btn-sm btn-primary"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#{{ $row['asset_id'] }}">
                                                <i class="fas fa-map-marker-alt me-1"></i>Mapping
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                    <!-- Modal Mapping - Improved Responsive -->
                    @foreach($results as $row)
                        <div class="modal fade" id="{{ $row['asset_id'] }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered modal-lg">
                                <div class="modal-content">
                                    <form action="{{ route('collection_activities.update_mapping', $row['asset_id']) }}"
                                          method="POST"
                                          id="form-{{ $row['asset_id'] }}">
                                        @csrf
                                        @method('PUT')

                                        <div class="modal-header bg-primary text-white">
                                            <h5 class="modal-title">
                                                <i class="fas fa-map-marker-alt me-2"></i>
                                                Mapping Asset: {{ $row['asset_name'] ?? 'No Name' }}
                                            </h5>
                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>

                                        <div class="modal-body p-4">
                                            <div class="mb-3">
                                                <label for="pic-{{ $row['asset_id'] }}" class="form-label fw-bold">
                                                    <i class="fas fa-user me-1"></i>Pilih PIC/Collector
                                                </label>
                                                <select name="pic" id="pic-{{ $row['asset_id'] }}" class="form-select" required>
                                                    <option value="" disabled selected>-- Pilih Collector --</option>
                                                    @foreach($row['distances'] as $userId => $distance)
                                                        @php
                                                            $user = $users->firstWhere('id', $userId);
                                                        @endphp
                                                        @if($user)
                                                            <option value="{{ $user->id }}"
                                                                @if($row['user_id'] == $user->id) selected @endif>
                                                                {{ $user->name }} ({{ $distance ?? '-' }} km)
                                                            </option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="mb-3">
                                                <label for="pic-{{ $row['asset_id'] }}" class="form-label fw-bold">
                                                    <i class="fas fa-user me-1"></i>Keterangan / Alasan
                                                </label>
                                                <select name="keterangan" id="keterangan" class="form-select" required>
                                                    <option value="" disabled selected>-- Pilih Keterangan --</option>
                                                    <option value="Account Officer sebelumnya sudah tidak aktif lagi">Account Officer sebelumnya sudah tidak aktif lagi</option>
                                                    <option value="Jarak terlalu jauh dari Account Officer sebelumnya">Jarak terlalu jauh dari Account Officer sebelumnya</option>
                                                    <option value="Tidak ada kunjungan selama Account ditangani Account Officer sebelumnya">Tidak ada kunjungan selama Account ditangani Account Officer sebelumnya</option>
                                                    <option value="Account baru">Account baru</option>
                                                    <option value="Keputusan Officer atau Management">Keputusan Officer atau Management</option>
                                                    <option value="Alasan pemindahan tidak diketahui">Alasan pemindahan tidak diketahui</option>
                                                </select>
                                            </div>
                                            
                                            <div class="alert alert-info">
                                                <i class="fas fa-info-circle me-2"></i>
                                                Jarak dihitung berdasarkan lokasi collector dengan asset.
                                            </div>
                                        </div>

                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                                <i class="fas fa-times me-1"></i>Batal
                                            </button>
                                            <button type="button" onclick="confirmSave('{{ $row['asset_id'] }}')" class="btn btn-primary">
                                                <i class="fas fa-save me-1"></i>Simpan Perubahan
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        </div>
    </div>
    
    <!-- Timeline Process Card -->
    <div class="col-12">
        <div class="card mb-4 shadow-sm">
            <div class="card-header bg-gradient-primary text-white">
                <h6 class="mb-0">
                    <i class="fas fa-chart-line me-2"></i>
                    Jejak Proses Data Mapping
                </h6>
            </div>
            
            <div class="card-body py-5">
              <h1>📒 Riwayat Penanganan Account</h1>

              <div class="timeline-container">
                <div class="timeline-line"></div>

                <button class="timeline-nav timeline-prev"><i class="lucide lucide-chevron-left"></i></button>
                <button class="timeline-nav timeline-next"><i class="lucide lucide-chevron-right"></i></button>

                <div class="timeline-track" id="timelineTrack">
                  @foreach($mapping as $val)
                    <div class="@if($val->current == 'Y') active @endif timeline-card"><h3 style="font-size: 18px;">{{ $val->user_name }}</h3><p>{{ $val->keterangan ?? 'Alasan pemindahan tidak diketahui' }}</p><span>{{ $val->start_date }}</span></div>
                  @endforeach
                </div>
              </div>
            </div>
        </div>
    </div>

</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    if (alertData.success) {
        Swal.fire({
            icon: 'success',
            title: 'Berhasil',
            text: alertData.success,
            timer: 3000,
            showConfirmButton: false
        });
    }

    if (alertData.error) {
        Swal.fire({
            icon: 'error',
            title: 'Gagal',
            text: alertData.error,
            timer: 3000,
            showConfirmButton: false
        });
    }

    if (alertData.warning) {
        Swal.fire({
            icon: 'warning',
            title: 'Peringatan',
            text: alertData.warning,
            timer: 3000,
            showConfirmButton: false
        });
    }

    if (alertData.info) {
        Swal.fire({
            icon: 'info',
            title: 'Info',
            text: alertData.info,
            timer: 3000,
            showConfirmButton: false
        });
    }
});

function openRoute(destLat, destLng) {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            let originLat = position.coords.latitude;
            let originLng = position.coords.longitude;
            let url = `https://www.google.com/maps/dir/?api=1&origin=${originLat},${originLng}&destination=${destLat},${destLng}&travelmode=driving`;
            window.open(url, '_blank');
        }, function() {
            alert('Tidak bisa mengambil lokasi Anda. Pastikan GPS aktif.');
        });
    } else {
        alert('Browser tidak mendukung geolocation.');
    }
}

$('#example').DataTable({
    pageLength: 10,
    scrollX: true,
    scrollCollapse: true,
    paging: true,
    autoWidth: false,
    fixedHeader: true,
    responsive: true,
    language: {
        search: "Pencarian:",
        lengthMenu: "Tampilkan _MENU_ data per halaman",
        info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
        infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
        infoFiltered: "(difilter dari _MAX_ total data)",
        paginate: {
            first: "Pertama",
            last: "Terakhir",
            next: "Selanjutnya",
            previous: "Sebelumnya"
        }
    },
    columnDefs: [
        {
            targets: 'km-col',
            render: function (data, type) {
                if (type === 'sort' || type === 'type') {
                    return parseFloat(data.replace(' km', '').replace(',', ''));
                }
                return data;
            }
        },
        {
            targets: [-1], // Last column (Action)
            orderable: false,
            searchable: false
        }
    ],
    dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>' +
         '<"row"<"col-sm-12"tr>>' +
         '<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>'
});

function confirmSave(assetId) {
    Swal.fire({
        title: 'Yakin ingin simpan?',
        text: "Pastikan data sudah terisi dengan benar!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Ya, simpan!',
        cancelButtonText: 'Batal'
    }).then((result) => {
        if (result.isConfirmed) {
            document.getElementById('form-' + assetId).requestSubmit();
        }
    });
}

  const track = document.getElementById('timelineTrack');
  const cards = document.querySelectorAll('.timeline-card');
  const prevBtn = document.querySelector('.timeline-prev');
  const nextBtn = document.querySelector('.timeline-next');

  let currentSlide = 0;
  const cardsPerSlide = 5;
  const totalSlides = Math.ceil(cards.length / cardsPerSlide);

  function updateSlide() {
    const offset = -currentSlide * 100; // Geser 100% per slide
    track.style.transform = `translateX(${offset}%)`;
  }

  nextBtn.addEventListener('click', () => {
    if (currentSlide < totalSlides - 1) {
      currentSlide++;
      updateSlide();
    }
  });

  prevBtn.addEventListener('click', () => {
    if (currentSlide > 0) {
      currentSlide--;
      updateSlide();
    }
  });

  window.addEventListener('resize', () => {
    // reset ke awal saat layar berubah ukuran
    currentSlide = 0;
    updateSlide();
  });
</script>
@endsection