@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <div class="card shadow-lg border-0 rounded-lg">
        <div class="card-header bg-gradient-primary text-white py-4">
            <div class="d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center">
                    <div class="bg-white bg-opacity-25 rounded-circle p-3 me-3">
                        <i class="fas fa-chart-bar fa-lg text-white"></i>
                    </div>
                    <div>
                        <h4 class="mb-1">Slot Tersedia</h4>
                        <p class="mb-0 text-white-50">{{ $department->name }}</p>
                    </div>
                </div>
                <div>
                    <button type="button" class="btn btn-light btn-sm me-2 px-3 py-2" data-bs-toggle="modal" data-bs-target="#createSessionModal">
                        <i class="fas fa-plus me-2"></i> Tambah Sesi
                    </button>
                    <a href="{{ route('departments.index') }}" class="btn btn-outline-light btn-sm px-3 py-2">
                        <i class="fas fa-arrow-left me-2"></i> Kembali
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body p-4">
            <div class="table-responsive">
                <table class="table table-hover align-middle border-bottom">
                    <thead>
                        <tr class="bg-light">
                            <th>Sesi Magang</th>
                            <th class="text-center">Kapasitas</th>
                            <th class="text-center">Terisi</th>
                            <th class="text-center">Tersedia</th>
                            <th>Periode</th>
                            <th class="text-center">Status</th>

                        </tr>
                    </thead>
                    <tbody>
                        @forelse($department->sessions as $session)
                        @php
                            $used_slots = $session->interns()->whereIn('status', ['active', 'pending'])->count();
                            $available = $session->max_interns - $used_slots;
                        @endphp
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="avatar me-3 bg-primary-subtle rounded-circle">
                                        <span class="avatar-initials text-primary">{{ substr($session->name, 0, 1) }}</span>
                                    </div>
                                    <div class="fw-medium">{{ $session->name }}</div>
                                </div>
                            </td>
                            <td class="text-center fw-medium">{{ $session->max_interns }} orang</td>
                            <td class="text-center fw-medium text-primary">{{ $used_slots }} orang</td>
                            <td class="text-center">
                                <span class="badge bg-{{ $available > 0 ? 'success' : 'danger' }}-subtle text-{{ $available > 0 ? 'success' : 'danger' }} px-3 py-2">
                                    <i class="fas fa-{{ $available > 0 ? 'check' : 'times' }}-circle me-1"></i>
                                    {{ $available }} slot
                                </span>
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-calendar-alt text-info me-2"></i>
                                    {{ \Carbon\Carbon::parse($session->start_date)->locale('id')->isoFormat('D MMMM Y') }} -
                                    {{ \Carbon\Carbon::parse($session->end_date)->locale('id')->isoFormat('D MMMM Y') }}

                                </div>
                            </td>
                            <td>
                            <td class="text-center">
                                @if($session->end_date < now())
                                    <span class="badge bg-secondary-subtle text-secondary px-3 py-2">
                                        <i class="fas fa-flag-checkered me-1"></i> Selesai
                                    </span>
                                @elseif($available > 0)
                                    <span class="badge bg-success-subtle text-success px-3 py-2">
                                        <i class="fas fa-door-open me-1"></i> Tersedia
                                    </span>
                                @else
                                    <span class="badge bg-danger-subtle text-danger px-3 py-2">
                                        <i class="fas fa-door-closed me-1"></i> Penuh
                                    </span>
                                @endif
                            </td>
                           
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center py-5">
                                <img src="{{ asset('images/empty.svg') }}" alt="Empty" class="mb-3" style="width: 200px">
                                <h5 class="text-muted mb-0">Belum ada sesi magang tersedia</h5>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                    <tfoot class="table-group-divider bg-light">
                        <tr class="fw-bold">
                            <td>Total Keseluruhan</td>
                            <td class="text-center">{{ $department->sessions->sum('max_interns') }} orang</td>
                            <td class="text-center text-primary">{{ $department->sessions->sum(function($session) {
                                return $session->interns()->whereIn('status', ['active', 'pending'])->count();
                            }) }} orang</td>
                            <td class="text-center text-success">{{ $slotTersedia }} slot</td>
                            <td colspan="3"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="card-footer bg-light p-4 text-end">
            <a href="{{ route('departments.index') }}" class="btn btn-secondary px-4">
                <i class="fas fa-arrow-left me-2"></i> Kembali
            </a>
        </div>
    </div>
</div>

<!-- Modal Tambah Sesi -->
<div class="modal fade" id="createSessionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('sessions.store') }}" method="POST">
                @csrf
                <input type="hidden" name="department_id" value="{{ $department->id }}">
                
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title">Tambah Sesi Magang</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-medium">Nama Sesi</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-tag"></i></span>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Kapasitas</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-users"></i></span>
                            <input type="number" class="form-control" name="max_interns" required>
                            <span class="input-group-text">orang</span>
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Tanggal Mulai</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-calendar"></i></span>
                                <input type="date" class="form-control" name="start_date" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Tanggal Selesai</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-calendar"></i></span>
                                <input type="date" class="form-control" name="end_date" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary px-4">
                        <i class="fas fa-save me-2"></i> Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('styles')
<style>
.avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar-initials {
    font-size: 16px;
    font-weight: 500;
}
.badge {
    font-weight: 500;
}
.table > :not(caption) > * > * {
    padding: 1rem;
}
.btn-sm {
    padding: 0.4rem 0.6rem;
}
.bg-gradient-primary {
    background: linear-gradient(45deg, #2563eb, #3b82f6);
}
.input-group-text {
    background-color: #f8f9fa;
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function(tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});
</script>
@endpush
@endsection