
@extends('includes.master')

@section('content')

<div class="main-mobile-header doc-mobile-header">
      <a id="menuLink" href="#" class="menu-link"><i class="ri-menu-line"></i></a>
    </div>

   

    



     <div class="main main-app p-3 p-lg-4">
     	
        <div class="mb-4">
          <ol class="breadcrumb fs-sm mb-1">
            <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Add Employee</li>
          </ol>
        </div>




      <div class="">
        
        <div class="row">

          <div class="col-lg-8">
            <h2 class="main-title">Add Employee</h2>
            
          </div>
          <div style="text-align: right;" class="col-lg-4 text-right">
           <!--  <button type="button" class="btn btn-primary">Add Employee</button> -->
            <!-- <a href="/form" class="btn btn-primary">Add Employee</a>
 -->
          </div>

        </div>

        <hr class="main-separator">        
    
        

<!--         <h5 id="section9" class="main-subtitle">Basic Example</h5>
 -->        <!-- <p>In this examples, we load the data from an existing HTML table.</p> -->

        <div class="card card-example">
          <div class="card-body" style="background-color:white;">
            <div class="row">
                            <h3 class="heading">Basic Details</h3>
                            <div class="col-sm-4">
                                <div class="mb-3">

                                    <label class="form-label">Employee Name
                                        <span class="required-field">*</span>
                                    </label>
                                    <input type="text" name="employee_name" id="employee_name" placeholder="Employee Name" class="form-control">
                                </div>
                            </div><!-- Col -->
                            <div class="col-sm-4">
                                <div class="mb-3">
                                    <label class="form-label">Email
                                        <span class="required-field">*</span>
                                    </label>
                                    <input type="email" name="email" id="email" placeholder="Email" class="form-control">
                                </div>
                            </div>
                            <!-- Col -->
                            <div class="col-sm-4">
                                <div class="mb-3"><label class="form-label" for="DateOfBirth" class="">Date Of
                                        Joining</label><label class="" style="color: red;">*</label>
                                    <input name="doj" type="date" id="doj" class="form-control" value=""><small style="color: red;"></small>
                                </div>
                            </div><!-- Col -->
                        </div><!-- Row -->
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="mb-3">
                                    <label class="form-label">Gender
                                        <span class="required-field">*</span>
                                    </label>
                                    <select name="gender" id="gender" class="js-example-basic-single form-select select2" data-width="100%">
                                        <option Selected>Select</option>
                                        <option value="Male">Male</option>
                                        <option value="Female">Female</option>
                                        <option value="Others">Others</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-sm-2">
                                <div class="mb-3">
                                    <label class="form-label">code
                                        <span class="required-field">*</span>
                                    </label>
                                    <select name="country_code" id="" class="js-example-basic-single form-select select2" data-width="100%">
                                        <option Selected>Select</option>
                                        
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="mb-3">
                                    <label class="form-label" id="numb">Mobile Number
                                        <span class="required-field">*</span>
                                    </label>
                                    <input type="number" name="mobile_number" id="mobile_number" placeholder="Mobile No" class="form-control">
                                </div>
                            </div><!-- Col -->

                            <div class="col-sm-2">
                                <div class="mb-3">
                                    <label class="form-label">code
                                        <span class="required-field">*</span>
                                    </label>
                                    <select name="country_code" id="country_code" class="js-example-basic-single form-select select2" data-width="100%">
                                        <option Selected>Select</option>
                                        
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="mb-3">
                                    <label class="form-label">Emergency Contact Number</label>
                                    <input type="number" name="emergency_contact_number" placeholder="Emergency No" class="form-control">
                                </div>
                            </div><!-- Col -->
                        </div><!-- Row -->
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="mb-3"><label class="form-label" for="DateOfBirth" class="">Date Of
                                        Birth</label><label class="" style="color: red;">*</label>
                                    <input name="dob" id="dob" type="date" class="form-control" value=""><small style="color: red;"></small>
                                </div>
                            </div><!-- Col -->
                            <div class="col-sm-4">
                                <div class="mb-3">
                                    <label class="form-label">Designation<span class="required-field">*</span>
                                    </label>
                                    <input type="text" name="designation" id="designation" placeholder="Designation" class="form-control">
                                </div>
                            </div><!-- Col -->
                            <div class="col-sm-4">
                                <div class="mb-3">
                                    <label class="form-label">Blood Group
                                        <span class="required-field">*</span>
                                    </label>
                                    <select name="blood_group" id="blood_group" class="js-example-basic-single form-select select2" data-width="100%">
                                        <option Selected>Select</option>
                                        <option value="A+">A +ve</option>
                                        <option value="A-">A -ve</option>
                                        <option value="B+">B +ve</option>
                                        <option value="B-">B -ve</option>
                                        <option value="AB+">AB +ve</option>
                                        <option value="AB-">AB -ve</option>
                                        <option value="O+">O +ve</option>
                                        <option value="O-">O -ve</option>
                                    </select>
                                </div>
                            </div>
                        </div><!-- Row -->
          </div><!-- card-body -->
          
        </div><!-- card -->

        <br><br><br>

        

      </div><!-- container -->

     
    <style>
    tbody tr:hover {background-color: #F5F5F5;}
    .card-example>.card-body::before {
    content: ""
    }
    </style>
@endsection 
