@extends('layouts.app')

@section('title', 'Manajemen Formulir Pendaftaran Pengajuan UKT')

@section('content')

@if(session('success'))
<div class="alert-mega alert alert-success alert-dismissible fade show" role="alert">
    <div class="d-flex align-items-center">
        <i class="bi bi-check-circle-fill me-3 fs-1"></i>
        <div>
            <h4 class="alert-heading mb-1">Berhasil!</h4>
            <p class="mb-0 fs-5">{{ session('success') }}</p>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
</div>
@endif

<div class="container-fluid px-0">
    <!-- Header Section -->
    <div class="dashboard-header p-4 rounded-0 shadow-sm" style="background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);">
        <div class="container-fluid px-4">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="fw-bold text-white mb-2">
                        <i class="bi bi-file-earmark-text me-2"></i> Manajemen Formulir UKT
                    </h2>
                    <p class="mb-0 text-white opacity-75">Kelola formulir pendaftaran Uang Kuliah Tunggal</p>
                </div>
                
                @if(auth()->user()->role == 'karyawan')
                <div class="d-flex gap-2">
                    <a href="{{ route('form.create') }}" class="btn bg-white text-dark fw-bold rounded-pill px-4 shadow-sm">
                        <i class="fa fa-plus me-2"></i> Buat Form Baru
                    </a>
                    <button class="btn btn-info rounded-circle ml-2" data-bs-toggle="modal" data-bs-target="#helpModal">
                        <i class="fa fa-question"></i>
                    </button>
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="container-fluid px-4 py-4">
        <!-- Stats Cards -->
        <div class="row g-3 mb-4">
            <div class="col-md-4">
                <div class="card border-0 shadow-sm rounded-3 h-100 hover-lift">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center">
                            <div class="icon-shape bg-light-primary text-primary rounded-3 me-3 p-3">
                                <i class="bi bi-files fs-4"></i>
                            </div>
                            <div>
                                <h6 class="mb-1 text-dark fw-bold">Total Formulir</h6>
                                <h3 class="mb-0 fw-bold text-dark">{{ $forms->count() }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 shadow-sm rounded-3 h-100 hover-lift">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center">
                            <div class="icon-shape bg-light-success text-success rounded-3 me-3 p-3">
                                <i class="bi bi-unlock fs-4"></i>
                            </div>
                            <div>
                                <h6 class="mb-1 text-dark fw-bold">Formulir Aktif</h6>
                                <h3 class="mb-0 fw-bold text-dark">{{ $forms->where('status', 'Dibuka')->count() }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 shadow-sm rounded-3 h-100 hover-lift">
                    <div class="card-body p-3">
                        <div class="d-flex align-items-center">
                            <div class="icon-shape bg-light-warning text-warning rounded-3 me-3 p-3">
                                <i class="bi bi-lock fs-4"></i>
                            </div>
                            <div>
                                <h6 class="mb-1 text-dark fw-bold">Formulir Nonaktif</h6>
                                <h3 class="mb-0 fw-bold text-dark">{{ $forms->where('status', 'Ditutup')->count() }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Card -->
        <div class="card border-0 shadow-lg rounded-3 overflow-hidden hover-lift">
            <div class="card-header bg-white py-3 border-bottom">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-semibold text-primary">
                        <i class="bi bi-table me-2"></i> Daftar Formulir
                    </h5>
                </div>
            </div>
            
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-4">Formulir</th>
                                <th class="text-center">Semester</th>   
                                <th class="text-center">Tahun Ajaran</th>
                                <th class="text-center">Pembukaan</th>
                                <th class="text-center">Penutupan</th>
                                <th class="text-center">Verifikasi</th>
                                <th class="text-center">Pengumuman</th>
                                <th class="text-center">Kuota</th>
                                <th class="text-center">Status</th>
                                @if(auth()->user()->role == 'karyawan')
                                <th class="text-center pe-4">Aksi</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody class="border-top-0">
                            @forelse($forms as $form)
                            <tr class="position-relative align-middle hover-highlight">
                                <td class="ps-4">
                                    <div class="d-flex align-items-center">
                                        <div class="icon-shape 
                                            @if($form->jenis_form == 'pengangsuran') bg-light-info text-info
                                            @elseif($form->jenis_form == 'penurunan') bg-light-warning text-warning
                                            @else bg-light-secondary text-secondary
                                            @endif
                                            rounded-3 me-3 p-2">
                                            <i class="bi bi-file-earmark-text fs-5"></i>
                                        </div>
                                        <div>
                                            <h6 class="mb-0 fw-bold text-dark">{{ $form->nama_form }}</h6>
                                            <span class="badge 
                                                @if($form->jenis_form == 'pengangsuran') bg-info text-white
                                                @elseif($form->jenis_form == 'penurunan') bg-warning text-dark
                                                @else bg-secondary text-white
                                                @endif
                                                text-capitalize">
                                                {{ $form->jenis_form }}
                                            </span>                                       
                                        </div>
                                    </div>
                                </td>
                                <!-- Semester Column -->
                                <td class="text-center">
                                    <span class="badge badge-semester
                                        @if($form->semester == 'Ganjil') bg-primary text-white
                                        @else bg-info text-white
                                        @endif">
                                        {{ $form->semester }}
                                    </span>
                                </td>
            
                                <!-- Academic Year Column -->
                                <td class="text-center">
                                    <span class="academic-year">{{ $form->tahun }}</span>
                                </td>

                               <td class="text-center">
                                    <span class="fw-medium text-dark">{{ $form->tanggal_pembukaan ? \Carbon\Carbon::parse($form->tanggal_pembukaan)->format('d M Y') : '-' }}</span>
                                </td>
                                <td class="text-center">
                                    <span class="fw-medium text-dark">{{ $form->tanggal_penutupan ? \Carbon\Carbon::parse($form->tanggal_penutupan)->format('d M Y') : '-' }}</span>
                                </td>
                                <td class="text-center">
                                    <span class="fw-medium text-dark">{{ $form->tanggal_verifikasi ? \Carbon\Carbon::parse($form->tanggal_verifikasi)->format('d M Y') : '-' }}</span>
                                </td>
                                <td class="text-center">
                                    <span class="fw-medium text-dark">{{ $form->tanggal_pengumuman ? \Carbon\Carbon::parse($form->tanggal_pengumuman)->format('d M Y') : '-' }}</span>
                                </td>
                                
                                <!-- Kuota Column - Automatically shows the correct quota based on jenis_form -->
                                <td class="text-center">
                                    @if($form->jenis_form == 'pengangsuran')
                                        @if(auth()->user()->role == 'admin')
                                            <form action="{{ route('form.updateQuota', $form->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                <div class="d-flex align-items-center">
                                                    <input type="number" 
                                                            name="kuota_pengangsuran" 
                                                            value="{{ $form->kuota_pengangsuran }}"
                                                            min="0" 
                                                            max="1000"
                                                            class="form-control form-control-sm d-inline-block text-center" 
                                                            style="width: 80px;"
                                                            required>
                                                    <button type="submit" class="btn btn-sm btn-info ms-2">
                                                        <i class="bi bi-check text-white me-2"></i> <span class="text-white">Save</span>
                                                    </button>
                                                </div>
                                            </form>
                                        @else
                                            <span class="badge bg-info bg-opacity-10 text-white rounded-pill px-3 py-2 border border-info border-opacity-25">
                                                <i class="bi bi-arrow-up-circle me-1"></i>
                                                {{ $form->kuota_pengangsuran }} Kuota
                                            </span>
                                            @if($form->kuota_pengangsuran == 0)
                                                 <small class="d-block text-muted">Hanya admin yang bisa mengubah</small>
                                            @endif
                                        @endif
                                    @elseif($form->jenis_form == 'penurunan')
                                        @if(auth()->user()->role == 'admin')
                                           <form action="{{ route('form.updateQuota', $form->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                <div class="d-flex align-items-center">
                                                    <input type="number" 
                                                            name="kuota_penurunan" 
                                                            value="{{ $form->kuota_penurunan }}"
                                                            min="0" 
                                                            max="1000"
                                                            class="form-control form-control-sm d-inline-block text-center" 
                                                            style="width: 80px;"
                                                            required>
                                                    <button type="submit" class="btn btn-sm btn-warning ms-2">
                                                        <i class="bi bi-check text-dark me-2"></i> <span class="text-dark">Save</span>
                                                    </button>
                                                </div>
                                            </form>
                                        @else
                                            <span class="badge bg-warning bg-opacity-10 text-dark rounded-pill px-3 py-2 border border-warning border-opacity-25">
                                                <i class="bi bi-arrow-down-circle me-1"></i>
                                                {{ $form->kuota_penurunan }} Kuota
                                            </span>
                                            @if($form->kuota_penurunan == 0)
                                                <small class="d-block text-dark">Hanya admin yang bisa mengubah</small>
                                            @endif
                                        @endif
                                    @endif
                                </td>        

                                <td class="text-center">
                                    <span class="badge rounded-pill px-3 py-2 fw-semibold 
                                        {{ $form->status == 'Dibuka' ? 'bg-success bg-opacity-10 text-white border border-success border-opacity-25' : 'bg-secondary bg-opacity-10 text-white border border-secondary border-opacity-25' }}">
                                        <i class="bi {{ $form->status == 'Dibuka' ? 'bi-unlock' : 'bi-lock' }} me-1"></i>
                                        {{ $form->status }}
                                    </span>
                                </td>

                                @if(auth()->user()->role == 'karyawan')
                                <td class="text-center pe-4">
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-icon btn-light rounded-circle dropdown-toggle" 
                                                type="button" 
                                                data-bs-toggle="dropdown"
                                                aria-expanded="false">
                                            <i class="bi bi-three-dots-vertical"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end shadow border-0 py-2">
                                            <li>
                                                <form action="{{ route('form.toggleStatus', $form->id) }}" method="POST">
                                                    @csrf
                                                    <button type="submit" class="dropdown-item d-flex align-items-center py-2 px-3">
                                                        <i class="bi {{ $form->status == 'Dibuka' ? 'bi-lock text-danger' : 'bi-unlock text-success' }} me-2"></i>
                                                        <span>{{ $form->status == 'Dibuka' ? 'Tutup Formulir' : 'Buka Formulir' }}</span>
                                                    </button>
                                                </form>
                                            </li>
                                            <li>
                                                <a class="dropdown-item d-flex align-items-center py-2 px-3" href="{{ route('form.edit', $form->id) }}">
                                                    <i class="bi bi-pencil me-2 text-warning"></i>
                                                    <span>Edit Formulir</span>
                                                </a>
                                            </li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li>
                                                <form action="{{ route('form.destroy', $form->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus formulir ini?');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="dropdown-item d-flex align-items-center py-2 px-3 text-danger">
                                                        <i class="bi bi-trash me-2"></i>
                                                        <span>Hapus Formulir</span>
                                                    </button>
                                                </form>
                                            </li>
                                        </ul>
                                    </div>
                                </td>     
                                @endif
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center py-5">
                                    <div class="d-flex flex-column align-items-center justify-content-center">
                                        <img src="{{ asset('images/empty-state.svg') }}" alt="Empty state" class="img-fluid mb-4" style="max-height: 150px;">
                                        <h5 class="text-muted mb-2">Belum ada formulir tersedia</h5>
                                        @if(auth()->user()->role == 'admin')
                                        <a href="{{ route('form.create') }}" class="btn btn-primary mt-3 rounded-pill px-4">
                                            <i class="bi bi-plus-circle me-2"></i> Buat Formulir Pertama
                                        </a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            
            @if($forms->hasPages())
            <div class="card-footer bg-white py-3 border-top">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="text-muted small">
                        Menampilkan <span class="fw-semibold">{{ $forms->firstItem() }}</span> - <span class="fw-semibold">{{ $forms->lastItem() }}</span> dari <span class="fw-semibold">{{ $forms->total() }}</span> formulir
                    </div>
                    <div>
                        {{ $forms->onEachSide(1)->links('pagination::bootstrap-5') }}
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- Help Modal -->
<div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-primary text-white rounded-top-4">
                <h5 class="modal-title" id="helpModalLabel"><i class="bi bi-question-circle me-2"></i> Panduan Formulir</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h6>Fitur Manajemen Formulir:</h6>
                <ul>
                    <li><strong>Buat Form Baru:</strong> Untuk membuat formulir pendaftaran baru</li>
                    <li><strong>Status Formulir:</strong> Untuk mengubah status formulir dibuka atau ditutup</li>
                    <li><strong>Edit Formulir:</strong> Untuh mengubah dan memperbarui formulir</li> 
                    <li><strong>Update Kuota:</strong> Hanya untuk admin </li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<style>
    body {
        overflow-x: hidden;
    }
    
    .dashboard-header {
        background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
    
    .icon-shape {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .table > :not(:first-child) {
        border-top: 0;
    }
    
    .table-hover > tbody > tr:hover {
        background-color: rgba(13, 110, 253, 0.05);
    }
    
    .btn-hover-light:hover {
        background-color: rgba(255, 255, 255, 0.9) !important;
        color: #0d6efd !important;
    }
    
    .rounded-3 {
        border-radius: 0.75rem !important;
    }
    
    .rounded-4 {
        border-radius: 1rem !important;
    }
    
    .hover-lift {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .hover-lift:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.1) !important;
    }
    
    .hover-highlight:hover {
        background-color: rgba(13, 110, 253, 0.03) !important;
    }
    
    .badge {
        transition: all 0.2s ease;
    }
    
    .badge:hover {
        transform: translateY(-1px);
    }
    
    /* Responsive table adjustments */
    @media (max-width: 768px) {
        .table-responsive {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .card-header .d-flex {
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
        }
        
        .card-header .input-group {
            width: 100% !important;
        }
    }
    
    /* Full width adjustments */
    .container-fluid.px-0 {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    
    .dashboard-header.rounded-0 {
        border-radius: 0 !important;
    }
</style>
@endsection