@extends('layouts.app')

@section('title', 'Daftar Pengajuan UKT')

@section('content')
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show">
    <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
@endif

@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show">
    <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
@endif

<div class="container-fluid px-3 px-md-4 px-lg-5"> 
    <!-- Header Section -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h4 h3-md text-gray-800 mb-1">Daftar Pengajuan UKT</h1>
        </div>
    </div>

    <!-- Stats Cards - Responsive -->
    <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3 mb-4">
        <div class="col">
            <div class="card border-left-primary shadow h-100">
                <div class="card-body p-2 p-sm-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Pengajuan</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['totalPengajuan'] ?? 0 }}</div>
                        </div>
                        <div class="icon-circle bg-primary text-white">
                            <i class="fas fa-file-alt"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col">
            <div class="card border-left-success shadow h-100">
                <div class="card-body p-2 p-sm-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Valid</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['valid'] ?? 0 }}</div>
                        </div>
                        <div class="icon-circle bg-success text-white">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col">
            <div class="card border-left-warning shadow h-100">
                <div class="card-body p-2 p-sm-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Menunggu</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['menunggu'] ?? 0 }}</div>
                        </div>
                        <div class="icon-circle bg-warning text-white">
                            <i class="fas fa-clock"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col">
            <div class="card border-left-danger shadow h-100">
                <div class="card-body p-2 p-sm-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">
                                Tidak Valid</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['tidak valid'] ?? 0 }}</div>
                        </div>
                        <div class="icon-circle bg-danger text-white">
                            <i class="fas fa-times-circle"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Card -->
    <div class="card shadow-sm border-0">
        <!-- Filter Section -->
        <div class="card-header bg-white py-3">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary mb-2 mb-md-0">
                    <i class="fas fa-list-alt mr-2"></i>Daftar Pengajuan
                </h6>
                
                <!-- Search Input - Moved to the right side -->
                <div class="input-group" style="max-width: 300px;">
                    <input type="text" id="searchInput" class="form-control" placeholder="Cari mahasiswa...">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button" id="searchButton">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Filter Form -->
            <div class="mt-3">
                <form method="GET" action="{{ route('admin.pengajuan') }}" class="row g-2">
                    <div class="col-md-4">
                        <select name="status_form_id" class="form-control" onchange="this.form.submit()">
                            <option value="">Semua Form</option>
                            @foreach($forms as $form)
                                <option value="{{ $form->id }}" {{ request('status_form_id') == $form->id ? 'selected' : '' }}>
                                    {{ $form->nama_form }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <select name="jenis_form" class="form-control" onchange="this.form.submit()">
                            <option value="">Semua Jenis</option>
                            <option value="penurunan" {{ request('jenis_form') == 'penurunan' ? 'selected' : '' }}>Penurunan UKT</option>
                            <option value="pengangsuran" {{ request('jenis_form') == 'pengangsuran' ? 'selected' : '' }}>Pengangsuran UKT</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <select name="status" class="form-control" onchange="this.form.submit()">
                            <option value="">Semua Status</option>
                            <option value="menunggu" {{ request('status') == 'menunggu' ? 'selected' : '' }}>Menunggu</option>
                            <option value="valid" {{ request('status') == 'valid' ? 'selected' : '' }}>Valid</option>
                            <option value="tidak valid" {{ request('status') == 'tidak valid' ? 'selected' : '' }}>Tidak Valid</option>
                        </select>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="card-body px-2 px-sm-3 px-md-4"> 
            <div class="table-responsive">
                <table class="table table-hover mb-0" id="dataTable">
                    <thead>
                        <tr>
                            <th width="50px">No</th>
                            <th>Mahasiswa</th>
                            <th>Jenis</th>
                            <th>Status</th>
                            <th>Tanggal</th>
                            <th width="120px" class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($pengajuan as $index => $p)
                        <tr>
                            <td class="align-middle">
                                {{ ($pengajuan->currentPage() - 1) * $pengajuan->perPage() + $loop->iteration }}
                            </td>
                            <td class="align-middle">
                                <div class="d-flex align-items-center">
                                    <div class="avatar-sm mr-3 flex-shrink-0">
                                        <span class="avatar-title bg-soft-primary rounded-circle d-flex align-items-center justify-content-center">
                                            <i class="fas fa-user text-primary"></i>
                                        </span>
                                    </div>
                                    <div class="flex-grow-1 min-width-0">
                                        <h6 class="mb-0 text-dark" title="{{ $p->mahasiswa->user->name ?? 'Data tidak tersedia' }}">
                                            {{ $p->mahasiswa->user->name ?? 'Data tidak tersedia' }}
                                        </h6>
                                        <small class="text-dark d-block text-truncate" title="NIM: {{ $p->mahasiswa->nim ?? '-' }}">
                                            NIM: {{ $p->mahasiswa->nim ?? '-' }}
                                        </small>
                                    </div>
                                </div>
                            </td>
                            <td class="align-middle">
                                <span class="badge badge-pill {{ $p->jenis_pengajuan == 'penurunan' ? 'badge-primary' : 'badge-info' }}">
                                    {{ ucfirst($p->jenis_pengajuan) }}
                                </span>
                            </td>
                            <td class="align-middle">
                                @if($p->status_validasi == 'menunggu')
                                    <span class="badge badge-pill badge-soft-warning py-1 px-3">
                                        <i class="fas fa-clock mr-1"></i>Menunggu
                                    </span>
                                @elseif($p->status_validasi == 'valid')
                                    <span class="badge badge-pill badge-soft-success py-1 px-3">
                                        <i class="fas fa-check-circle mr-1"></i>Valid
                                    </span>
                                @else
                                    <span class="badge badge-pill badge-soft-danger py-1 px-3">
                                        <i class="fas fa-times-circle mr-1"></i>Ditolak
                                    </span>
                                @endif
                            </td>
                            <td class="align-middle">
                                <small class="text-dark">
                                    <i class="far fa-calendar-alt mr-1"></i>
                                    {{ $p->created_at->format('d M Y') }}
                                </small>
                                <br>
                                <small class="text-dark">
                                    <i class="far fa-clock mr-1"></i>
                                    {{ $p->created_at->format('H:i') }}
                                </small>
                            </td>
                            <td class="align-middle text-center">
                                <div class="d-flex justify-content-center">
                                    <a href="{{ route('admin.pengajuan.detail', $p->id) }}" 
                                        class="btn btn-sm 
                                        @if($p->status_validasi == 'menunggu') btn-warning
                                        @elseif($p->status_validasi == 'valid') btn-success
                                        @else btn-danger @endif mr-1" 
                                        data-toggle="tooltip" 
                                        title="Lihat Detail">
                                        <i class="fas 
                                            @if($p->status_validasi == 'menunggu') fa-clock
                                            @elseif($p->status_validasi == 'valid') fa-check-circle
                                            @else fa-times-circle @endif"></i>
                                    </a>
                                    @if(auth()->user()->role === 'admin')
                                        <form action="{{ route('admin.pengajuan.destroy', $p->id) }}" method="POST" class="d-inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger btn-sm delete-btn">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center py-4">
                                <div class="empty-state">
                                    <h4 class="mt-3">Tidak ada data pengajuan</h4>
                                    <p class="text-dark">Belum ada pengajuan UKT yang tercatat</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            
            <!-- Pagination -->
            @if($pengajuan->hasPages())
            <div class="card-footer d-flex justify-content-between align-items-center">
                <div class="text-muted small">
                    Menampilkan <strong>{{ $pengajuan->firstItem() }}</strong> sampai <strong>{{ $pengajuan->lastItem() }}</strong> dari <strong>{{ $pengajuan->total() }}</strong> hasil
                </div>
                <div>
                    {{ $pengajuan->withQueryString()->links() }}
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
    .badge-soft-warning {
        color: #856404;
        background-color: #fff3cd;
    }
    .badge-soft-success {
        color: #155724;
        background-color: #d4edda;
    }
    .badge-soft-danger {
        color: #721c24;
        background-color: #f8d7da;
    }
    .empty-state {
        text-align: center;
        padding: 20px;
    }
    .icon-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    
    /* Responsive adjustments */
    @media (max-width: 767.98px) {
        .container-fluid {
            padding-left: 15px;
            padding-right: 15px;
        }
        
        .card-header {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .input-group {
            width: 100%;
            max-width: 100% !important;
            margin-top: 10px;
        }
    }
    
    @media (max-width: 575.98px) {
        .h4 {
            font-size: 1.25rem;
        }
        
        .card-body {
            padding: 0.75rem;
        }
        
        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }
    }
</style>
@endsection

@section('js')
<!-- Page level plugins -->
<script src="{{ asset('vendor/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
$(document).ready(function() {
    // Initialize DataTables
    var table = $('#dataTable').DataTable({
        responsive: true,
        autoWidth: false,
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Cari...",
            info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ entri",
            infoEmpty: "Menampilkan 0 sampai 0 dari 0 entri",
            infoFiltered: "(disaring dari _MAX_ total entri)",
            paginate: {
                first: "Pertama",
                last: "Terakhir",
                next: "Selanjutnya",
                previous: "Sebelumnya"
            }
        },
        dom: '<"top"<"float-right">>rt<"bottom"lip><"clear">'
    });

    // Search functionality
    $('#searchInput').keyup(function() {
        table.search($(this).val()).draw();
    });

    // Delete confirmation
    $('.delete-btn').click(function(e) {
        e.preventDefault();
        const form = $(this).closest('form');
        
        Swal.fire({
            title: 'Yakin ingin menghapus?',
            text: "Data tidak bisa dikembalikan!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Ya, hapus!'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });

    // Initialize tooltips
    $('[data-toggle="tooltip"]').tooltip();
});
</script>
@endsection