@extends('layouts.master')
@section('content')
    <style>
        .subject-pill{
            display:flex;
            align-items:center;
            background:#f1f3f5;
            border-radius:25px;
            padding:6px 12px;
            font-size:13px;
            font-weight:500;
            gap:6px;
            transition:all .2s;
        }

        .subject-pill:hover{
            background:#e9ecef;
        }

        .subject-dropdown{
            font-size:12px;
            cursor:pointer;
            color:#777;
        }

        .subject-dropdown:hover{
            color:#000;
        }
    </style>
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="col-xxl">
                    <div class="row mt-4">
                        @forelse($klasses as $klass)
                            <div class="col-12 mb-3">
                                <div class="card shadow-sm border-0">
                                    <div class="card-body">
                                        <div class="row align-items-start">
                                            {{-- Class Info --}}
                                            <div class="col-md-2 border-end text-capitalize">
                                                <h6 class="fw-bold mb-1">{{ $klass->name }}</h6>
                                                <span class="badge bg-primary rounded-pill mb-2">
                                                    {{ $klass->subjects->count() }} Subjects
                                                </span>
                                                <div>
                                                    <button class="btn btn-sm btn-outline-primary addSubjectBtn"
                                                            data-klass="{{ $klass->id }}"
                                                            data-klassname="{{ $klass->name }}">
                                                        <i class="fa fa-plus me-1"></i> Add Subject
                                                    </button>
                                                </div>
                                            </div>
                                            {{-- Subjects --}}
                                            <div class="col-md-10">
                                                @if($klass->subjects->count() > 0)
                                                    <div class="d-flex flex-wrap gap-2">
                                                        @foreach($klass->subjects as $subject)
                                                            <div class="subject-pill text-capitalize">
                                                                <span>{{ $subject->name }}</span>
                                                                <div class="dropdown">
                                                                    <i class="fa fa-caret-down subject-dropdown" data-bs-toggle="dropdown"></i>
                                                                    <ul class="dropdown-menu">
                                                                        <li>
                                                                            <a class="dropdown-item editSubject"
                                                                               data-id="{{ $subject->id }}"
                                                                               data-name="{{ $subject->name }}"
                                                                               data-klass="{{ $klass->id }}">
                                                                                <i class="fa fa-edit me-2"></i>Edit
                                                                            </a>
                                                                        </li>
                                                                        <li>
                                                                            <button class="dropdown-item text-danger deleteSubject"
                                                                                    data-id="{{ $subject->id }}">
                                                                                <i class="fa fa-trash me-2"></i>Delete
                                                                            </button>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @else
                                                    <span class="text-muted small">
                                                        No subjects added yet
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="col-12">
                                <div class="alert alert-info text-center">
                                    No Classes Found
                                </div>
                            </div>
                        @endforelse
                    </div>

                </div>
            </div>

    <div class="modal fade" id="subjectModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="subjectForm" method="POST" action="{{ route('admin.subject.store') }}">
                    @csrf

                    <input type="hidden" name="id" id="subject_id">
                    <input type="hidden" name="klass_id" id="modalKlassId">

                    <div class="modal-header">
                        <h5 class="modal-title">
                            <span id="modalTitle">Add Subject</span> in <span id="modalClassName"></span>
                        </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">Subject Name</label>
                            <input type="text"
                                   class="form-control"
                                   name="name"
                                   id="subject_name"
                                   placeholder="Enter subject name"
                                   required>
                        </div>

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="submit" id="subjectSubmitBtn" class="btn btn-primary">
                            <i class="fa fa-save me-1"></i> Save Subject
                        </button>

                    </div>

                </form>
            </div>
        </div>
    </div>

    <script>
        var subjectDeleteUrl = "{{ route('admin.subject.delete') }}";
        var subjectUpdateUrl = "{{ route('admin.subject.update') }}";
        var subjectStoreUrl = "{{ route('admin.subject.store') }}";
        var CSRF_TOKEN = "{{ csrf_token() }}";
    </script>
@endsection