@extends('layouts.master')
@section('content')
    <style>
        .klass-card{
            transition: all 0.25s ease;
        }

        .klass-card:hover{
            transform: translateY(-5px);
            box-shadow:0 10px 25px rgba(0,0,0,0.08);
        }

        .klass-accent{
            height:3px;
            background:linear-gradient(90deg,#4e73df,#1cc88a);
            border-top-left-radius:16px;
            border-top-right-radius:16px;
        }

        .section-list{
            display:flex;
            flex-wrap:wrap;
            justify-content:center;
            gap:6px;
        }

        .section-pill{
            background:#f1f5ff;
            color:#4e73df;
            font-size:12px;
            padding:4px 10px;
            border-radius:20px;
            font-weight:500;
            border:1px solid #e0e6ff;
            transition:0.2s;
        }

        .section-pill:hover{
            background:#4e73df;
            color:white;
        }
        .swal2-container {
            z-index: 20000 !important;
        }
    </style>
    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="col-xxl">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h4 class="fw-bold mb-1" style="font-size: 1.8rem;">Classes</h4>
                    <p class="text-muted mb-0">People who manage City Public School</p>
                </div>
                <button class="btn btn-primary shadow-sm text-capitalize"
                        data-bs-toggle="modal"
                        data-bs-target="#openmodal">
                    <i class="fa fa-plus me-1"></i> Add Class
                </button>
                <button class="btn btn-primary shadow-sm text-capitalize"
                        data-bs-toggle="modal"
                        data-bs-target="#openmodalsection">
                    <i class="fa fa-plus me-1"></i> Add Section
                </button>
            </div>

            <div class="row">
                @forelse($klasses as $klass)
                    <div class="col-xl-3 col-lg-3 col-md-4 mb-4">
                        <div class="card border-0 shadow-sm rounded-4 h-100 klass-card">
                            {{-- Top Accent --}}
                            <div class="klass-accent"></div>
                            <div class="card-body text-center py-3 px-3">
                                {{-- Class Name --}}
                                <h6 class="fw-bold text-dark text-capitalize mb-1">
                                    {{ $klass->name }}
                                    <span class="badge bg-dark-subtle text-dark ms-1">
                                        {{ $klass->students_count }} Students
                                    </span>
                                </h6>
                                {{-- Fee --}}
                                <div class="klass-fee mb-2">
                                    <span class="badge bg-success-subtle text-success px-2 py-1 rounded-pill">
                                        Rs {{ number_format($klass->fee) }}
                                    </span>
                                </div>
                                {{-- Sections --}}
                                @if($klass->sections->count())
                                    <div class="section-list mb-2">
                                        @foreach($klass->sections as $section)
                                            <span class="section-pill text-capitalize">
                                                {{ $section->name }}
                                                <small class="ms-1 text-muted">
                                                    ({{ $section->students_count }})
                                                </small>
                                            </span>
                                        @endforeach
                                    </div>
                                @else
                                    <p class="text-muted small mb-2">No sections</p>
                                @endif

                                {{-- Action Buttons --}}
                                <div class="d-flex justify-content-center gap-2 mt-1">
                                    <button class="btn btn-sm btn-outline-primary rounded-pill px-3 py-1 editKlassBtn"
                                            data-id="{{ $klass->id }}"
                                            data-name="{{ $klass->name }}"
                                            data-fee="{{ $klass->fee }}">
                                        <i class="bx bx-edit"></i>
                                    </button>

                                    <button class="btn btn-sm btn-outline-danger rounded-pill px-3 py-1 deleteKlassBtn"
                                            data-id="{{ $klass->id }}">
                                        <i class="bx bx-trash"></i>
                                    </button>
                                </div>

                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center py-5">
                        <i class="bx bx-book-alt display-5 text-muted"></i>
                        <p class="text-muted mt-3">No classes found</p>
                    </div>
                @endforelse
            </div>


        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="openmodal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title text-white"><i class="bx bx-user-pin me-2"></i>Add New Class</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <form action="{{route('admin.store.klass')}}" method="post">
                    @csrf
                    <div class="modal-body">
                        <!-- Class Name and Fee -->
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Class Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="name" id="name" placeholder="Enter Class Name" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Class Fee <span class="text-danger">*</span></label>
                                <input type="number" class="form-control" name="fee" id="fee" placeholder="Enter Class Fee" required>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Add Class</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="openmodalsection" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title text-white"><i class="bx bx-user-pin me-2"></i>Add New Section</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <form action="{{route('admin.store.section')}}" method="post">
                    @csrf
                    <div class="modal-body">
                        <!-- Full Name and Phone Number -->
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label class="form-label fw-semibold">Section Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="name" id="name" placeholder="Enter Section Name" required>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label class="form-label">Select Class<span class="text-danger">*</span></label>
                                <select class="form-select text-capitalize" required name="klass_id">
                                    <option value="" selected disabled="">Select Class</option>
                                    @foreach($klasses as $klass)
                                    <option value="{{$klass->id}}">{{$klass->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Add Section</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div class="modal fade" id="editKlassModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-4 border-0 shadow">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold">Edit Class</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="editKlassForm" method="POST" action="{{ route('admin.klass.update') }}">
                    @csrf
                    <input type="hidden" name="klass_id" id="modalKlassId">
                    <div class="modal-body">
                        {{-- Class Name --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Class Name</label>
                            <input type="text" class="form-control" name="name" id="modalKlassName" required>
                        </div>
                        {{-- Fee --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Fee</label>
                            <input type="number" class="form-control" name="fee" id="modalKlassFee" required>
                        </div>
                        {{-- Sections --}}
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Sections</label>
                            <div id="modalSectionsWrapper">
                                @foreach($klass->sections as $section)
                                    <div class="input-group mb-2 section-input">
                                        <input type="hidden" name="section_id[]" value="{{ $section->id }}">
                                        <input type="text" class="form-control section-name"
                                               name="section_name[]" value="{{ $section->name }}" required>
                                        <button type="button" class="btn btn-outline-danger removeSectionBtn">
                                            <i class="bx bx-trash"></i>
                                        </button>
                                        <span class="text-danger small section-error ms-2"></span>
                                    </div>
                                @endforeach
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-primary mt-2" id="addSectionField">
                                <i class="bx bx-plus"></i> Add Section
                            </button>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Update Class</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        var deleteKlassUrl = "{{ route('admin.klass.delete', ':id') }}";
        var deleteSectionUrl = "{{ route('admin.section.delete', ':id') }}";
        var getSectionsUrl = "{{ route('admin.klass.sections', ':id') }}";
        var CSRF_TOKEN = "{{ csrf_token() }}";
    </script>
@endsection