@extends('admin.layouts.app')
@section('title', 'Classes')
@section('breadcrumb')
    <li class="breadcrumb-item active">Classes</li>
@endsection
@section('content')
    <div class="page-header d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="page-title">Academic Classes</h1>
        </div>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addClassModal">
            <i class="bi bi-plus-lg me-1"></i>Add Class
        </button>
    </div>

    <div class="row g-3">
        @foreach (['UG', 'PG', 'PG_Diploma', 'Certificate', 'AddOn'] as $level)
            @php $levelClasses = $classes->where('level', $level); @endphp
            @if ($levelClasses->count())
                <div class="col-12">
                    <div class="section-divider mt-0">{{ str_replace('_', ' ', $level) }} Programs</div>
                    <div class="row g-2">
                        @foreach ($levelClasses as $class)
                            <div class="col-md-4 col-lg-3">
                                <div class="card h-100">
                                    <div class="card-body d-flex flex-column">
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <span
                                                class="badge badge-soft-{{ $class->level === 'UG' ? 'info' : ($class->level === 'PG' ? 'primary' : 'warning') }}"
                                                style="font-size:0.7rem">{{ $class->level }}</span>
                                            <span
                                                class="badge badge-soft-{{ $class->status === 'active' ? 'success' : 'secondary' }}">{{ ucfirst($class->status) }}</span>
                                        </div>
                                        <div style="font-weight:600;font-size:0.92rem">{{ $class->name }}</div>
                                        <div style="font-size:0.75rem;color:#64748b;margin-top:2px">
                                            <code>{{ $class->code }}</code> | {{ $class->duration_years }} year(s)
                                        </div>
                                        <div style="font-size:0.82rem;color:#64748b;margin-top:6px" class="mb-3">
                                            <i class="bi bi-people me-1"></i>{{ $class->students_count }} /
                                            {{ $class->seats }} seats
                                            @if ($class->department)
                                                <br><i class="bi bi-building me-1"></i>{{ $class->department->name }}
                                            @endif
                                        </div>

                                        <div class="mt-auto d-flex gap-1">
                                            <button class="btn btn-sm btn-outline-secondary py-1 flex-grow-1 editBtn"
                                                data-id="{{ $class->id }}">
                                                <i class="bi bi-pencil me-1"></i>Edit
                                            </button>
                                            {{-- <form action="{{ route('admin.academics.classes.destroy', $class->id) }}"
                                                method="POST" class="d-inline"
                                                onsubmit="return confirm('Delete this class?');">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger py-1">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form> --}}
                                            <button type="submit" class="btn btn-sm btn-outline-danger py-1 deleteData"
                                                data-uuid="{{ $class->id }}" data-table="classes">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        @endforeach
    </div>

    <!-- Add Class Modal -->
    <div class="modal fade" id="addClassModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content border-0 shadow">
                <form id="storeClass" class="formSubmit" action="{{ route('admin.academics.classes.store') }}" method="POST">
                    @csrf
                    <div class="modal-header bg-light">
                        <h5 class="modal-title fw-bold">Add New Class</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">Class Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control" required
                                placeholder="e.g. B.Sc. Computer Science">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Class Code <span class="text-danger">*</span></label>
                            <input type="text" name="code" class="form-control" required placeholder="e.g. BSC-CS">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Department</label>
                            <select name="department_id" class="form-select">
                                <option value="">Select Department (Optional)</option>
                                @foreach ($departments as $dept)
                                    <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="row gx-2">
                            <div class="col-6 mb-3">
                                <label class="form-label">Level <span class="text-danger">*</span></label>
                                <select name="level" class="form-select" required>
                                    <option value="UG">UG</option>
                                    <option value="PG">PG</option>
                                    <option value="PG_Diploma">PG_Diploma</option>
                                    <option value="Certificate">Certificate</option>
                                    <option value="AddOn">AddOn</option>
                                </select>
                            </div>
                            <div class="col-6 mb-3">
                                <label class="form-label">Duration (Years) <span class="text-danger">*</span></label>
                                <input type="number" name="duration_years" class="form-control" min="1"
                                    max="5" required>
                            </div>
                            <div class="col-12 mb-3">
                                <label class="form-label">Total Seats <span class="text-danger">*</span></label>
                                <input type="number" name="seats" class="form-control" min="1" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer bg-light">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Class</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Class Modal -->
    <div class="modal fade" id="editClassModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content border-0 shadow">
                <form id="editClass" class="formSubmit" action="{{ route('admin.academics.classes.update') }}" method="POST">
                    @csrf
                    <div class="modal-header bg-light">
                        <h5 class="modal-title fw-bold">Edit Class</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="id" id="id" value="">
                        <div class="mb-3">
                            <label class="form-label">Class Name <span class="text-danger">*</span></label>
                            <input type="text" name="edit_name" id="edit_name" class="form-control" value="" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Class Code <span class="text-danger">*</span></label>
                            <input type="text" name="edit_code" id="edit_code" class="form-control" required placeholder="e.g. BSC-CS" value="">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Department</label>
                            <select name="edit_department_id" id="edit_department_id" class="form-select">
                                <option value="">Select Department (Optional)</option>
                                @foreach ($departments as $dept)
                                    <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="row gx-2">
                            <div class="col-6 mb-3">
                                <label class="form-label">Level <span class="text-danger">*</span></label>
                                <select name="edit_level" id="edit_level" class="form-select" required>
                                    <option value="UG">UG</option>
                                    <option value="PG">PG</option>
                                    <option value="PG_Diploma">PG_Diploma</option>
                                    <option value="Certificate">Certificate</option>
                                    <option value="AddOn">AddOn</option>
                                </select>
                            </div>
                            <div class="col-6 mb-3">
                                <label class="form-label">Status <span class="text-danger">*</span></label>
                                <select name="edit_status" id="edit_status" class="form-select" required>
                                    <option value="active">Active
                                    </option>
                                    <option value="inactive">Inactive
                                    </option>
                                </select>
                            </div>
                            <div class="col-6 mb-3">
                                <label class="form-label">Duration (Years) <span class="text-danger">*</span></label>
                                <input type="number" name="edit_duration_years" id="edit_duration_years" class="form-control" min="1"
                                    max="5" value="" required>
                            </div>
                            <div class="col-6 mb-3">
                                <label class="form-label">Total Seats <span class="text-danger">*</span></label>
                                <input type="number" name="edit_seats" id="edit_seats" class="form-control" min="1" value=""
                                    required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer bg-light">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Update Class</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            $(document).on("click", ".editBtn", function() {
                const id = $(this).attr('data-id');
                $.ajaxSetup({
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr(
                            "content"
                        ),
                    },
                });
                $.ajax({
                    method: 'post',
                    url: "{{ route('admin.academics.classes.details') }}",
                    data: {
                        id: id
                    },
                    success: function(res) {
                        if (res.status) {
                            const data = res.data;
                            const modal = new bootstrap.Modal(document.getElementById('editClassModal'));
                            // $('#editClassModal form').attr('action', `${baseUrl}/admin/academics/classes/update/${data.id}`);
                            $('#editClassModal input[name="id"]').val(data.id);
                            $('#editClassModal input[name="edit_name"]').val(data.name);
                            $('#editClassModal input[name="edit_code"]').val(data.code);
                            $('#editClassModal select[name="edit_department_id"]').val(data.department_id);
                            $('#editClassModal select[name="edit_level"]').val(data.level);
                            $('#editClassModal select[name="edit_status"]').val(data.status);
                            $('#editClassModal input[name="edit_duration_years"]').val(data.duration_years);
                            $('#editClassModal input[name="edit_seats"]').val(data.seats);
                            modal.show();
                        }
                    },
                    error: function(xhr, status, error) {
                        toastr.error(xhr.responseJSON.message);
                    }
                });
            });
        </script>
    @endpush
@endsection