@extends('layouts.app')

@section('title', 'Detail Pengajuan - SIDOHIBAH')
@section('page-title', 'Detail Pengajuan')

@section('content')
<div class="pengajuan-fullwidth-container">
    <div class="row">
        <div class="col-lg-8">
        <!-- Informasi Pengajuan -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-file-alt me-2"></i>Detail Pengajuan
                    </h5>
                    <span class="badge bg-primary fs-6">{{ $pengajuan->nomor_pengajuan }}</span>
                </div>
            </div>
            <div class="card-body">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <i class="fas fa-exclamation-triangle me-2"></i>{{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label fw-bold">Judul Pengajuan</label>
                            <p class="mb-0">{{ $pengajuan->judul_pengajuan }}</p>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">Nama Sekolah</label>
                            <p class="mb-0">{{ $pengajuan->nama_sekolah }}</p>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">Alamat Sekolah</label>
                            <p class="mb-0">{{ $pengajuan->alamat_sekolah }}</p>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label fw-bold">Kategori Hibah</label>
                            <p class="mb-0">
                                <span class="badge bg-info">{{ $pengajuan->kategori_nama }}</span>
                            </p>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">Jumlah Hibah</label>
                            <p class="mb-0 fs-5 text-primary fw-bold">
                                Rp {{ number_format($pengajuan->jumlah_hibah, 0, ',', '.') }}
                            </p>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">Status</label>
                            <p class="mb-0">
                                @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'],
                                    ];
                                    $config = $statusConfig[$pengajuan->status] ?? ['class' => 'bg-secondary', 'text' => ucfirst($pengajuan->status)];
                                @endphp
                                <span class="badge {{ $config['class'] }} fs-6">{{ $config['text'] }}</span>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">Deskripsi Pengajuan</label>
                    <div class="border rounded p-3 bg-light">
                        {{ $pengajuan->deskripsi }}
                    </div>
                </div>

                @if($pengajuan->catatan)
                    <div class="mb-3">
                        <label class="form-label fw-bold">Catatan</label>
                        <div class="border rounded p-3 bg-light">
                            {{ $pengajuan->catatan }}
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <!-- Item Pengajuan -->
        <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-list me-2"></i>Item Pengajuan Hibah
                </h5>
            </div>
            <div class="card-body">
                @if($items->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th width="5%">No</th>
                                    <th width="30%">Nama Item</th>
                                    <th width="10%" class="text-center">Qty</th>
                                    <th width="15%" class="text-end">Harga Diajukan</th>
                                    <th width="15%" class="text-end">Total Diajukan</th>
                                    @if($items->whereNotNull('harga_disetujui')->count() > 0)
                                        <th width="15%" class="text-end">Harga Disetujui</th>
                                        <th width="15%" class="text-end">Total Disetujui</th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($items as $item)
                                    <tr>
                                        <td>{{ $item->nomor_item }}</td>
                                        <td>{{ $item->nama_item }}</td>
                                        <td class="text-center">{{ number_format($item->qty) }}</td>
                                        <td class="text-end">Rp {{ number_format($item->harga_diajukan, 0, ',', '.') }}</td>
                                        <td class="text-end">
                                            <strong>Rp {{ number_format($item->total_diajukan, 0, ',', '.') }}</strong>
                                        </td>
                                        @if($items->whereNotNull('harga_disetujui')->count() > 0)
                                            <td class="text-end">
                                                @if($item->harga_disetujui)
                                                    Rp {{ number_format($item->harga_disetujui, 0, ',', '.') }}
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                            <td class="text-end">
                                                @if($item->total_disetujui)
                                                    <strong class="text-success">Rp {{ number_format($item->total_disetujui, 0, ',', '.') }}</strong>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                        @endif
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot class="table-light">
                                <tr>
                                    <th colspan="4" class="text-end">Total Pengajuan:</th>
                                    <th class="text-end text-primary">
                                        Rp {{ number_format($items->sum('total_diajukan'), 0, ',', '.') }}
                                    </th>
                                    @if($items->whereNotNull('harga_disetujui')->count() > 0)
                                        <th class="text-end">Total Disetujui:</th>
                                        <th class="text-end text-success">
                                            @if($items->sum('total_disetujui') > 0)
                                                Rp {{ number_format($items->sum('total_disetujui'), 0, ',', '.') }}
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </th>
                                    @endif
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                @else
                    <div class="text-center py-4">
                        <i class="fas fa-list fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">Belum ada item pengajuan</h5>
                        <p class="text-muted">Item pengajuan akan muncul setelah ditambahkan melalui wizard pengajuan.</p>
                    </div>
                @endif
            </div>
        </div>

        <!-- Dokumen -->
        <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-paperclip me-2"></i>Dokumen Terlampir
                </h5>
            </div>
            <div class="card-body">
                @if($dokumen->count() > 0)
                    <div class="row">
                        @foreach($dokumen as $doc)
                            @php
                                $fileExtension = strtolower(pathinfo($doc->nama_file, PATHINFO_EXTENSION));
                                $isPdf = $fileExtension === 'pdf';
                                $isDoc = in_array($fileExtension, ['doc', 'docx']);
                                $isImage = in_array($fileExtension, ['jpg', 'jpeg', 'png', 'gif']);
                                
                                // Determine icon
                                if ($isPdf) {
                                    $fileIcon = 'fas fa-file-pdf text-danger';
                                } elseif ($isDoc) {
                                    $fileIcon = 'fas fa-file-word text-primary';
                                } elseif ($isImage) {
                                    $fileIcon = 'fas fa-file-image text-success';
                                } else {
                                    $fileIcon = 'fas fa-file text-secondary';
                                }
                            @endphp
                            <div class="col-md-6 mb-3">
                                <div class="card border">
                                    <div class="card-body">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                <i class="{{ $fileIcon }} fa-2x"></i>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h6 class="mb-1">{{ $doc->nama_file }}</h6>
                                                <small class="text-muted">
                                                    {{ number_format($doc->ukuran / 1024, 2) }} KB • 
                                                    {{ \Carbon\Carbon::parse($doc->uploaded_at)->format('d/m/Y H:i') }}
                                                </small>
                                            </div>
                                            <div class="flex-shrink-0">
                                                <div class="btn-group" role="group">
                                                    @if($isPdf)
                                                        <a href="{{ route('pengajuan.documents.preview', [$pengajuan->id, $doc->id]) }}" 
                                                           target="_blank" 
                                                           class="btn btn-sm btn-outline-info" 
                                                           title="Lihat Preview PDF">
                                                            <i class="fas fa-eye"></i>
                                                        </a>
                                                    @endif
                                                    <a href="{{ route('pengajuan.documents.download', [$pengajuan->id, $doc->id]) }}" 
                                                       class="btn btn-sm btn-outline-primary" 
                                                       title="Download File">
                                                        <i class="fas fa-download"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-4">
                        <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
                        <p class="text-muted">Tidak ada dokumen terlampir</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <!-- Timeline -->
        <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-history me-2"></i>Timeline
                </h5>
            </div>
            <div class="card-body">
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-marker bg-primary"></div>
                        <div class="timeline-content">
                            <h6 class="timeline-title">Pengajuan Dibuat</h6>
                            <p class="timeline-text">
                                Oleh: <strong>{{ $pengajuan->user_name ?? 'Unknown User' }}</strong><br>
                                {{ \Carbon\Carbon::parse($pengajuan->created_at)->format('d F Y, H:i') }}
                            </p>
                        </div>
                    </div>
                    
                    @if($pengajuan->status !== 'draft')
                        <div class="timeline-item">
                            <div class="timeline-marker bg-warning"></div>
                            <div class="timeline-content">
                                <h6 class="timeline-title">Dikirim untuk Verifikasi</h6>
                                <p class="timeline-text">
                                    Oleh: <strong>{{ $pengajuan->user_name ?? 'Unknown User' }}</strong><br>
                                    {{ \Carbon\Carbon::parse($pengajuan->tanggal_pengajuan)->format('d F Y, H:i') }}
                                </p>
                            </div>
                        </div>
                    @endif
                    
                    @if($verifikasi)
                        <div class="timeline-item">
                            <div class="timeline-marker bg-info"></div>
                            <div class="timeline-content">
                                <h6 class="timeline-title">Terverifikasi</h6>
                                <p class="timeline-text">
                                    Oleh: <strong>{{ $verifikasi->verifikator_name }}</strong><br>
                                    {{ \Carbon\Carbon::parse($verifikasi->tanggal_verifikasi)->format('d F Y, H:i') }}
                                    @if($verifikasi->catatan)
                                        <br><small class="text-muted"><i class="fas fa-comment me-1"></i>{{ $verifikasi->catatan }}</small>
                                    @endif
                                </p>
                            </div>
                        </div>
                    @endif
                    
                    @if($validasi)
                        <div class="timeline-item">
                            <div class="timeline-marker bg-success"></div>
                            <div class="timeline-content">
                                <h6 class="timeline-title">Tervalidasi</h6>
                                <p class="timeline-text">
                                    Oleh: <strong>{{ $validasi->validator_name }}</strong><br>
                                    {{ \Carbon\Carbon::parse($validasi->tanggal_validasi)->format('d F Y, H:i') }}
                                    @if($validasi->catatan)
                                        <br><small class="text-muted"><i class="fas fa-comment me-1"></i>{{ $validasi->catatan }}</small>
                                    @endif
                                </p>
                            </div>
                        </div>
                    @endif
                    
                    @if($pengajuan->status === 'approved')
                        <div class="timeline-item">
                            <div class="timeline-marker bg-success"></div>
                            <div class="timeline-content">
                                <h6 class="timeline-title">Disetujui</h6>
                                <p class="timeline-text">
                                    Oleh: <strong>Sistem</strong><br>
                                    {{ \Carbon\Carbon::parse($pengajuan->tanggal_approval ?? $pengajuan->updated_at)->format('d F Y, H:i') }}
                                </p>
                            </div>
                        </div>
                    @endif
                    
                    @if($pengajuan->status === 'rejected')
                        <div class="timeline-item">
                            <div class="timeline-marker bg-danger"></div>
                            <div class="timeline-content">
                                <h6 class="timeline-title">Ditolak</h6>
                                <p class="timeline-text">
                                    Oleh: <strong>Sistem</strong><br>
                                    {{ \Carbon\Carbon::parse($pengajuan->updated_at)->format('d F Y, H:i') }}
                                    @if($pengajuan->catatan)
                                        <br><small class="text-muted"><i class="fas fa-comment me-1"></i>{{ $pengajuan->catatan }}</small>
                                    @endif
                                </p>
                            </div>
                        </div>
                    @endif
                    
                    @if($pengajuan->status === 'progress')
                        <div class="timeline-item">
                            <div class="timeline-marker bg-primary"></div>
                            <div class="timeline-content">
                                <h6 class="timeline-title">Dalam Proses</h6>
                                <p class="timeline-text">
                                    Oleh: <strong>Sistem</strong><br>
                                    {{ \Carbon\Carbon::parse($pengajuan->updated_at)->format('d F Y, H:i') }}
                                </p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white">
                <h5 class="card-title mb-0">
                    <i class="fas fa-cogs me-2"></i>Aksi
                </h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    {{-- Only owner can edit, submit, and delete their own draft/rejected pengajuan --}}
                    @if(($pengajuan->status === 'draft' || $pengajuan->status === 'rejected') && $pengajuan->user_id == auth()->id())
                        <a href="{{ route('pengajuan.edit', $pengajuan->id) }}" class="btn btn-primary">
                            <i class="fas fa-edit me-2"></i>Edit Pengajuan
                        </a>
                        
                        <form method="POST" action="{{ route('pengajuan.submit', $pengajuan->id) }}" 
                              onsubmit="return confirm('Kirim pengajuan untuk verifikasi?')">
                            @csrf
                            <button type="submit" class="btn btn-success w-100">
                                <i class="fas fa-paper-plane me-2"></i>Kirim untuk Verifikasi
                            </button>
                        </form>
                        
                        <form method="POST" action="{{ route('pengajuan.destroy', $pengajuan->id) }}" 
                              onsubmit="return confirm('Hapus pengajuan ini?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger w-100">
                                <i class="fas fa-trash me-2"></i>Hapus Pengajuan
                            </button>
                        </form>
                    @endif
                    
                    {{-- Admin Status Update Button --}}
                    @if(auth()->user() && in_array(auth()->user()->role, ['admin', 'super_admin']))
                        <button type="button" class="btn btn-warning" 
                                onclick="openStatusModal({{ $pengajuan->id }}, '{{ $pengajuan->status }}', '{{ $pengajuan->catatan ?? '' }}')">
                            <i class="fas fa-cog me-2"></i>Update Status
                        </button>
                    @endif
                    
                    <a href="{{ route('pengajuan.wizard.summary', $pengajuan->id) }}" class="btn btn-info">
                        <i class="fas fa-eye me-2"></i>Lihat Summary
                    </a>
                    
                    <a href="{{ route('pengajuan.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Kembali ke Daftar
                    </a>
                </div>
            </div>
        </div>
    </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>
// 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

@push('styles')
<style>
/* Pengajuan Full Width */
.main-content {
    padding: 0 !important;
    margin-left: var(--sidebar-width) !important;
    margin-top: var(--topbar-height) !important;
    width: calc(100vw - var(--sidebar-width)) !important;
}

.content-body {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.pengajuan-fullwidth-container {
    width: 100% !important;
    padding: 2rem !important;
    background: #f8f9fa !important;
    min-height: calc(100vh - 120px) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .pengajuan-fullwidth-container {
        padding: 1rem !important;
    }
}

@media (max-width: 576px) {
    .pengajuan-fullwidth-container {
        padding: 0.5rem !important;
    }
}

.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e9ecef;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-marker {
    position: absolute;
    left: -22px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #e9ecef;
}

.timeline-content {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid #007bff;
}

.timeline-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #495057;
}

.timeline-text {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 0;
}
</style>
@endpush