@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row mx-1">
                <div class="card">
                    <div class="row">
                        <div class="card-header col-md-auto">
                            <h5 class="mb-0">List Budget Project</h5>
                        </div>
                        <div class="col">
                            @include('components.alert')
                        </div>
                    </div>

                    <hr class="horizontal dark mt-0">

                    <div class="row px-4 py-3">
                        <!-- Add Button -->
                        <div class="col-md-12 mb-3">
                            <button class="btn btn-primary mb-0"
                                onclick="window.location='{{ url('/trsbgt/create') }}'">
                                <i class="fas fa-plus me-1"></i>
                                <span class="font-weight-bold">Tambah</span>
                            </button>
                        </div>

                        <!-- Filter Group -->
                        <div class="col-md-12">
                            <form method="GET" action="{{ url('/trsbgt') }}" id="filterForm">
                                <!-- Pertahankan query string yang ada kecuali project_id, project_display, dan description -->
                                @foreach(request()->except(['project_id', 'project_display', 'description', 'page']) as $key => $val)
                                    <input type="hidden" name="{{ $key }}" value="{{ $val }}">
                                @endforeach

                                <div class="d-flex flex-wrap align-items-end gap-3">
                                    <div style="flex: 1 1 260px; min-width: 260px;">
                                        <label for="project_display" class="form-label text-sm font-weight-bold">Filter Project</label>
                                        <input type="hidden" id="project_id" name="project_id" value="{{ request('project_id') }}">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="project_display" name="project_display" 
                                                value="{{ request('project_display') }}" placeholder="-- Semua Project --" readonly>
                                            <span class="input-group-text bg-primary text-light" style="cursor:pointer"
                                                onclick="openSelectProjectModal()">
                                                <i class="fas fa-search"></i>
                                            </span>
                                            <span class="input-group-text bg-danger text-light" style="cursor:pointer"
                                                onclick="clearSettingsProject()">
                                                <i class="fas fa-times"></i>
                                            </span>
                                        </div>
                                    </div>
                                    
                                    <div style="flex: 1 1 260px; min-width: 260px;">
                                        <label for="description" class="form-label text-sm font-weight-bold">Filter Description</label>
                                        <input type="text" class="form-control" id="description" name="description" 
                                            value="{{ request('description') }}" placeholder="Cari deskripsi...">
                                    </div>
                                    
                                    <div style="flex: 0 0 auto;">
                                        <button type="submit" class="btn btn-primary mb-0 me-2">
                                            <i class="fas fa-filter me-1"></i> Filter
                                        </button>
                                        <a href="{{ url('/trsbgt') }}" class="btn btn-secondary mb-0">
                                            <i class="fas fa-undo me-1"></i> Reset
                                        </a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="row px-4 py-2">
                        <div class="table-responsive">
                            <table class="table display" id="list_trsbgt">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th class="text-center" width="110">Action</th>
                                        <th class="text-center">No</th>
                                        <th class="text-center">Project</th>
                                        <th class="text-center">No. SPK</th>
                                        <th class="text-center">Lokasi</th>
                                        <th class="text-center">Description</th>
                                        <th class="text-center">Total Amount</th>
                                        <th class="text-center">Created At</th>
                                        <th class="text-center">Created By</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @forelse($data as $index => $item)
                                    <tr>
                                        <td class="text-sm font-weight-normal">
                                            <div class="btn-group">
                                                <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                    title="View Data"
                                                    onclick="window.location='{{ url('/trsbgt/show/' . encrypt($item->id)) }}'">
                                                    <i class="fas fa-eye"></i>
                                                    <span class="font-weight-bold"> View</span>
                                                </button>

                                                <button type="button"
                                                    class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                    <span class="visually-hidden">Toggle Dropdown</span>
                                                </button>

                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    @if($item->is_locked)
                                                        <button type="button" class="btn btn-sm btn-secondary mx-2 mb-0 w-90"
                                                            title="Transaksi terkunci"
                                                            onclick="showLockedAlert()">
                                                            <i class="fas fa-edit"></i>
                                                            <span class="font-weight-bold">Edit</span>
                                                        </button>
                                                    @elseif($item->is_closed)
                                                        <button type="button" class="btn btn-sm btn-secondary mx-2 mb-0 w-90"
                                                            title="Project sudah diselesaikan"
                                                            onclick="showClosedProjectAlert()">
                                                            <i class="fas fa-edit"></i>
                                                            <span class="font-weight-bold">Edit</span>
                                                        </button>
                                                    @else
                                                        <button type="button" class="btn btn-sm btn-warning mx-2 mb-0 w-90"
                                                            title="Edit Data"
                                                            onclick="window.location='{{ url('/trsbgt/edit/' . encrypt($item->id)) }}'">
                                                            <i class="fas fa-edit"></i>
                                                            <span class="font-weight-bold">Edit</span>
                                                        </button>
                                                    @endif


                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    @if(isset($user_login) && str_contains($user_login->idroles, 'supadm'))

                                                    @if($item->is_locked)
                                                        <button type="button" class="btn btn-sm btn-secondary mx-2 mb-0 w-90"
                                                            title="Transaksi terkunci"
                                                            onclick="showLockedAlert()">
                                                            <i class="fas fa-trash"></i>
                                                            <span class="font-weight-bold">Hapus</span>
                                                        </button>
                                                    @else
                                                        <button type="button" class="btn btn-sm btn-danger mx-2 mb-0 w-90"
                                                            title="Hapus Data"
                                                            onclick="deleteData('{{ encrypt($item->id) }}', '{{ $item->proyek }}')">
                                                            <i class="fas fa-trash"></i>
                                                            <span class="font-weight-bold">Hapus</span>
                                                        </button>
                                                    @endif

                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>

                                                    @if($item->is_locked)
                                                        <button type="button" class="btn btn-sm btn-success mx-2 mb-0 w-90"
                                                            title="Buka Kunci Transaksi"
                                                            onclick="toggleLock('{{ encrypt($item->id) }}', true)">
                                                            <i class="fas fa-lock-open"></i>
                                                            <span class="font-weight-bold">Buka Kunci</span>
                                                        </button>
                                                    @else
                                                        <button type="button" class="btn btn-sm btn-dark mx-2 mb-0 w-90"
                                                            title="Kunci Transaksi"
                                                            onclick="toggleLock('{{ encrypt($item->id) }}', false)">
                                                            <i class="fas fa-lock"></i>
                                                            <span class="font-weight-bold">Kunci Transaksi</span>
                                                        </button>
                                                    @endif

                                                    <li>
                                                        <hr class="dropdown-divider">
                                                    </li>
                                                    @endif
                                                </ul>
                                            </div>
                                        </td>

                                        <td>{{ $data->firstItem() + $index }}</td>
                                        <td class="text-sm font-weight-normal">
                                            {{ $item->proyek }}
                                            @if($item->is_locked)
                                                <span class="badge bg-danger ms-1 p-1" title="Transaksi terkunci"><i class="fas fa-lock"></i></span>
                                            @endif
                                        </td>
                                        <td class="text-sm font-weight-normal {{ $item->no_spk ? 'text-start' : 'text-center' }}">{{ $item->no_spk ?? '-' }}</td>
                                        <td class="text-sm font-weight-normal {{ $item->lokasi ? 'text-start' : 'text-center' }}">{{ $item->lokasi ?? '-' }}</td>
                                        <td class="text-sm font-weight-normal {{ $item->description ? 'text-start' : 'text-center' }}">{{ $item->description ?? '-' }}</td>
                                        <td class="text-sm font-weight-normal text-end fw-bold text-success">
                                            Rp {{ $item->amount_formatted }}
                                        </td>
                                        <td class="text-sm font-weight-normal">
                                            {{ \Carbon\Carbon::parse($item->created_at)->format('j-M-Y h:i A') }}
                                        </td>
                                        <td class="text-sm font-weight-normal {{ $item->user_create ? 'text-start' : 'text-center' }}">
                                            {{ $item->user_create ?? '-' }}
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="9" class="text-center">Tidak ada data</td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>

                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    Data {{ $data->firstItem() ?? 0 }} - {{ $data->lastItem() ?? 0 }} dari {{
                                    $data->total() }} data.
                                </div>
                                <div>
                                    {{ $data->appends(request()->query())->links('pagination::bootstrap-4') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Include Modals --}}
@include('transc.trsbgt.modals')

@endsection

@push('js')
<script>
    $(document).ready(function() {
    // CSRF Token Setup
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // DataTables Init
    const tableId = '#list_trsbgt';

    if (!$(tableId).length) return;

    function buildExportUrl(format) {
        const url = new URL(window.location.href);
        url.searchParams.set('export', format);
        return url.toString();
    }

    // Check if table has data rows (not just empty state)
    const hasData = $(tableId + ' tbody tr').length > 0 && !$(tableId + ' tbody tr td[colspan]').length;

    if (hasData) {
        const dt = $(tableId).DataTable({
            paging: false,
            info: false,
            searching: true,
            responsive: true,
            ordering: false,
            language: {
                search: "Cari :",
                lengthMenu: "Tampilkan _MENU_ baris",                                                                              
                zeroRecords: "Maaf - Data tidak ada",
                info: "Data _START_ - _END_ dari _TOTAL_",
                infoEmpty: "Tidak ada data",
                infoFiltered: "(pencarian dari _MAX_ data)"
            },
            dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',
            buttons: [
                {
                    text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                    action: function () {
                        window.location.href = buildExportUrl('excel');
                    }
                },
            ],
            initComplete: function () {
                var searchBarHtml = `
                    <div class="dataTables_filter d-flex justify-content-end">
                        <form method="GET" action="{{ url('/trsbgt') }}" class="d-flex">
                            @foreach(request()->except(['search', 'page']) as $key => $val)
                                <input type="hidden" name="{{ $key }}" value="{{ $val }}">
                            @endforeach
                            <input type="text" name="search" class="form-control me-2"
                                placeholder="Search..." value="{{ request('search') }}">
                        </form>
                    </div>
                `;
                $('.dataTables_filter').remove();
                $(searchBarHtml).insertAfter('.dt-buttons');
            }
        });

        $('.dt-button').addClass('btn btn-secondary').removeClass('dt-button');
    } else {
                                                                                                                                                     
        const buttonsHtml = `
            <div class="row d-fleox justify-content-between align-items-center mb-3">
                <div class="col-lg-12 d-flex justify-content-between align-items-center">
                    <div>
                        <button class="btn btn-secondary" onclick="window.location.href='${buildExportUrl('excel')}'">
                            <i class="fas fa-file-excel me-1 text-lg text-success"></i>
                            <span class="font-weight-bold"> Excel</span>
                        </button>
                    </div>
                    <div class="dataTables_filter d-flex justify-content-end">
                        <form method="GET" action="{{ url('/trsbgt') }}" class="d-flex">
                            @foreach(request()->except(['search', 'page']) as $key => $val)
                                <input type="hidden" name="{{ $key }}" value="{{ $val }}">
                            @endforeach
                            <input type="text" name="search" class="form-control me-2" placeholder="Search..." value="{{ request('search') }}">
                        </form>
                    </div>
                </div>
            </div>
        `;
        $(tableId).before(buttonsHtml);
    }
});

/**
 * Delete Data with AJAX
 */
function deleteData(id, name) {
    Swal.fire({
        title: 'Konfirmasi',
        text: `Apakah Anda yakin ingin menghapus data "${name}"?`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Ya, Hapus',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6'
    }).then((result) => {
        if (result.isConfirmed) {
            // Show loading
            Swal.fire({
                title: 'Menghapus...',
                text: 'Mohon tunggu',
                allowOutsideClick: false,
                showConfirmButton: false,
                willOpen: () => {
                    Swal.showLoading();
                }
            });

            // AJAX Delete Request
            $.ajax({
                url: '{{ url("/trsbgt") }}/' + id,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'DELETE'
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            title: 'Berhasil!',
                            text: response.message,
                            icon: 'success',
                            confirmButtonColor: '#028284'
                        }).then(() => {
                            window.location.reload();
                        });
                    } else {
                        Swal.fire({
                            title: 'Gagal!',
                            text: response.message,
                            icon: 'error',
                            confirmButtonColor: '#028284'
                        });
                    }
                },
                error: function(xhr) {
                    const errorMsg = xhr.responseJSON?.message || 'Terjadi kesalahan saat menghapus data';
                    
                    Swal.fire({
                        title: 'Error!',
                        text: errorMsg,
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }
    });
}

// ============================================
// MODAL & FILTER FUNCTIONS
// ============================================
let projectsData = [];
let isLoadingProjects = false;

$(document).ready(function() {
    loadProjects();

    // Search project in modal
    $('#searchProject').on('keyup', function() {
        const search = $(this).val().toLowerCase();
        renderProjectTable(projectsData.filter(p =>
            p.proyek.toLowerCase().includes(search) ||
            (p.lokasi && p.lokasi.toLowerCase().includes(search)) ||
            (p.no_spk && p.no_spk.toLowerCase().includes(search))
        ));
    });
});

function loadProjects() {
    isLoadingProjects = true;
    renderProjectTable(projectsData);

    $.ajax({
        url: '{{ url("/trsbgt/api/projects") }}',
        type: 'GET',
        success: function(response) {
            if (response.success) {
                projectsData = response.data;
            }
        },
        complete: function() {
            isLoadingProjects = false;
            renderProjectTable(projectsData);
        }
    });
}

function renderProjectTable(data) {
    let html = '';

    if (isLoadingProjects) {
        html = '<tr><td colspan="5" class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</td></tr>';
    } else if (data.length === 0) {
        html = '<tr><td colspan="5" class="text-center">Tidak ada data</td></tr>';
    } else {
        data.forEach((item, index) => {
            html += `
                <tr>
                    <td>
                        <button type="button" class="btn btn-primary btn-sm" onclick="selectProject(${item.id}, '${item.proyek}', '${item.no_spk || ''}')">
                            <i class="fas fa-check"></i> Pilih
                        </button>
                    </td>
                    <td class="text-center">${index + 1}</td>
                    <td  class="${item.proyek ? 'text-start' : 'text-center'}">${item.proyek}</td>
                    <td  class="${item.lokasi ? 'text-start' : 'text-center'}">${item.lokasi || '-'}</td>
                    <td  class="${item.no_spk ? 'text-start' : 'text-center'}">${item.no_spk || '-'}</td>
                </tr>
            `;
        });
    }
    $('#projectTableBody').html(html);
}

function openSelectProjectModal() {
    $('.modal').modal('hide');
    setTimeout(function() {
        $('#modalSelectProject').modal('show');
        $('#searchProject').val('').focus();
        renderProjectTable(projectsData);
    }, 300);
}

function selectProject(id, proyek, no_spk) {
    $('#project_id').val(id);
    const display = no_spk ? `${proyek} - ${no_spk}` : proyek;
    $('#project_display').val(display);
    $('#modalSelectProject').modal('hide');
}

function clearSettingsProject() {
    $('#project_id').val('');
    $('#project_display').val('');
}

/**
 * Toggle Kunci Transaksi (hanya supadm)
 */
function toggleLock(id, isLocked) {
    Swal.fire({
        title: isLocked ? 'Buka Kunci Transaksi?' : 'Kunci Transaksi?',
        text: isLocked
            ? 'Transaksi akan bisa diedit & dihapus kembali.'
            : 'Transaksi yang dikunci TIDAK bisa diedit & dihapus oleh semua user.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: isLocked ? 'Ya, Buka Kunci' : 'Ya, Kunci',
        cancelButtonText: 'Batal',
        confirmButtonColor: '#028284',
        cancelButtonColor: '#d33'
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Memproses...',
                allowOutsideClick: false,
                showConfirmButton: false,
                willOpen: () => Swal.showLoading()
            });

            $.ajax({
                url: '{{ url("/trsbgt/toggle-lock") }}/' + id,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {
                    Swal.fire({
                        title: response.success ? 'Berhasil!' : 'Gagal!',
                        text: response.message,
                        icon: response.success ? 'success' : 'error',
                        confirmButtonColor: '#028284'
                    }).then(() => {
                        if (response.success) window.location.reload();
                    });
                },
                error: function(xhr) {
                    const errorMsg = xhr.responseJSON?.message || 'Terjadi kesalahan sistem';
                    Swal.fire({
                        title: 'Error!',
                        text: errorMsg,
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                }
            });
        }
    });
}

/**
 * Show alert when trying to edit/delete a locked transaction
 */
function showLockedAlert() {
    Swal.fire({
        icon: 'warning',
        title: 'Transaksi Terkunci',
        text: 'Transaksi ini dikunci. Edit dan hapus tidak dapat dilakukan.',
        confirmButtonColor: '#d33'
    });
}

/**
 * Show alert when trying to edit a closed project
 */
function showClosedProjectAlert() {
    Swal.fire({
        icon: 'warning',
        title: 'Proyek Sudah Diselesaikan',
        text: 'Project sudah diselesaikan. Anda tidak dapat melakukan perubahan apapun pada transaksi ini.',
        confirmButtonColor: '#d33'
    });
}

</script>
@endpush