@extends('layouts.app')
@section('content')
<div class="contents">
   <div class="crm mb-25">
      <div class="container-fluid">
         <div class="row">
            <div class="col-lg-12 d-flex justify-content-end">
               @include('layouts.navigation')
            </div>
            <div class="col-lg-12">
               <div class="breadcrumb-main d-flex justify-content-between align-items-center">
                  <h2 class="breadcrumb-title">Classes and Students</h2>
                  <button class="btn btn-primary btn-squared" data-bs-toggle="modal" data-bs-target="#modal-basic" id="create-class-btn">
                     Add Classes <i class="fa-solid fa-plus ms-2"></i>
                  </button>
               </div>
            </div>
         </div>
      </div>

      <div class="row">
         @if($classes->count() > 0)
            @foreach($classes as $class)
               <div class="col-xxl-6 mb-25 col-md-12">
                  <div class="user-group radius-xl media-ui media-ui--early p-4 classes-and-students class-assign-card">
                     <div class="row d-flex align-items-center">
                        <div class="col-xxl-12 col-md-12">
                           <div class="d-flex justify-content-between mb-3">
                              
                              <div class="class-assign-content">
                                 <span class="text-muted">Class</span>
                                 <p>{{ $class->name }}</p>
                              </div>
                              <div class="class-assign-content">
                                 <span class="text-muted">Total Sections</span>
                                 <p>{{ $class->sections->count() }}</p>
                              </div>
                              <div class="class-assign-content">
                                 <span class="text-muted">Total Students</span>
                                 <p>{{ $class->sections->sum('student_count') }}</p>
                              </div>
                             
                           </div>
                           <div class="class-assign-content d-flex flex-row">
                               <span class="text-muted">Assigned Teacher:</span>
                               <p class="mx-2">{{assigned_Class($class->id)}}</p>
                             </div>
                           <div class="btn-section d-flex justify-content-between assigned-student-btn-list">
                              <img src="{{url('/')}}/admin_assets/img/themeicmr/student-user-icon.svg" alt="">
                              <div class="d-flex justify-content-between align-items-center gap-2">
                                  <button class="btn btn-outline-primary btn-default btn-squared btn-shadow-primary" data-bs-toggle="modal" data-bs-target="#viewdashboard">View Dashboard </button>
                                <a href="{{ route('class.students', [Crypt::encrypt($class->institute_id), Crypt::encrypt($class->id)]) }}" class="btn btn-default btn-squared  btn-primary  fw-600">View Class <i class="fa-solid fa-angles-right ms-2"></i></a> 
                                <button class="btn btn-icon btn-squared color-primary btn-outline-primary ">
                               <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg replaced-svg"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>
                              </button>                              
                                 <div class="">
                                    <div class="dropdown dropleft">
                                       
                                   

                                       <div class="dropdown-menu">
                                          <a class="dropdown-item text-primary edit-class-btn" href="javascript:void(0)" 
                                             data-class="{{ $class }}" 
                                             data-sections="{{ $class->sections }}">
                                             <i class="fa-solid fa-pen me-3"></i> Edit classes
                                          </a>
                                          <a class="dropdown-item text-danger delete-class-btn" href="javascript:void(0)" data-id="{{ $class->id }}">
                                             <i class="fa-solid fa-trash me-3"></i> Delete classes
                                          </a>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            @endforeach
            @else
             <div class="col-12">
                 <div class="alert alert-warning ">
                    <p class="text-center"> No classes found.</p>
                 </div>
             </div>
         @endif
      </div>

      {{-- Modal --}}
      <div class="modal-basic modal fade show" id="modal-basic" tabindex="-1" role="dialog" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content modal-bg-white custom-scroll">
            <div class="modal-header">
                <div>
                    <h3 class="modal-title">Add Class</h3>
                    <p>Add basic data of student</p>
                </div>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <img src="{{url('/')}}/admin_assets/img/svg/x.svg" alt="x" class="svg">
                </button>  
            </div>

            <div class="modal-body">
                <form id="classForm">
    @csrf
    <input type="hidden" name="class_id" id="class_id">

    <!-- Class Standard -->
    <div class="form-group col-12 mb-3">
        <label for="class_name" class="il-gray fs-16 fw-500 align-center mb-10">Class Standard</label>
        <input type="text" id="class_name" name="name" class="form-control ih-medium ip-light radius-xs b-light px-15" placeholder="Enter Class Standard" required>
    </div>

    <div class="form-group col-12">
        <div class="card p-3 bg-shadow-theme1">
            <label class="il-gray fs-16 fw-500 align-center mb-10">Number of Sections</label>
            <div class="me-15 d-flex align-items-center mb-3">
                <input type="button" value="-" id="decrease" class="btn btn-primary wh-50 text-center">
                <input type="number" id="sectionCount" value="2" class="form-control text-center mx-3" style="width:80px;" readonly>
                <input type="button" value="+" id="increase" class="btn btn-primary wh-50 text-center">
            </div>

            <!-- Wrapper for dynamic sections -->
            <div id="sections-wrapper"></div>
        </div>
    </div>

    <div class="form-group col-12">
        <label for="total_students" class="il-gray fs-16 fw-500 align-center mb-10">Total Students</label>
        <input type="text" id="total_students" name="total_students" class="form-control ih-medium ip-light radius-xs b-light px-15" placeholder="Enter Total Students" readonly>
    </div>

    <div class="modal-footer">
        <button type="submit" id="classSubmit" class="btn btn-primary btn-default btn-rounded w-100 mx-auto mt-3">Save</button>
    </div>
</form>

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


<div class="modal-basic modal fade show" id="viewdashboard" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-xxl modal-xxl-custom" role="document">
        <div class="modal-content modal-bg-white custom-scroll">
           
<div class="modal-body">
<div class="container-fluid">
     <div >
                   <ul class="dm-breadcrumb nav d-flex align-items-center">
   <li class="dm-breadcrumb__item">
      <a href=""  type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
        <svg width="44" height="44" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_6590_53542)">
<rect x="56" y="52" width="48" height="48" rx="24" transform="rotate(180 56 52)" fill="white"></rect>
<path d="M30.3636 27.9999L38 35.7778L35.8182 38L26 27.9999L35.8182 18L38 20.2222L30.3636 27.9999Z" fill="black"></path>
</g>
<defs>
<filter id="filter0_d_6590_53542" x="0" y="0" width="64" height="64" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
<feOffset dy="4"></feOffset>
<feGaussianBlur stdDeviation="4"></feGaussianBlur>
<feComposite in2="hardAlpha" operator="out"></feComposite>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"></feColorMatrix>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6590_53542"></feBlend>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6590_53542" result="shape"></feBlend>
</filter>
</defs>
</svg>

    
      Back
      </a>
    
   </li>
   
</ul>
                </div> 

  <!-- TOP STATS -->
  <div class="row g-4 mt-3">
    <div class="row">
    <div class="col-lg-7">
 <h2 class="breadcrumb-title">Classes XII Student</h2>
    </div>
      <div class="col-lg-5">
                       
                     <div class="dm-select w-100 me-3">
<select name="select-size-1" id="select-size-1" class="form-control  form-control-lg w-100">
<option value="01">Select Sections</option>
<option value="02">Option 2</option>
<option value="03">Option 3</option>
<option value="04">Option 4</option>
<option value="05">Option 5</option>
</select>
</div>
</div>
    </div>
                          
               
    <div class="col-md-4 mb-3">
      <div class="card shadow-sm border-0 p-3 d-flex flex-row align-items-center">
        <div class="bg-primary text-white rounded-3 p-3 me-3">
             <img src="{{url('/')}}/admin_assets/img/svg/number-of-student.svg" alt="x" class="svg">
        </div>
        <div>
          <small class="text-muted">No. of Students</small>
          <h3 class="mb-0">120</h3>
        </div>
      </div>
    </div>

    <div class="col-md-4 mb-3">
      <div class="card shadow-sm border-0 p-3 d-flex flex-row align-items-center">
        <div class="bg-danger text-white rounded-3 p-3 me-3">
      <img src="{{url('/')}}/admin_assets/img/svg/student-risk.svg" alt="x" class="svg">
        </div>
        <div>
          <small class="text-muted">Students at Risk</small>
          <h3 class="mb-0">12</h3>
        </div>
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <div class="card shadow-sm border-0 p-3 d-flex flex-row align-items-center">
        <div class="bg-primary text-white rounded-3 p-3 me-3">
         <img src="{{url('/')}}/admin_assets/img/svg/student-participate.svg" alt="x" class="svg">
        </div>
        <div>
          <small class="text-muted">Students participated in CLM</small>
          <h3 class="mb-0">40</h3>
        </div>
      </div>
    </div>
  </div>

  <!-- BOTTOM CARDS -->
  <div class="row g-4">

    <!-- Lifestyle Score -->
    <div class="col-lg-4">
      <div class="card shadow-sm border-0 h-100">
        <div class="card-body text-center">
          <h5 class="fw-semibold">Lifestyle Score</h5>
          <div class="gauge my-4 mx-auto">
            <div class="needle"></div>
          </div>

          <h6 class="text-primary fw-bold">Medium</h6>
        </div>
      </div>
    </div>

    <!-- Avg BMI -->
    <div class="col-lg-5">
      <div class="card shadow-sm border-0 h-100">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center">
            <h5 class="fw-semibold">Avg Student BMI</h5>
            <span class="badge bg-success-subtle text-success border border-success">
              Healthy
            </span>
          </div>

          <h2 class="my-3">20.9</h2>

          <div class="bmi-scale mt-4">
            <span>15</span><span>18.5</span><span>25</span><span>30</span><span>40</span>
            <div class="bmi-indicator"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Questionnaire -->
    <div class="col-lg-3">
      <div class="card shadow-sm border-0 h-100">
        <div class="card-body">
          <h5 class="fw-semibold mb-4">Questionnaire Completion Percent</h5>

          <div class="donut mx-auto mb-4">
            <span>75%</span>
          </div>

          <div class="small">
            <div class="d-flex align-items-center mb-2">
              <span class="legend completed me-2"></span> Students completed Questionnaire
            </div>
            <div class="d-flex align-items-center">
              <span class="legend incomplete me-2"></span> Incompleted
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

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

   </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
let sectionCount = 2;

function renderSections() {
    let wrapper = $('#sections-wrapper');
    wrapper.html('');
    for (let i = 0; i < sectionCount; i++) {
        wrapper.append(`
            <div class="row mb-2 section-card">
                <div class="col-md-6">
                    <label for="total_students" class="il-gray fs-16 fw-500 align-center mb-10">Section name</label>
                    <input type="text" name="sections[${i}][name]" class="form-control ih-medium ip-light radius-xs b-light px-15" placeholder="Section ${i + 1} Name" required>
                </div>
                <div class="col-md-6">
                    <label for="total_students" class="il-gray fs-16 fw-500 align-center mb-10">Total Students</label>
                    <input type="number" name="sections[${i}][student_count]" class="form-control ih-medium ip-light radius-xs b-light px-15 section-students" placeholder="Total Students" required>
                </div>
            </div>
        `);
    }
    updateTotal();
}

function updateTotal() {
    let total = 0;
    $('.section-students').each(function () {
        total += parseInt($(this).val()) || 0;
    });
    $('#total_students').val(total);
}

$('#create-class-btn').on('click', function () {
    $('#classForm')[0].reset();
    $('#class_id').val('');
    sectionCount = 2;
    $('#sectionCount').val(sectionCount);
    renderSections();
    $('#modal-basic .modal-title').text('Add Class');
    $('#classSubmit').text('Save');
});

$('#increase').on('click', function () {
    sectionCount++;
    $('#sectionCount').val(sectionCount);
    renderSections();
});

$('#decrease').on('click', function () {
    if (sectionCount > 1) {
        sectionCount--;
        $('#sectionCount').val(sectionCount);
        renderSections();
    }
});

$(document).on('input', '.section-students', updateTotal);

// Initialize on load
$(document).ready(function () {
    renderSections();
});

    // Edit class
    $(document).on('click', '.edit-class-btn', function(){
        const classData = $(this).data('class');
        const sections = $(this).data('sections');

        $('#classForm')[0].reset();
        $('#class_id').val(classData.id);
        $('#class_name').val(classData.name);

        let html = '';
        sections.forEach((s,i) => {
            html += `<div class="card p-3 bg-shadow-theme1 mt-2 section-card">
                        <input type="hidden" name="sections[${i}][id]" value="${s.id}">
                        <label>Section Name</label>
                        <input type="text" name="sections[${i}][name]" value="${s.name}" class="form-control mb-2" required>
                        <label>Students Count</label>
                        <input type="number" name="sections[${i}][student_count]" value="${s.student_count}" class="form-control mb-2" required>
                        <label>Total Boys</label>
                        <input type="number" name="sections[${i}][boys_count]" value="${s.boys_count || 0}" class="form-control mb-2" required>
                        <label>Total Girls</label>
                        <input type="number" name="sections[${i}][girls_count]" value="${s.girls_count || 0}" class="form-control mb-2" required>
                        ${i==0 ? '<button type="button" class=" btn-danger  mt-2 remove-section" style="display:none;">Remove Section</button>' : '<button type="button" class="btn btn-danger btn-sm mt-2 remove-section">Remove Section</button>'}
                     </div>`;
        });
        $('#sections-wrapper').html(html);
        sectionIndex = sections.length;
        $('#modal-basic .modal-title').text('Edit Class');
        $('#classSubmit').text('Update');
        $('#modal-basic').modal('show');
    });

    $('#classForm').on('submit', function(e){
        e.preventDefault();
        let classId = $('#class_id').val();
        let url = classId ? `classes` : '/classes';
        let method = classId ? 'PUT' : 'POST';
        let formData = new FormData(this);
        if(classId) formData.append('_method','PUT');

        $.ajax({
            url: url,
            method: 'POST',
            data: formData,
            processData:false,
            contentType:false,
            success:function(res){
                $('#modal-basic').modal('hide');
                toastr.success("sdfsdfsd");
            },
            error:function(err){
                alert(err.responseJSON.message || 'Something went wrong!');
            }
        });
    });

    $(document).on('click', '.delete-class-btn', function(){
        if(!confirm('Are you sure you want to delete this class?')) return;
        let id = $(this).data('id');
        $.ajax({
            url:`/classes/${id}`,
            type:'DELETE',
            success:function(res){
                toastr.success("sdfsdfsd");
                location.reload();
            },
            error:function(){
                alert('Delete failed');
            }
        });
    });
});
</script>
@endsection