stationery-management<div>
    <div wire:ignore.self class="modal fade" id="AddRecord" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header vd_bg-blue vd_white">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
                    <h4 class="modal-title" id="exampleModalLong">Add New Employee</h4>
                </div>
                <div class="modal-body">
                    <form wire:submit.prevent="addRecord" class="form-horizontal" enctype="multipart/form-data" method="post" accept-charset="utf-8">
                        <div class="row">
                          <div class="col-sm-12">
                            <div class="form-group">
                               <div class="col-lg-8 col-md-offset-2">
                                <label for="name">Employee Name <span class="vd_red">*</span></label>
                                <input type="text" class="form-control @error('name')  vd_bd-red @enderror" wire:model.lazy="name" value="{{ old('name') }}" placeholder="Employee Full Name" value="" data-toggle="tooltip" data-placement="top" data-original-title="Employee Full Name">
                                @error('name')
                                <span class="help-block">{{ $message }}</span>    
                                @enderror </div>
                            </div>
                            <div class="form-group">
                              <div class="col-lg-8 col-md-offset-2">
                              <label for="name">Mobile Number <span class="vd_red">*</span></label>
                              <input type="text" class="form-control @error('mobile')  vd_bd-red @enderror" wire:model.lazy="mobile" value="{{ old('mobile') }}", pattern="[12456789][0-9]{9}" title='Enter 10 digits mobile no.', onkeypress = 'return isNumber(event);', placeholder="Mobile Number" data-toggle="tooltip" data-placement="top" data-original-title="Enter 10 digit Mobile Number">
                                @error('mobile')
                                <span class="help-block">{{ $message }}</span>    
                                @enderror </div>
                            </div>
                            <div class="form-group">
                              <div class="col-lg-8 col-md-offset-2">
                              <label for="name">E-mail Address <span class="vd_red">*</span></label>
                              <input type="email" class="form-control @error('email')  vd_bd-red @enderror" wire:model.lazy="email" value="{{ old('email') }}" placeholder="E-mail Address" data-toggle="tooltip" data-placement="top" data-original-title="E-mail Address">
                                @error('email')
                                <span class="help-block">{{ $message }}</span>    
                                @enderror </div>
                            </div>
                            <div class="form-group">
                              <div class="col-lg-4 col-md-offset-2">
                                <label for="name">Date of Joining <span class="vd_red">*</span></label>
                                <div class="input-group">
                                <input type="text" placeholder="YYYY/MM/DD" class="form-control DojDate readonly @error('doj') vd_bd-red @enderror" wire:model.lazy="doj" id="doj" value="{{ old('doj') }}" autocomplete="off" required="true" onchange="this.dispatchEvent(new InputEvent('input'))">
                                <span class="input-group-addon" data-datepicker="#doj"><i class="fa fa-calendar"></i></span> </div>
                                @error('doj') <span class="help-block">{{ $message }}</span> @enderror </div>
                              <div class="col-lg-4">
                                <label for="name">Date of Birth <span class="vd_red">*</span></label>
                                <div class="input-group">
                                <input type="text" placeholder="DD/MM" class="form-control DobDate readonly @error('dob') vd_bd-red @enderror" wire:model.lazy="dob" id="dob" value="{{ old('dob') }}" autocomplete="off" required="true" onchange="this.dispatchEvent(new InputEvent('input'))">
                                <span class="input-group-addon" data-datepicker="#dob"><i class="fa fa-calendar"></i></span> </div>
                                @error('dob') <span class="help-block">{{ $message }}</span> @enderror </div>                                
                            </div>                            
                            <div class="form-group">
                              <div class="col-lg-8 col-md-offset-2">
                              <label for="name">Campus <span class="vd_red">*</span></label>
                              <select wire:model.live="campus" class="form-control" required="TRUE" >
                                <option value="">Plase select Campus</option>
                                @foreach ($campusList as $campusRec )
                                <option value="{{ $campusRec->id }}"> {{ $campusRec->name }} </option>  
                                @endforeach
                                </select>
                                @error('campus')
                                <span class="help-block">{{ $message }}</span>    
                                @enderror </div>
                            </div>                                                         
                          </div>
                          <!-- col-sm-12 -->
                        </div>
                </div>
                <div class="modal-footer background-login">
                    <button class="btn btn-success waves-effect waves-light" type="submit"><i class="fa fa-refresh"></i> Save Record</button>    
                    <button type="button" class="btn vd_btn vd_bg-grey" data-dismiss="modal" wire:click="closeModel">Close</button>
                </div>
                </form>                
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div wire:ignore.self class="modal fade" id="UpdateRecord" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header vd_bg-blue vd_white">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i></button>
                    <h4 class="modal-title" id="exampleModalLong">Update Employee Detail</h4>
                </div>
                <div class="modal-body">
                    <form wire:submit.prevent="editRecord" class="form-horizontal" enctype="multipart/form-data" method="post" accept-charset="utf-8">
                        <div class="row">
                          <div class="col-sm-12">
                            <div class="form-group">
                              <div class="col-lg-8 col-md-offset-2">
                              <label for="name">Employee Name <span class="vd_red">*</span></label>
                                <input type="text" class="form-control @error('name')  vd_bd-red @enderror" wire:model.lazy="name" value="{{ old('name') }}" placeholder="Employee Full Name" value="" data-toggle="tooltip" data-placement="top" data-original-title="Employee Full Name">
                                @error('name')
                                <span class="help-block">{{ $message }}</span>    
                                @enderror </div>
                            </div>
                            <div class="form-group">
                              <div class="col-lg-8 col-md-offset-2">
                              <label for="name">Mobile Number <span class="vd_red">*</span></label>
                              <input type="text" class="form-control @error('mobile')  vd_bd-red @enderror" wire:model.lazy="mobile" value="{{ old('mobile') }}", pattern="[12456789][0-9]{9}" title='Enter 10 digits mobile no.', onkeypress = 'return isNumber(event);', placeholder="Mobile Number" data-toggle="tooltip" data-placement="top" data-original-title="Enter 10 digit Mobile Number">
                                @error('mobile')
                                <span class="help-block">{{ $message }}</span>    
                                @enderror </div>
                            </div>
                            <div class="form-group">
                              <div class="col-lg-8 col-md-offset-2">
                              <label for="name">E-mail Address <span class="vd_red">*</span></label>
                              <input type="email" class="form-control @error('email')  vd_bd-red @enderror" wire:model.lazy="email" value="{{ old('email') }}" placeholder="E-mail Address" data-toggle="tooltip" data-placement="top" data-original-title="E-mail Address">
                                @error('email')
                                <span class="help-block">{{ $message }}</span>    
                                @enderror </div>
                            </div>
                            <div class="form-group">
                              <div class="col-lg-4 col-md-offset-2">
                                <label for="name">Date of Joining <span class="vd_red">*</span></label>
                                <div class="input-group">
                                <input type="text" placeholder="YYYY/MM/DD" class="form-control DojDate readonly @error('doj') vd_bd-red @enderror" wire:model.lazy="doj" id="doj" value="{{ old('doj') }}" autocomplete="off" required="true" onchange="this.dispatchEvent(new InputEvent('input'))">
                                <span class="input-group-addon" data-datepicker="#doj"><i class="fa fa-calendar"></i></span> </div>
                                @error('doj') <span class="help-block">{{ $message }}</span> @enderror </div>
                              <div class="col-lg-4">
                                <label for="name">Date of Birth <span class="vd_red">*</span></label>
                                <div class="input-group">
                                <input type="text" placeholder="DD/MM" class="form-control DobDate readonly @error('dob') vd_bd-red @enderror" wire:model.lazy="dob" id="dob" value="{{ old('dob') }}" autocomplete="off" required="true" onchange="this.dispatchEvent(new InputEvent('input'))">
                                <span class="input-group-addon" data-datepicker="#dob"><i class="fa fa-calendar"></i></span> </div>
                                @error('dob') <span class="help-block">{{ $message }}</span> @enderror </div>                                
                            </div>
                            <div class="form-group">
                              <div class="col-lg-8 col-md-offset-2">
                              <label for="name">Campus <span class="vd_red">*</span></label>
                              <select wire:model.live="campus" class="form-control" required="TRUE" >
                                <option value="">Plase select Campus</option>
                                @foreach ($campusList as $campusRec )
                                <option value="{{ $campusRec->id }}"> {{ $campusRec->name }} </option>  
                                @endforeach
                                </select>
                                @error('campus')
                                <span class="help-block">{{ $message }}</span>    
                                @enderror </div>
                            </div>                                                                                                               
                          </div>
                          <!-- col-sm-12 -->
                        </div>
                </div>
                <div class="modal-footer background-login">
                    <button class="btn btn-success waves-effect waves-light" type="submit"><i class="fa fa-refresh"></i> Save Record</button>    
                    <button type="button" class="btn vd_btn vd_bg-grey" data-dismiss="modal" wire:click="closeModel">Close</button>
                </div>
                </form>                
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>    
</div>
@push('editorScript')
<link href="{{ url('backend/layouts/js/bootstrap-datepicker.css')}}" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{{ url('backend/layouts/js/bootstrap-datepicker.min.js')}}"></script>
<script type="text/javascript">
$(document).ready(function () {
      $(".readonly").keydown(function(e){
        e.preventDefault();
        });         
    $(".DojDate").datepicker({
        changeMonth: true,
        clearBtn: true,
        changeYear: true,
        format: "yyyy-mm-dd",
    }); 
    $(".DobDate").datepicker({
        changeMonth: true,
        clearBtn: true,
        changeYear: true,
        format: "dd-M",
    }); 

    $( '[data-datepicker]' ).click(function(e){ 
        var data=$(this).data('datepicker');
        $(data).focus();
    });         
});   
</script>
@endpush