@extends('layout.super_admin')

@section('content')
<main id="main" class="main">
    <div class="pagetitle">
        <h1>Kelola Periode</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('super.dashboard') }}">Home</a></li>
                <li class="breadcrumb-item active">Kelola Periode</li>
            </ol>
        </nav>
    </div>

    <section class="section">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body pt-3">
                        <h5 class="card-title text-center mb-4">Daftar Periode Akademik</h5>
                        
                        @if(session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif

                        @if(session('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                            </div>
                        @endif

                        <div class="d-flex justify-content-end mb-4">
                            <button type="button" class="btn btn-primary btn-pill shadow-sm" data-bs-toggle="modal" data-bs-target="#addPeriodeModal">
                                <i class="bi bi-plus-lg me-1"></i> Tambah Periode
                            </button>
                        </div>

                        <style>
                            .transition-hover {
                                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                            }
                            .transition-hover:hover {
                                transform: translateY(-3px);
                                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
                                border-left: 4px solid #6366f1 !important;
                            }
                            .custom-card-row {
                                border: 1px solid rgba(0,0,0,0.06) !important;
                                border-left: 4px solid transparent !important;
                                border-radius: 12px;
                            }
                            .avatar-badge {
                                width: 42px;
                                height: 42px;
                                background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
                                color: white;
                                border-radius: 12px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-weight: 700;
                                font-size: 14px;
                                box-shadow: 0 4px 8px rgba(99, 102, 241, 0.2);
                            }
                            .btn-pill {
                                border-radius: 50px;
                                font-weight: 600;
                                font-size: 12px;
                            }
                            .font-weight-600 {
                                font-weight: 600;
                            }
                            .font-weight-500 {
                                font-weight: 500;
                            }
                            .status-dot {
                                width: 8px;
                                height: 8px;
                                border-radius: 50%;
                                display: inline-block;
                                margin-right: 6px;
                            }
                            .status-dot.success { background-color: #10b981; }
                            .status-dot.secondary { background-color: #6b7280; }
                            .status-badge {
                                display: inline-flex;
                                align-items: center;
                                padding: 4px 12px;
                                border-radius: 50px;
                                font-size: 12px;
                                font-weight: 500;
                                background-color: #f3f4f6;
                            }
                            .form-control-premium {
                                border: 1px solid #d0d5dd;
                                border-radius: 10px;
                                padding: 10px 16px;
                                font-size: 14px;
                                color: #1d2939;
                                background-color: #ffffff;
                                transition: border-color 0.2s, box-shadow 0.2s;
                            }
                            .form-control-premium:focus {
                                outline: none;
                                border-color: #6366f1;
                                box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
                            }
                        </style>

                        <div class="custom-card-list">
                            @foreach($periodes as $periode)
                                <div class="custom-card-row row align-items-center bg-white p-3 mb-3 mx-0 shadow-sm transition-hover border">
                                    <!-- Icon & Year -->
                                    <div class="col-md-4 d-flex align-items-center">
                                        <div class="avatar-badge me-3">
                                            <i class="bi bi-calendar-event fs-5"></i>
                                        </div>
                                        <div>
                                            <h6 class="mb-0 font-weight-bold text-dark">{{ $periode->tahun_ajaran }}</h6>
                                            <small class="text-muted">Tahun Akademik</small>
                                        </div>
                                    </div>
                                    <!-- Status -->
                                    <div class="col-md-4">
                                        <div class="status-badge">
                                            <span class="status-dot {{ $periode->is_active ? 'success' : 'secondary' }}"></span>
                                            {{ $periode->is_active ? 'Aktif' : 'Nonaktif' }}
                                        </div>
                                    </div>
                                    <!-- Actions -->
                                    <div class="col-md-4 text-end d-flex justify-content-end align-items-center gap-2">
                                        @if($periode->is_active)
                                            <form action="{{ route('super.deactivate-periode', $periode->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                <button type="submit" class="btn btn-sm btn-pill btn-outline-warning px-3" onclick="return confirm('Nonaktifkan periode ini?')">
                                                    <i class="bi bi-slash-circle me-1"></i> Nonaktifkan
                                                </button>
                                            </form>
                                        @else
                                            <form action="{{ route('super.activate-periode', $periode->id) }}" method="POST" class="d-inline">
                                                @csrf
                                                <button type="submit" class="btn btn-sm btn-pill btn-success px-3" onclick="return confirm('Aktifkan periode ini?')">
                                                    <i class="bi bi-check-circle me-1"></i> Aktifkan
                                                </button>
                                            </form>
                                        @endif
                                        <button type="button" class="btn btn-sm btn-outline-warning rounded-circle p-2" style="width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;" data-bs-toggle="modal" data-bs-target="#editPeriodeModal{{ $periode->id }}" title="Edit Periode">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <form action="{{ route('super.delete-periode', $periode->id) }}" method="POST" class="d-inline">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger rounded-circle p-2" style="width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;" onclick="return confirm('Hapus periode ini?')" title="Hapus Periode">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>

                                <!-- Edit Periode Modal -->
                                <div class="modal fade" id="editPeriodeModal{{ $periode->id }}" tabindex="-1">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content border-0 shadow">
                                            <div class="modal-header bg-primary text-white">
                                                <h5 class="modal-title font-weight-bold"><i class="bi bi-pencil-square me-2"></i>Edit Periode</h5>
                                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <form action="{{ route('super.update-periode', $periode->id) }}" method="POST">
                                                @csrf
                                                @method('PUT')
                                                <div class="modal-body text-start py-4">
                                                    <div class="mb-3">
                                                        <label for="tahun_ajaran{{ $periode->id }}" class="form-label font-weight-600 text-dark small">Tahun Ajaran</label>
                                                        <input type="text" class="form-control form-control-premium" id="tahun_ajaran{{ $periode->id }}" name="tahun_ajaran" value="{{ $periode->tahun_ajaran }}" required>
                                                        <small class="form-text text-muted">Format: YYYY/YYYY (Contoh: 2024/2025)</small>
                                                    </div>
                                                </div>
                                                <div class="modal-footer bg-light">
                                                    <button type="button" class="btn btn-secondary btn-pill" data-bs-dismiss="modal">Tutup</button>
                                                    <button type="submit" class="btn btn-primary btn-pill">Simpan</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- Add Periode Modal -->
<div class="modal fade" id="addPeriodeModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title font-weight-bold"><i class="bi bi-plus-circle me-2"></i>Tambah Periode Baru</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('super.add-periode') }}" method="POST">
                @csrf
                <div class="modal-body py-4">
                    <div class="mb-3">
                        <label for="tahun_ajaran" class="form-label font-weight-600 text-dark small">Tahun Ajaran</label>
                        <input type="text" class="form-control form-control-premium" id="tahun_ajaran" name="tahun_ajaran" required 
                               placeholder="Contoh: 2024/2025">
                        <small class="form-text text-muted">Format yang disarankan: YYYY/YYYY (Contoh: 2024/2025)</small>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary btn-pill" data-bs-dismiss="modal">Tutup</button>
                    <button type="submit" class="btn btn-primary btn-pill">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection