@include('admin.common-layout.header')
<div class="dashboard-main-body">
  <div class="breadcrumb d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
    <div class="">
      <h1 class="fw-semibold mb-4 h6 text-primary-light">Add New Student</h1>
      <div class="">
        <a href="javascript:void(0);" class="text-secondary-light hover-text-primary hover-underline">Dashboard </a>
        <a href="javascript:void(0);" class="text-secondary-light hover-text-primary hover-underline "> / Student</a>
        <span class="text-secondary-light">/ Add New Student</span>
      </div>
    </div>
    <a href="javascript:void(0);" class="btn btn-primary-600 d-flex align-items-center gap-6 d-none">
      <span class="d-flex text-md">
        <i class="ri-add-large-line"></i>
      </span>
      Add Student
    </a>
  </div>
  <form action="{{ route('students.store') }}" method="POST" enctype="multipart/form-data" class="mt-24">
    @csrf
    <div class="row gy-3">
      <div class="col-lg-12">
        <div class="shadow-1 radius-12 bg-base h-100 overflow-hidden">
          <div class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center justify-content-between">
            <h6 class="text-lg fw-semibold mb-0">Personal Info</h6>
          </div>
          <div class="card-body p-20">
            <div class="row gy-3">
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="academicYear" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Academic Year <span class="text-danger-600">* </span> </label>
                  <select name="academic_year" class="form-control form-select">
                    <option value="">Select</option>
                    @foreach($academicYear as $academicYears)
                    <option value="{{ $academicYears->id }}">{{ $academicYears->years }}</option>
                    @endforeach
                  </select>
                  @error('academic_year')
                      <small class="text-danger">{{ $message }}</small>
                  @enderror
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="boardSelection" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Board <span class="text-danger-600">* </span> </label>
                  <select name="board_id" id="boardSelection" class="form-control form-select">
                    <option value="" >Select a board</option>
                    @foreach($boards as $board)
                    <option value="{{ $board->id }}">{{ $board->board_name }}</option>
                    @endforeach
                  </select>
                  @error('board_id')
                      <small class="text-danger">{{ $message }}</small>
                  @enderror
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="classSelection" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Class <span class="text-danger-600">* </span> </label>
                  <select name="class_id" id="classSelection" class="form-control form-select">
                    <option value="" >Select a class</option>
                    @foreach($classes as $classe)
                    <option value="{{ $classe->id }}">{{ $classe->classes_name }}</option>
                    @endforeach
                  </select>
                  @error('class_id')
                      <small class="text-danger">{{ $message }}</small>
                  @enderror
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="subject" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Subject <span class="text-danger-600">* </span> </label>
                  <select name="subject_id" id="subject" class="form-control form-select">
                    <option value="" >Select subject</option> <!--Fetch from db!-->
                    @foreach($subjects as $subject)
                    <option value="{{ $subject->id }}">{{ $subject->subjects_name }}</option>
                    @endforeach
                  </select>
                  @error('subject_id')
                      <small class="text-danger">{{ $message }}</small>
                  @enderror
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="admissionNo" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Admission No <span class="text-danger-600">*</span> </label>
                  <input type="text" name="admission_no" class="form-control" id="admissionNo" placeholder="Enter admission number">
                  @error('admission_no')
                      <small class="text-danger">{{ $message }}</small>
                  @enderror
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="fullName" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Full Name <span class="text-danger-600">*</span> </label>
                  <input type="text" name="name" class="form-control" id="fullName" placeholder="Enter your Full Name">
                  @error('name')
                      <small class="text-danger">{{ $message }}</small>
                  @enderror
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="category" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Category </label>
                  <select name="category" id="category" class="form-control form-select">
                    <option value="">Select Category</option>
                    @foreach($category as $categorys)
                    <option value="{{ $categorys->id }}">{{ $categorys->category_name }}</option>
                    @endforeach
                  </select>
                  @error('category')
                      <small class="text-danger">{{ $message }}</small>
                  @enderror
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="gender" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Gender</label>
                  <select id="gender" name="gender" class="form-control form-select">
                    <option value="">Select Gender</option> 
                    @foreach($gender as $genders)
                    <option value="{{ $genders->id }}">{{ $genders->gender_name }}</option>
                    @endforeach
                  </select>
                  @error('gender')
                      <small class="text-danger">{{ $message }}</small>
                  @enderror
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="dateOfBirth" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Date Of Birth <span class="text-danger-600">*</span> </label>
                  <input type="date" name="dateofbirth" class="form-control" id="dateOfBirth">
                  @error('dateofbirth')
                      <small class="text-danger">{{ $message }}</small>
                  @enderror
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="age" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Age <span class="text-danger-600">*</span> </label>
                  <input type="number" name="age" class="form-control" id="age">
                  @error('age')
                      <small class="text-danger">{{ $message }}</small>
                  @enderror
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="phoneNumber" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Phone Number <span class="text-danger-600">*</span> </label>
                  <input type="text" name="phone" class="form-control" id="phoneNumber" placeholder="Enter your Phone Number">
                  @error('phone')
                      <small class="text-danger">{{ $message }}</small>
                  @enderror
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="studentEmail" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Email <span class="text-danger-600">*</span> </label>
                  <input type="email" name="email" class="form-control" id="studentEmail" placeholder="Enter your Email">
                  @error('email')
                      <small class="text-danger">{{ $message }}</small>
                  @enderror
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Student Photo <span class="text-danger-600">*</span> </label>
                  <div class="height-44-px p-4 d-flex justify-content-center align-items-center text-center fw-medium text-md cursor-pointer border border-neutral-400 radius-8 border-dashed bg-hover-neutral-200">
                    <!-- <span class="photoupload">Darg & drop a file here or click</span> -->
                    <input type="file" name="photo" class="photoupload">
                    @error('photo')
                      <small class="text-danger">{{ $message }}</small>
                  @enderror
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-12">
        <div class="shadow-1 radius-12 bg-base h-100 overflow-hidden">
          <div class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center justify-content-between">
            <h6 class="text-lg fw-semibold mb-0">Parent & Guardian Info </h6>
          </div>
          <div class="card-body p-20">
            <div class="row gy-3">
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="fathersName" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Fathers Name </label>
                  <input type="text" name="fathersName" class="form-control" id="fathersName" placeholder="Enter Fathers Name">
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="fathersPhoneNumber" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Phone Number </label>
                  <input type="tel" name="fathersPhoneNumber" class="form-control" id="fathersPhoneNumber" placeholder="Enter Fathers Number">
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="fathersFatherOccupation" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Father Occupation </label>
                  <input type="text" name="fathersFatherOccupation" class="form-control" id="fathersFatherOccupation" placeholder="Enter Father Occupation">
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="mothersName" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Mothers Name </label>
                  <input type="text" name="mothersName" class="form-control" id="mothersName" placeholder="Enter mothers Name">
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="mothersPhoneNumber" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Phone Number </label>
                  <input type="tel" name="mothersPhoneNumber" class="form-control" id="mothersPhoneNumber" placeholder="Enter mothers Number">
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="mothersFatherOccupation" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Father Occupation </label>
                  <input type="text" name="mothersFatherOccupation" class="form-control" id="mothersFatherOccupation" placeholder="Enter Father Occupation">
                </div>
              </div>
              <div class="col-12">
                <div class="mt-24">
                  <span class="text-lg fw-bold text-primary-light d-inline-block mb-8">Select a Guardian </span>
                  <div class="d-flex align-items-center flex-wrap gap-28">
                    <div class="form-check checked-primary d-flex align-items-center gap-2">
                      <input class="form-check-input" type="radio" name="guardian_type" value="father" id="selectFather">
                      <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="selectFather"> Father </label>
                    </div>
                    <div class="form-check checked-secondary d-flex align-items-center gap-2">
                      <input class="form-check-input" type="radio" name="guardian_type" value="mother" id="selectMother">
                      <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="selectMother"> Mother </label>
                    </div>
                    <div class="form-check checked-success d-flex align-items-center gap-2">
                      <input class="form-check-input" type="radio" name="guardian_type" value="other" id="selectOthers">
                      <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="selectOthers"> Others </label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="guardianName" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Guardian Name </label>
                  <input type="text" name="guardianName" class="form-control" id="guardianName" placeholder="Enter Guardian Name">
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="guardianEmailTwo" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Guardian Email </label>
                  <input type="email" name="guardianEmailTwo" class="form-control" id="guardianEmailTwo" placeholder="Enter Guardian Email">
                </div>
              </div>
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="guardianPhoneNumber" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Phone Number </label>
                  <input type="tel" name="guardianPhoneNumber" class="form-control" id="guardianPhoneNumber" placeholder="Enter Guardian Number">
                </div>
              </div>
              <div class="col-xl-12 col-sm-6">
                <div class="">
                  <label for="guardianGuardianAddress" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Guardian Address </label>
                  <input type="text" name="guardianGuardianAddress" class="form-control" id="guardianGuardianAddress" placeholder="Enter Guardian Address">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-12">
        <div class="shadow-1 radius-12 bg-base h-100 overflow-hidden">
          <div class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center justify-content-between">
            <h6 class="text-lg fw-semibold mb-0">Medical Details</h6>
          </div>
          <div class="card-body p-20">
            <div class="row gy-3">
              <div class="col-xxl-3 col-xl-4 col-sm-6">
                <div class="">
                  <label for="bloodGroup" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Blood Group</label>
                  <select name="bloodgroup" id="bloodGroup" class="form-control form-select">
                    <option value="" >Select blood group</option>
                    <option value="A+">A+</option>
                    <option value="AB+">AB+</option>
                    <option value="A-">A-</option>
                    <option value="AB-">AB-</option>
                    <option value="O+">O+</option>
                    <option value="O-">O-</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xxl-12">
        <div class="shadow-1 radius-12 bg-base h-100 overflow-hidden">
          <div class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center justify-content-between">
            <h6 class="text-lg fw-semibold mb-0">Address</h6>
          </div>
          <div class="card-body p-20">
            <div class="row gy-3">
              <div class="col-sm-6">
                <div class="">
                  <label for="currentAddress" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Current Address </label>
                  <input type="text" name="currentAddress" class="form-control" id="currentAddress" placeholder="Enter Current Address">
                </div>
              </div>
              <div class="col-sm-6">
                <div class="">
                  <label for="permanentAddress" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Permanent Address </label>
                  <input type="text" name="permanentAddress" class="form-control" id="permanentAddress" placeholder="Enter Permanent Address">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-12">
        <div class="shadow-1 radius-12 bg-base h-100 overflow-hidden">
          <div class="card-header border-bottom bg-base py-16 px-24 d-flex align-items-center justify-content-between">
            <h6 class="text-lg fw-semibold mb-0">Login Details</h6>
          </div>
          <div class="card-body p-20">
            <div class="row gy-3">
              <div class="col-sm-6">
                <div class="">
                  <label for="your-password" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Password <span class="text-danger-600">*</span></label>
                  <div class="position-relative">
                    <input type="password" name="password" id="password" class="form-control" placeholder="Enter your password">
                    <span class="toggle-password ri-eye-line cursor-pointer position-absolute end-0 top-50 translate-middle-y me-16 text-secondary-light" data-toggle="#password"></span>
                    @error('password')
                      <small class="text-danger">{{ $message }}</small>
                  @enderror
                  </div>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="">
                  <label for="confirm-password" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Confirm Password <span class="text-danger-600">*</span></label>
                  <div class="position-relative">
                    <input type="password" name="password_confirmation" id="confirm_password" class="form-control" placeholder="Confirm your password">
                    <span class="toggle-password ri-eye-line cursor-pointer position-absolute end-0 top-50 translate-middle-y me-16 text-secondary-light" data-toggle="#confirm_password"></span>
                    @error('password_confirmation')
                      <small class="text-danger">{{ $message }}</small>
                    @enderror
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-12">
        <div class="d-flex align-items-center justify-content-center gap-3 mt-8">
          <button type="reset" class="border border-danger-600 bg-hover-danger-200 text-danger-600 text-md px-50 py-11 radius-8">Cancel</button>
          <button type="submit" class="btn btn-primary-600 border border-primary-600 text-md px-28 py-12 radius-8">Save Changes</button>
        </div>
      </div>
    </div>
  </form>
</div>
@include('admin.common-layout.footer')