@extends('admin.include.main')
@section('content')

    <div class="ibox-content">
        <h2>ADD CLASS</h2>
        <form action="{{route('class.store')}}" method="POST" >
            @csrf
            <div class="form-group">
                <div class="row"> 
                <div class="col-lg-12">
                    <div class="widget style1z">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <h5> Class Name<span class="text-danger">*</span></h5>
                                    <div class="controls text-dark">
                                        <input type="text" name="class_name" id="cname" class="form-control" data-validation-required-message=" Class Name is required" >
                                        @if ($errors->has('class_name'))
                                        <div class="error" style="color:red">{{ $errors->first('class_name') }}</div>
                                    @endif
                                    
                                    
                                    
                                    </div>


                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <h5> Class In Numeric<span class="text-danger">*</span></h5>
                                    <div class="controls text-dark">
                                        <input type="number" name="class_symbolic" id="num" class="form-control">
                                        @if ($errors->has('class_symbolic'))
                                        <div class="error" style="color:red">{{ $errors->first('class_symbolic  ') }}</div>
                                    @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div> 

        </div>
        <h2>Fee Details</h2>
        <div class="form-group">
                <div class="row"> 
                    
                <div class="col-lg-12">
                         @if($fdc->isEmpty())
                            <div class="text-center">
                                    <h2 class="text-danger">Please Add Fee Type First </h2>
                             </div>
                            @else
                            <div>
                                <div class="widget style1z">
                
                                    <div class="row">
                                    
                                        @foreach($feetype as $f)
                                        @if($f->type == "default")
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <h5> {{$f->name}}<span class="text-danger">*</span></h5>
                                                    <div class="controls text-dark">
                                                                                                            <input type="text" name="all_fees[{{$a}}]" id="cname" class="form-control" data-validation-required-message="Admission Fee is Required" >
                                                    </div>
                                                </div>
                                            </div>
                                            @endif  
                                        @endforeach
                                        
                                        
                                        
                                    </div>
                                    <div class="row" id="dynamic_field">
                                        
                                    </div>
                                </div>
                                <div class="inline">
                                    <button type="button" name="add" id="add" class="btn btn-success" data-toggle="modal" data-target="#feemodal" id="btnfeemodal">Add More</button>
                                    <button type="submit" class="btn btn-success">Submit</button>
                                </div>  
                            </div>
                            @endif
                </div> 
                
                

         </div>
       </form>

    </div>
<div class="modal" id="feemodal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Addition of Fee</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">

            <div class="form-group row">
                <label class="col-sm-4 col-form-label">Select Fee Type<span class="text-danger">*</span></label>
                <div class="col-sm-8">
                    <select class="form-control m-b" id="modalfeename">
                            <option value="" selected disabled>Select Fee Type</option>
                            @foreach($feetype as $ft)
                            @if($ft->type == "class")
                            <option  value="{{$ft->name}}">{{$ft->name}}</option>
                            @endif
                            @endforeach

                        </select>
                </div>
            </div>
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
            <button type="button" class="btn btn-success" data-dismiss="modal" onclick="addfee(this)" >Submit</button>
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>
    

            



@endsection

<script type="text/javascript">
    function addfee(val){
        var datas=document.getElementById('modalfeename').value;
        debugger;
        var x = datas.toLowerCase()
        .replace(/[^a-z0-9 -]/g, '') // remove invalid chars
        .replace(/\s+/g, '_') // collapse whitespace and replace by -
        .replace(/-+/g, '_');
        // alert(x);
        var detaildisplay=document.getElementById('dynamic_field').innerHTML +='<div class="col-md-4" id="extra_div"><div class="form-group"><h5>'+datas+'<span class="text-danger">*</span></h5><div class="controls text-dark"><input type="number" name="all_fees['+x+']" id="registeration" class="form-control"  /></div></div> </div>';
        // <span><i class="fa fa-trash " ></i></span>

        debugger;
    }
</script>