@extends('layouts.app')

@section('title', 'Daftar Pengajuan - SIDOHIBAH')
@section('page-title', 'Daftar Pengajuan Hibah')

@section('content')
<style>
/* Prevent overflow issues */
.row {
    margin-left: 0;
    margin-right: 0;
}

.col-12 {
    padding-left: 0;
    padding-right: 0;
}

.card {
    max-width: 100%;
    overflow-x: hidden;
}

.card-body {
    overflow-x: hidden;
}

/* Form controls */
.form-control, .form-select {
    max-width: 100%;
}

/* Table responsive */
.table-responsive {
    overflow-x: auto;
    max-width: 100%;
}

.table th, .table td {
    white-space: nowrap;
    vertical-align: middle;
}

.table td:nth-child(2) {
    white-space: normal;
    min-width: 200px;
}

.table td:nth-child(3) {
    white-space: normal;
    min-width: 180px;
}

.btn-group .btn {
    margin-right: 2px;
}

.btn-group .btn:last-child {
    margin-right: 0;
}

@media (max-width: 768px) {
    .table-responsive {
        font-size: 0.875rem;
    }
    
    .btn-group .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}
</style>
<div class="row">
    <div class="col-12">
        <!-- Action Buttons -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="card-title mb-0">
                            <i class="fas fa-list me-2"></i>Daftar Pengajuan Hibah
                        </h5>
                        <p class="text-muted mb-0">Kelola pengajuan hibah Anda</p>
                    </div>
                    {{-- Only user role can create new pengajuan --}}
                    @if(auth()->user() && auth()->user()->role === 'user')
                        <div>
                            <a href="{{ route('pengajuan.create') }}" class="btn btn-primary">
                                <i class="fas fa-plus me-2"></i>Buat Pengajuan Baru
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Filter & Search -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white">
                <h5 class="card-title mb-0">
                    <i class="fas fa-filter me-2"></i>Filter & Pencarian
                </h5>
            </div>
            <div class="card-body">
                <form method="GET" action="{{ route('pengajuan.index') }}" id="filterForm">
                    <!-- Basic Filters Row -->
                    <div class="row g-2 mb-3">
                        <!-- Search -->
                        <div class="col-lg-4 col-md-6">
                            <label for="search" class="form-label small">Pencarian</label>
                            <input type="text" class="form-control form-control-sm" id="search" name="search" 
                                   placeholder="Cari nomor, judul, sekolah..." 
                                   value="{{ request('search') }}">
                        </div>
                        
                        <!-- Status Filter -->
                        <div class="col-lg-2 col-md-3">
                            <label for="status" class="form-label small">Status</label>
                            <select class="form-select form-select-sm" id="status" name="status">
                                <option value="">Semua</option>
                                @foreach($statusOptions as $value => $label)
                                    <option value="{{ $value }}" {{ request('status') == $value ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        
                        <!-- Kategori Filter -->
                        <div class="col-lg-3 col-md-6">
                            <label for="kategori" class="form-label small">Kategori</label>
                            <select class="form-select form-select-sm" id="kategori" name="kategori">
                                <option value="">Semua Kategori</option>
                                @foreach($kategoriHibah as $kategori)
                                    <option value="{{ $kategori->id }}" {{ request('kategori') == $kategori->id ? 'selected' : '' }}>
                                        {{ $kategori->nama }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        
                        <!-- Action Buttons -->
                        <div class="col-lg-3 col-md-12">
                            <label class="form-label small">&nbsp;</label>
                            <div class="d-flex gap-1">
                                <button type="submit" class="btn btn-primary btn-sm">
                                    <i class="fas fa-search"></i>
                                </button>
                                <a href="{{ route('pengajuan.index') }}" class="btn btn-outline-secondary btn-sm">
                                    <i class="fas fa-times"></i>
                                </a>
                                <button type="button" class="btn btn-outline-info btn-sm" id="toggleAdvanced">
                                    <i class="fas fa-cog"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Advanced Filters (Hidden by default) -->
                    <div class="row g-2 mt-2" id="advancedFilters" style="display: none;">
                        <div class="col-lg-3 col-md-6">
                            <label class="form-label small">Tanggal Mulai</label>
                            <input type="date" class="form-control form-control-sm" id="tanggal_mulai" name="tanggal_mulai" 
                                   value="{{ request('tanggal_mulai') }}">
                        </div>
                        
                        <div class="col-lg-3 col-md-6">
                            <label class="form-label small">Tanggal Akhir</label>
                            <input type="date" class="form-control form-control-sm" id="tanggal_akhir" name="tanggal_akhir" 
                                   value="{{ request('tanggal_akhir') }}">
                        </div>
                        
                        <div class="col-lg-3 col-md-6">
                            <label class="form-label small">Jumlah Min (Rp)</label>
                            <input type="number" class="form-control form-control-sm" id="jumlah_min" name="jumlah_min" 
                                   placeholder="0" value="{{ request('jumlah_min') }}" min="0">
                        </div>
                        
                        <div class="col-lg-3 col-md-6">
                            <label class="form-label small">Jumlah Max (Rp)</label>
                            <input type="number" class="form-control form-control-sm" id="jumlah_max" name="jumlah_max" 
                                   placeholder="100000000" value="{{ request('jumlah_max') }}" min="0">
                        </div>
                        
                        <div class="col-lg-6 col-md-6">
                            <label class="form-label small">Urutkan Berdasarkan</label>
                            <select class="form-select form-select-sm" name="sort_by">
                                <option value="created_at" {{ request('sort_by') == 'created_at' ? 'selected' : '' }}>Tanggal Dibuat</option>
                                <option value="judul_pengajuan" {{ request('sort_by') == 'judul_pengajuan' ? 'selected' : '' }}>Judul</option>
                                <option value="nama_sekolah" {{ request('sort_by') == 'nama_sekolah' ? 'selected' : '' }}>Nama Sekolah</option>
                                <option value="jumlah_hibah" {{ request('sort_by') == 'jumlah_hibah' ? 'selected' : '' }}>Jumlah Hibah</option>
                                <option value="status" {{ request('sort_by') == 'status' ? 'selected' : '' }}>Status</option>
                            </select>
                        </div>
                        
                        <div class="col-lg-6 col-md-6">
                            <label class="form-label small">Urutan</label>
                            <select class="form-select form-select-sm" name="sort_order">
                                <option value="desc" {{ request('sort_order') == 'desc' ? 'selected' : '' }}>Terbaru</option>
                                <option value="asc" {{ request('sort_order') == 'asc' ? 'selected' : '' }}>Terlama</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h6 class="mb-0">Daftar Pengajuan Hibah</h6>
                <small class="text-muted">
                    {{ $pengajuan->firstItem() ?? 0 }}-{{ $pengajuan->lastItem() ?? 0 }} dari {{ $pengajuan->total() }} pengajuan
                </small>
            </div>
            <a href="{{ route('pengajuan.create') }}" class="btn btn-primary btn-sm">
                <i class="fas fa-plus me-1"></i>Baru
            </a>
        </div>

        <!-- Pengajuan List -->
        <div class="card border-0 shadow-sm">
            <div class="card-body p-0">
                @if($pengajuan->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 20%;">No. Pengajuan & Tanggal</th>
                                    <th style="width: 30%;">Judul & Pengaju</th>
                                    <th style="width: 20%;">Sekolah & Kategori</th>
                                    <th style="width: 15%;">Jumlah Hibah</th>
                                    <th style="width: 10%;">Status</th>
                                    <th style="width: 15%;">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($pengajuan as $item)
                                    <tr>
                                        <td>
                                            <div class="mb-1">
                                                <strong class="text-primary">{{ $item->nomor_pengajuan }}</strong>
                                            </div>
                                            <small class="text-muted">
                                                <i class="fas fa-calendar me-1"></i>
                                                {{ \Carbon\Carbon::parse($item->created_at)->format('d/m/Y') }}
                                            </small>
                                        </td>
                                        <td>
                                            <div class="mb-1">
                                                <div class="text-truncate fw-semibold" style="max-width: 200px;" title="{{ $item->judul_pengajuan }}">
                                                    {{ $item->judul_pengajuan }}
                                                </div>
                                            </div>
                                            <div class="text-muted small">
                                                <i class="fas fa-user me-1"></i>
                                                {{ $item->user_name }}
                                            </div>
                                        </td>
                                        <td>
                                            <div class="mb-1">
                                                <div class="fw-bold text-dark" style="word-wrap: break-word; white-space: normal; max-width: 150px;">
                                                    <i class="fas fa-school me-1"></i>
                                                    {{ $item->nama_sekolah }}
                                                </div>
                                            </div>
                                            <div class="mb-1">
                                                @php
                                                    $kategoriColors = [
                                                        'Pembangunan Fisik' => ['bg' => '#007bff', 'text' => '#fff'],
                                                        'Pembelian Peralatan' => ['bg' => '#28a745', 'text' => '#fff'],
                                                        'Pelatihan dan Pengembangan' => ['bg' => '#ffc107', 'text' => '#000'],
                                                        'Operasional Sekolah' => ['bg' => '#dc3545', 'text' => '#fff'],
                                                        'Teknologi Informasi' => ['bg' => '#6f42c1', 'text' => '#fff'],
                                                        'Lain-lain' => ['bg' => '#6c757d', 'text' => '#fff']
                                                    ];
                                                    $color = $kategoriColors[$item->kategori_nama] ?? ['bg' => '#6c757d', 'text' => '#fff'];
                                                @endphp
                                                <span class="badge small" style="background-color: {{ $color['bg'] }}; color: {{ $color['text'] }}; font-weight: normal !important;">{{ $item->kategori_nama }}</span>
                                            </div>
                                        </td>
                                        <td>
                                            <strong class="text-success">Rp {{ number_format($item->jumlah_hibah, 0, ',', '.') }}</strong>
                                        </td>
                                        <td>
                                            @php
                                                $statusConfig = [
                                                    'draft' => ['class' => 'bg-secondary', 'text' => 'Draft'],
                                                    'pending' => ['class' => 'bg-warning', 'text' => 'Menunggu Verifikasi'],
                                                    'verified' => ['class' => 'bg-info', 'text' => 'Terverifikasi'],
                                                    'validated' => ['class' => 'bg-primary', 'text' => 'Tervalidasi'],
                                                    'approved' => ['class' => 'bg-success', 'text' => 'Disetujui'],
                                                    'rejected' => ['class' => 'bg-danger', 'text' => 'Ditolak'],
                                                    'progress' => ['class' => 'bg-primary', 'text' => 'Progress'],
                                                ];
                                                $config = $statusConfig[$item->status] ?? ['class' => 'bg-secondary', 'text' => ucfirst($item->status)];
                                            @endphp
                                            <span class="badge {{ $config['class'] }}">{{ $config['text'] }}</span>
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('pengajuan.show', $item->id) }}" 
                                                   class="btn btn-sm btn-outline-primary" title="Lihat Detail">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                
                                                {{-- Only owner can edit, submit, and delete their own draft pengajuan --}}
                                                @if($item->status === 'draft' && $item->user_id == auth()->id())
                                                    <a href="{{ route('pengajuan.edit', $item->id) }}" 
                                                       class="btn btn-sm btn-outline-warning" title="Edit">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    
                                                    <form method="POST" action="{{ route('pengajuan.submit', $item->id) }}" 
                                                          class="d-inline" onsubmit="return confirm('Kirim pengajuan untuk verifikasi?')">
                                                        @csrf
                                                        <button type="submit" class="btn btn-sm btn-outline-success" title="Kirim">
                                                            <i class="fas fa-paper-plane"></i>
                                                        </button>
                                                    </form>
                                                    
                                                    <form method="POST" action="{{ route('pengajuan.destroy', $item->id) }}" 
                                                          class="d-inline" onsubmit="return confirm('Hapus pengajuan ini?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Hapus">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                @endif
                                                
                                                {{-- Admin Status Update Button --}}
                                                @if(auth()->user() && in_array(auth()->user()->role, ['admin', 'super_admin']))
                                                    <button type="button" class="btn btn-sm btn-outline-info" 
                                                            title="Update Status" 
                                                            onclick="openStatusModal({{ $item->id }}, '{{ $item->status }}', '{{ addslashes($item->catatan ?? '') }}')">
                                                        <i class="fas fa-cog"></i>
                                                    </button>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-5">
                        <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">Belum ada pengajuan</h5>
                        <p class="text-muted">Mulai buat pengajuan hibah pertama Anda</p>
                        <a href="{{ route('pengajuan.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i>Buat Pengajuan
                        </a>
                    </div>
                @endif
            </div>
            
            <!-- Pagination -->
            @if($pengajuan->hasPages())
                <div class="card-footer bg-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted">
                                Menampilkan {{ $pengajuan->firstItem() ?? 0 }} - {{ $pengajuan->lastItem() ?? 0 }} 
                                dari {{ $pengajuan->total() }} pengajuan
                            </small>
                        </div>
                        <nav aria-label="Pagination Navigation">
                            <ul class="pagination pagination-sm mb-0">
                                {{-- Previous Page Link --}}
                                @if ($pengajuan->onFirstPage())
                                    <li class="page-item disabled">
                                        <span class="page-link">
                                            <i class="fas fa-chevron-left"></i>
                                        </span>
                                    </li>
                                @else
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $pengajuan->appends(request()->query())->previousPageUrl() }}" aria-label="Previous">
                                            <i class="fas fa-chevron-left"></i>
                                        </a>
                                    </li>
                                @endif

                                {{-- Pagination Elements --}}
                                @foreach ($pengajuan->getUrlRange(1, $pengajuan->lastPage()) as $page => $url)
                                    @if ($page == $pengajuan->currentPage())
                                        <li class="page-item active">
                                            <span class="page-link">{{ $page }}</span>
                                        </li>
                                    @else
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                                        </li>
                                    @endif
                                @endforeach

                                {{-- Next Page Link --}}
                                @if ($pengajuan->hasMorePages())
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $pengajuan->appends(request()->query())->nextPageUrl() }}" aria-label="Next">
                                            <i class="fas fa-chevron-right"></i>
                                        </a>
                                    </li>
                                @else
                                    <li class="page-item disabled">
                                        <span class="page-link">
                                            <i class="fas fa-chevron-right"></i>
                                        </span>
                                    </li>
                                @endif
                            </ul>
                        </nav>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Status Update Modal -->
<div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="statusModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="statusModalLabel">Update Status Pengajuan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="statusUpdateForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="statusSelect" class="form-label">Status Baru</label>
                        <select class="form-select" id="statusSelect" name="status" required>
                            <option value="draft">Draft</option>
                            <option value="pending">Menunggu Verifikasi</option>
                            {{-- Admin tidak bisa set ke verified dan validated --}}
                            {{-- <option value="verified">Terverifikasi</option> --}}
                            {{-- <option value="validated">Tervalidasi</option> --}}
                            <option value="approved">Disetujui</option>
                            <option value="rejected">Ditolak</option>
                            <option value="progress">Progress</option>
                        </select>
                        <small class="form-text text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            <strong>Catatan:</strong> Status "Terverifikasi" dan "Tervalidasi" hanya dapat diubah oleh Tim Teknis dan Kepala Bidang.
                        </small>
                    </div>
                    <div class="mb-3">
                        <label for="catatanInput" class="form-label">Catatan (Opsional)</label>
                        <textarea class="form-control" id="catatanInput" name="catatan" rows="3" 
                                  placeholder="Masukkan catatan untuk perubahan status..."></textarea>
                    </div>
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Perhatian:</strong> Perubahan status akan tercatat dalam log sistem dan dapat mempengaruhi alur kerja pengajuan.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary" id="updateStatusBtn">
                        <i class="fas fa-save me-2"></i>Update Status
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-submit form on filter change
    const filterSelects = document.querySelectorAll('#status, #kategori, #tanggal_mulai, #tanggal_akhir');
    filterSelects.forEach(select => {
        select.addEventListener('change', function() {
            this.form.submit();
        });
    });

    // Toggle advanced filters
    const toggleAdvanced = document.getElementById('toggleAdvanced');
    const advancedFilters = document.getElementById('advancedFilters');
    
    if (toggleAdvanced && advancedFilters) {
        toggleAdvanced.addEventListener('click', function() {
            if (advancedFilters.style.display === 'none') {
                advancedFilters.style.display = 'block';
                this.innerHTML = '<i class="fas fa-cog me-2"></i>Sembunyikan Filter Lanjutan';
            } else {
                advancedFilters.style.display = 'none';
                this.innerHTML = '<i class="fas fa-cog me-2"></i>Filter Lanjutan';
            }
        });
    }

    // Format currency inputs
    const amountInputs = document.querySelectorAll('#jumlah_min, #jumlah_max');
    amountInputs.forEach(input => {
        input.addEventListener('input', function() {
            let value = this.value.replace(/[^\d]/g, '');
            this.value = value;
        });
    });

    // Auto-submit on search input (with delay)
    const searchInput = document.getElementById('search');
    let searchTimeout;
    
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                this.form.submit();
            }, 500); // 500ms delay
        });
    }
});

// Global variables for status update
let currentPengajuanId = null;

// Function to open status modal
function openStatusModal(pengajuanId, currentStatus, currentCatatan) {
    currentPengajuanId = pengajuanId;
    
    // Set current status
    document.getElementById('statusSelect').value = currentStatus;
    
    // Set current catatan
    document.getElementById('catatanInput').value = currentCatatan;
    
    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('statusModal'));
    modal.show();
}

// Handle status update form submission
document.getElementById('statusUpdateForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    if (!currentPengajuanId) {
        alert('Error: ID pengajuan tidak ditemukan');
        return;
    }
    
    const formData = new FormData(this);
    const updateBtn = document.getElementById('updateStatusBtn');
    const originalText = updateBtn.innerHTML;
    
    // Disable button and show loading
    updateBtn.disabled = true;
    updateBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Updating...';
    
    // Send AJAX request
    fetch(`/pengajuan/${currentPengajuanId}/update-status`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            status: formData.get('status'),
            catatan: formData.get('catatan')
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Show success message
            showAlert('success', data.message);
            
            // Close modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('statusModal'));
            modal.hide();
            
            // Reload page to show updated status
            setTimeout(() => {
                window.location.reload();
            }, 1000);
        } else {
            showAlert('danger', data.message || 'Terjadi kesalahan saat mengupdate status');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('danger', 'Terjadi kesalahan saat mengupdate status');
    })
    .finally(() => {
        // Re-enable button
        updateBtn.disabled = false;
        updateBtn.innerHTML = originalText;
    });
});

// Function to show alert messages
function showAlert(type, message) {
    // Remove existing alerts
    const existingAlerts = document.querySelectorAll('.alert-dismissible');
    existingAlerts.forEach(alert => alert.remove());
    
    // Create new alert
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    `;
    
    // Insert at top of content
    const content = document.querySelector('.row');
    content.insertBefore(alertDiv, content.firstChild);
    
    // Auto-dismiss after 5 seconds
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 5000);
}
</script>
@endpush