@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <h6>Filter Report Bukti Bank</h6>
                </div>
                <div class="card-body">
                    <form id="filterForm" method="POST" action="{{ route('rptbbk.generate') }}">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="project_id" class="form-control-label">Pilih Proyek</label>
                                    <input type="hidden" name="project_id" id="project_id">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="project_display"
                                            name="project_display" placeholder="-- Pilih Proyek --" readonly>
                                        <span class="input-group-text bg-primary text-light"
                                            onclick="openSelectProjectModal()" style="cursor:pointer">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="bukti_display" class="form-label">
                                    Kode Mutasi - Nomor Bukti <span class="text-danger">*</span>
                                </label>

                                <input type="hidden" name="kode_mutasi_id" id="kode_mutasi_id">
                                <input type="hidden" name="nomor_bukti" id="nomor_bukti">
                                <input type="hidden" name="trs_mutasi_bank_id" id="trs_mutasi_bank_id">


                                <div class="input-group">
                                    <input type="text" class="form-control" id="bukti_display" name="bukti_display"
                                        placeholder="-- Pilih Kode Mutasi - Nomor Bukti --" readonly required>

                                    <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                        data-bs-target="#searchModalBukti" style="cursor:pointer">
                                        <i class="fas fa-search"></i>
                                    </span>
                                </div>

                                <small class="text-muted">
                                    Format: BKK 10/20 (BKK = Kode Mutasi, 10/20 = Nomor Bukti)
                                </small>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-12">
                                <button type="button" id="btnGenerate" class="btn btn-primary">
                                    <i class="fas fa-file-alt me-2"></i> Generate Report
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Search Project -->
<div class="modal fade" id="searchModalProject" tabindex="-1" role="dialog" aria-labelledby="searchModalProjectLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="searchModalProjectLabel">Pilih Project</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" class="form-control" id="searchProject" placeholder="Cari project...">
                </div>
                <div class="table-responsive" style="max-height: 400px;">
                    <table class="table table-sm table-hover">
                        <thead>
                            <tr>
                                <th width="100">Aksi</th>
                                <th width="50">No</th>
                                <th>Nama Project</th>
                                <th>Lokasi</th>
                                <th>Pemilik</th>
                                <th>No. SPK</th>
                                
                            </tr>
                        </thead>
                        <tbody id="tableProjectBody">
                            <tr>
                                <td colspan="6" class="text-center">Loading...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Search Bukti -->
<div class="modal fade" id="searchModalBukti" tabindex="-1" role="dialog" aria-labelledby="searchModalBuktiLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="searchModalBuktiLabel">Pilih Kode Mutasi - Nomor Bukti</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info" id="alertSelectProject">
                    <i class="fas fa-info-circle"></i> Silakan pilih Proyek terlebih dahulu
                </div>
                <div class="table-responsive">
                    <table class="table table-striped" id="tableBukti" style="display:none;">
                        <thead>
                            <tr>
                                <th width="80px">Action</th>
                                <th>Kode Mutasi - No. Bukti</th>
                                <th>Tanggal</th>
                                <th>Vendor</th>
                                <th>Keterangan</th>
                                <th>Amount</th>
                            </tr>
                        </thead>
                        <tbody id="tableBuktiBody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
<script>
    let projectsData = [];
    let isLoadingProjects = false;

    $(document).ready(function() {
    // Generate report (tampilkan di halaman)
    $('#btnGenerate').click(function() {
        if (!validateForm()) {
            return;
        }
        
        $('#filterForm').attr('action', '{{ route('rptbbk.generate') }}');
        $('#filterForm').attr('target', '_blank');
        $('#filterForm').submit();
    });
    
    // Load Bukti when modal is opened
    $('#searchModalBukti').on('show.bs.modal', function() {
        loadBuktiData();
    });

    // Search handler for projects
    $('#searchProject').on('keyup', function() {
        const searchTerm = $(this).val().toLowerCase();
        const filteredData = projectsData.filter(item => 
            item.proyek.toLowerCase().includes(searchTerm) ||
            (item.lokasi && item.lokasi.toLowerCase().includes(searchTerm)) ||
            (item.pemilik && item.pemilik.toLowerCase().includes(searchTerm)) ||
            (item.no_spk && item.no_spk.toLowerCase().includes(searchTerm))
        );
        renderProjectTable(filteredData);
    });
});

function validateForm() {
    // if (!$('#project_id').val()) {
    //     Swal.fire({
    //         icon: 'warning',
    //         title: 'Perhatian',
    //         text: 'Silakan pilih proyek terlebih dahulu!'
    //     });
    //     return false;
    // }
    
    if (!$('#kode_mutasi_id').val()) {
        Swal.fire({
            icon: 'warning',
            title: 'Perhatian',
            text: 'Silakan pilih Kode Mutasi - Nomor Bukti terlebih dahulu!'
        });
        return false;
    }
    
    return true;
}

function selectBukti(kodeMutasiId, kodeMutasi, nomorBukti, mutasiBank) {
    $('#kode_mutasi_id').val(kodeMutasiId);
    $('#nomor_bukti').val(nomorBukti);
    $('#trs_mutasi_bank_id').val(mutasiBank);
    $('#bukti_display').val(kodeMutasi + ' ' + nomorBukti);
    $('#searchModalBukti').modal('hide');
    console.log(kodeMutasiId, kodeMutasi, nomorBukti, mutasiBank);
}

function loadBuktiData() {
    var projectId = $('#project_id').val();

    // Destroy existing DataTable if exists
    if ($.fn.DataTable.isDataTable('#tableBukti')) {
        $('#tableBukti').DataTable().destroy();
    }

    $('#alertSelectProject').hide();
    $('#tableBukti').show();

    // Load data via AJAX
    $.ajax({
        url: '{{ route("rptbbk.getBuktiList") }}',
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            project_id: projectId || null
        },
        success: function(response) {
            var tbody = $('#tableBuktiBody');
            tbody.empty();
            
            if (response.data.length === 0) {
                tbody.append('<tr><td colspan="6" class="text-center">Tidak ada data</td></tr>');
                // Don't initialize DataTable when there's no data
            } else {
                $.each(response.data, function(index, item) {
                    var displayText = item.kode_mutasi + ' ' + (item.nomor_bukti || '-');
                    var row = '<tr>' +
                        '<td><button type="button" class="btn btn-sm btn-primary" onclick="selectBukti('
                        + item.kode_mutasi_id
                        + ', \'' + item.kode_mutasi
                        + '\', \'' + (item.nomor_bukti || '')
                        + '\', ' + (item.id || 'null')
                        + ')"><i class="fas fa-check"></i> Pilih</button></td>' +
                        '<td><strong>' + displayText + '</strong></td>' +
                        '<td>' + formatDate(item.date) + '</td>' +
                        '<td>' + (item.supplier_name || '-') + '</td>' +
                        '<td>' + (item.description ? item.description.substring(0, 50) + '...' : '-') + '</td>' +
                        '<td class="text-end">' + formatRupiah(item.amount) + '</td>' +
                        '</tr>';
                    tbody.append(row);
                });
                
                // Initialize DataTable only when there's data
                $('#tableBukti').DataTable({
                    pageLength: 10,
                    order: [[2, 'desc']] // Sort by date descending
                });
            }
        },
        error: function() {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Gagal memuat data bukti!'
            });
        }
    });
}

function formatRupiah(amount) {
    return 'Rp ' + parseFloat(amount).toLocaleString('id-ID', {minimumFractionDigits: 2, maximumFractionDigits: 2});
}

function formatDate(dateString) {
   const date = new Date(dateString);

        const bulan = ["Jan","Feb","Mar","Apr","Mei","Jun","Jul","Agu","Sep","Okt","Nov","Des"];

        const day = date.getDate();
        const month = bulan[date.getMonth()];
        const year = date.getFullYear();

        let hours = date.getHours();
        const minutes = String(date.getMinutes()).padStart(2, '0');

        const ampm = hours >= 12 ? 'PM' : 'AM';
        hours = hours % 12 || 12;

        return `${day}-${month}-${year} ${String(hours).padStart(2,'0')}:${minutes} ${ampm}`;
}

/**
 * Load projects from server
 */
function loadProjects() {
    // Use projects data from server
    projectsData = @json($projects ?? []);
    isLoadingProjects = false;
    renderProjectTable(projectsData);
}

/**
 * Render project table
 */
function renderProjectTable(data) {
    const tbody = $('#tableProjectBody');
    tbody.empty();

    if (isLoadingProjects) {
        tbody.append('<tr><td colspan="6" class="text-center">Loading...</td></tr>');
        return;
    }

    if (data.length === 0) {
        tbody.append('<tr><td colspan="6" class="text-center">Tidak ada data</td></tr>');
        return;
    }

    data.forEach((item, index) => {
        const tr = `<tr>
            <td>
                <button class="btn btn-primary btn-sm" onclick="selectProject(${item.id}, '${item.proyek.replace(/'/g, "\\'")}')"><i class="fas fa-check"></i> Pilih</button>
            </td>
            <td>${index + 1}</td>
            <td>${item.proyek}</td>
            <td>${item.lokasi || '-'}</td>
            <td>${item.pemilik || '-'}</td>
            <td>${item.no_spk || '-'}</td>
           
        </tr>`;
        tbody.append(tr);
    });
}

/**
 * Open modal select project
 */
function openSelectProjectModal() {
    loadProjects();
    $('#searchProject').val('');
    $('#searchModalProject').modal('show');
}

/**
 * Select project
 */
function selectProject(projectId, projectName) {
    $('#project_id').val(projectId);
    $('#project_display').val(projectName);
    $('#searchModalProject').modal('hide');
    
    // Reset bukti selection when project changes
    $('#kode_mutasi_id').val('');
    $('#nomor_bukti').val('');
    $('#bukti_display').val('');
}
</script>
@endpush