@extends('layout.master')
@section('content')
    <div class="container-fluid res" style="padding-top:2%">

      <div class="row">
        <div class="col-md-5">

          <center>
            <h3 class=" h1-responsive" style="font-weight:500;font-size:40px;color:#5DADE2">
              Register
            </h3>
          </center>

          <div class="card">

            <div class="card-body">
            
                @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                  @if(Session::has('alert-' . $msg))
                    <div class="alert alert-{{ $msg }}" role="alert" style="font-size:13px;">
                       {{ Session::get('alert-' . $msg) }} 
                      </div>
                    {{ session()->forget('alert-' . $msg) }}
                  @endif
              @endforeach   

                <form  method="post" action="{{ url('institute/register') }}" class="z-index-5"    onsubmit="return ValidateReg()">
                  @csrf
                  <div class="form-group">
                    <label class="form-label">Institute Name :</label>
                      <input type="text" id="institute_name" name="institute_name" class="form-control form-control-sm" required  value=""
                      minlength="3" maxlength="100">
                      @error('institute_name')
                          <span class="text-danger">{{ $message }}</span>
                        @enderror
                  </div>

                  <div class="row">
                    <div class="col"> 
                      <div class="form-group">
                      <label class="form-label">Contact Number :</label>
                        <input type="text" id="contact_no" name="contact_no" minlength="10" maxlength="10" class="form-control form-control-sm" required  value="" onkeypress="return isNumber(event)">
                        @error('contact_no')
                          <span class="text-danger">{{ $message }}</span>
                        @enderror
                      </div>
                    </div>

                    <div class="col"> 
                      <div class="form-group">
                          <label class="form-label">Email Address :</label>
                          <input type="email" id="email_id" name="email_id" class="form-control form-control-sm" required  value="">
                          @error('email')
                          <span class="text-danger">{{ $message }}</span>
                        @enderror
                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col"> 
                    <div class="form-group">
                        <label class="form-label">Password :  <small class="text-muted">At least 6 characters</small></label>
                        <input type="password" id="password" name="password" minlength="6"  class="form-control form-control-sm" required  value="">
                        @error('password')
                          <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                  </div>
                  
                  <div class="col"> 
                    <div class="form-group">
                        <label class="form-label">Confirm Password :</label>
                        <input type="password" id="confirm_password" name="confirm_password" minlength="6" class="form-control form-control-sm" required  value="">
                        @error('confirm_password')
                          <span class="text-danger">{{ $message }}</span>
                        @enderror
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="col">
                      <div class="form-group">
                          <label class="form-label">State :</label>
                          <select class="form-control form-control-sm" id="state_id" name="state_id" required onChange="getCity(this.value)">
                            <option value="">Select State</option>