@extends('admin.master_layout')
@section('contant')
<!-- Main content -->
<form class="form-horizontal" action="{{ url('insert-user') }}" method="post">
  @csrf
<section class="content">
<div class="container-fluid">
  <div class="row">
    <div class="col-7" style="margin-top:20px;">
           <div class="card" style="height:650px;">
          
              <div class="row" style="padding:8px 15px;">
                <div class="col-6">
                  <div style="font-size:20px; color:#002D3E;"><b>Create New User</b></div>
                </div>
              
                <div class="col-6" style="text-align:right;">
                  <a href="{{ route('manage-users') }}" class="btn btn-success btn-sm"><i class="fa fa-list"></i>&nbsp; Manage User</a>
                </div>
              </div>
              <hr>
              <!-- /.card-header -->
              <!-- form start -->

                <div class="card-body">
                  <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-3 col-form-label">Name</label>
                    <div class="col-sm-8">
                      <input type="text" name="name" class="form-control" value="{{ old('name') }}" required>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-3 col-form-label">Email</label>
                    <div class="col-sm-8">
                      <input type="email" name="email" class="form-control" value="{{ old('email') }}" required>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-3 col-form-label">Contact</label>
                    <div class="col-sm-6">
                      <input type="text" name="contact" class="form-control" value="{{ old('contact') }}" required>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-3 col-form-label">User Type</label>
                    <div class="col-sm-4">
                      <select  class="form-control" name="user_type" id="user_type">
                        <option value="Admin">Admin</option>
                        <option value="User">User</option>
                      </select>
                    </div>
                  </div>

                  <div class="form-group row">
                    <label for="inputPassword3" class="col-sm-3 col-form-label">Password</label>
                    <div class="col-sm-5">
                      <input type="password" class="form-control" name="password" autocomplete="off" required>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="inputPassword3" class="col-sm-3 col-form-label">Confirm Password</label>
                    <div class="col-sm-5">
                      <input type="password" class="form-control" name="confirm_password" autocomplete="off" required>
                    </div>
                  </div>

                  <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-3 col-form-label"></label>
                    <div class="col-sm-5">
                      <div class="custom-control custom-checkbox">
                        <input name="status" class="custom-control-input custom-control-input-success" type="checkbox" value="1" id="customCheckbox4" checked>
                        <label for="customCheckbox4" class="custom-control-label">Active</label>
                      </div>
                    </div>
                  </div> 

                </div>

          
            </div>
        </div>

        <div class="col-5" style="margin-top:20px;">
          <div class="card" style="height:650px;">

             <div class="row" style="padding:8px 15px;">
                <div class="col-6">
                  <div style="font-size:20px; color:#002D3E;"><b>Set Roles</b></div>
                </div>
              
                <div class="col-6" style="text-align:right;">
                  
                </div>
              </div>
              <hr>

              <div class="row" style="padding:px 15px;">
                <div class="col-9">
                <div style="padding: 0px 30px;" id="roll_div">

                  <div>
                    <div class="custom-control custom-checkbox">
                      <input name="customer_support" class="custom-control-input custom-control-input-success" type="checkbox" value="1" id="Checkbox1">
                      <label for="Checkbox1" class="custom-control-label">Customer Support</label>
                    </div>
                  </div>

                  <div style="padding-top:7px;">
                    <div class="custom-control custom-checkbox">
                      <input name="user_profile" class="custom-control-input custom-control-input-success" type="checkbox" value="1" id="Checkbox2">
                      <label for="Checkbox2" class="custom-control-label">User Profile</label>
                    </div>
                  </div>

                  <div style="padding-top:7px;">
                    <div class="custom-control custom-checkbox">
                      <input name="student" class="custom-control-input custom-control-input-success" type="checkbox" value="1" id="Checkbox3">
                      <label for="Checkbox3" class="custom-control-label">Student</label>
                    </div>
                  </div>

                  <div style="padding-top:7px;">
                    <div class="custom-control custom-checkbox">
                      <input name="school" class="custom-control-input custom-control-input-success" type="checkbox" value="1" id="Checkbox4">
                      <label for="Checkbox4" class="custom-control-label">School</label>
                    </div>
                  </div>

                  <div style="padding-top:7px;">
                    <div class="custom-control custom-checkbox">
                      <input name="bus_admin" class="custom-control-input custom-control-input-success" type="checkbox" value="1" id="Checkbox5">
                      <label for="Checkbox5" class="custom-control-label">Bus Admin</label>
                    </div>
                  </div>

                  <div style="padding-top:7px;">
                    <div class="custom-control custom-checkbox">
                      <input name="advance_team" class="custom-control-input custom-control-input-success" type="checkbox" value="1" id="Checkbox6">
                      <label for="Checkbox6" class="custom-control-label">Advance Team</label>
                    </div>
                  </div>

                  <div style="padding-top:7px;">
                    <div class="custom-control custom-checkbox">
                      <input name="track_ba" class="custom-control-input custom-control-input-success" type="checkbox" value="1" id="Checkbox7">
                      <label for="Checkbox7" class="custom-control-label">Track BA & Advance Team</label>
                    </div>
                  </div>

                  <div style="padding-top:7px;">
                    <div class="custom-control custom-checkbox">
                      <input name="bus_driver" class="custom-control-input custom-control-input-success" type="checkbox" value="1" id="Checkbox8">
                      <label for="Checkbox8" class="custom-control-label">Bus Driver</label>
                    </div>
                  </div>

                  <div style="padding-top:7px;">
                    <div class="custom-control custom-checkbox">
                      <input name="vehicle" class="custom-control-input custom-control-input-success" type="checkbox" value="1" id="Checkbox9">
                      <label for="Checkbox9" class="custom-control-label">Vehicle</label>
                    </div>
                  </div>

                  <div style="padding-top:7px;">
                    <div class="custom-control custom-checkbox">
                      <input name="operation" class="custom-control-input custom-control-input-success" type="checkbox" value="1" id="Checkbox10">
                      <label for="Checkbox10" class="custom-control-label">Operations</label>
                    </div>
                  </div>

                  <div style="padding-top:7px;">
                    <div class="custom-control custom-checkbox">
                      <input name="payment" class="custom-control-input custom-control-input-success" type="checkbox" value="1" id="Checkbox11">
                      <label for="Checkbox11" class="custom-control-label">Payment</label>
                    </div>
                  </div>

                  <div style="padding-top:7px;">
                    <div class="custom-control custom-checkbox">
                      <input name="report" class="custom-control-input custom-control-input-success" type="checkbox" value="1" id="Checkbox12">
                      <label for="Checkbox12" class="custom-control-label">Report</label>
                    </div>
                  </div>

                  <div style="padding-top:7px;">
                    <div class="custom-control custom-checkbox">
                      <input name="request" class="custom-control-input custom-control-input-success" type="checkbox" value="1" id="Checkbox13">
                      <label for="Checkbox13" class="custom-control-label">Request</label>
                    </div>
                  </div>

                  <div style="padding-top:7px;">
                    <div class="custom-control custom-checkbox">
                      <input name="feedback" class="custom-control-input custom-control-input-success" type="checkbox" value="1" id="Checkbox14">
                      <label for="Checkbox14" class="custom-control-label">Feedback</label>
                    </div>
                  </div>

                  <div style="padding-top:7px;">
                    <div class="custom-control custom-checkbox">
                      <input name="notification" class="custom-control-input custom-control-input-success" type="checkbox" value="1" id="Checkbox15">
                      <label for="Checkbox15" class="custom-control-label">Notification/SMS</label>
                    </div>
                  </div>

                  <div style="padding-top:7px;">
                    <div class="custom-control custom-checkbox">
                      <input name="expense" class="custom-control-input custom-control-input-success" type="checkbox" value="1" id="Checkbox16">
                      <label for="Checkbox16" class="custom-control-label">Expenses</label>
                    </div>
                  </div>

                  <div style="padding-top:7px;">
                    <div class="custom-control custom-checkbox">
                      <input name="setting" class="custom-control-input custom-control-input-success" type="checkbox" value="1" id="Checkbox17">
                      <label for="Checkbox17" class="custom-control-label">App Setting</label>
                    </div>
                  </div>

                  </div>
                </div>
              
                <div class="col-3" style="text-align:right;">
                <button type="submit" class="btn btn-info float-left">Submit</button>
                </div>
              </div>

          

          </div>
        </div>
      </div>
      </div>
</section>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $('#school_div').hide(); // Hide school_div initially
    
    $('#user_type').change(function(){
      if($(this).val() == 'School'){
        $('#school_div').show(); 
        $('#roll_div').hide(); 
      } else {
        $('#school_div').hide();
        $('#roll_div').show(); 
      }
    });
  });
</script>

@endsection