@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 Bill Of Quantity</h6>
                </div>
                <div class="card-body">
                    <form id="filterForm" method="POST" action="{{ route('rptboq.generate') }}">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="project_id" class="form-control-label">Pilih Proyek <span
                                            class="text-danger">*</span></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 required>
                                        <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>

                        <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>


@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('rptboq.generate') }}');
        $('#filterForm').attr('target', '_blank');
        $('#filterForm').submit();
    });
    
   

    // 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;
    }
    
    return true;
}




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

function formatDate(dateString) {
    var date = new Date(dateString);
    var day = ('0' + date.getDate()).slice(-2);
    var month = ('0' + (date.getMonth() + 1)).slice(-2);
    var year = date.getFullYear();
    return day + '/' + month + '/' + year;
}

/**
 * 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');
    
}
</script>
@endpush