@extends('layouts.admin')
@section('content')

<div class="card">
    <div class="card-header text-center">
      {{-- <img src="{{asset('images/bpmi_header.jpg')}}" alt="bpmi_header" style="max-width: 100%;width: 600px"> --}}
      <h4>Nomination Form</h4>
    </div>

    <div class="card-body">
        <form method="POST" action="{{ route("nominations.store") }}" enctype="multipart/form-data">
            @csrf
            <div class="form-group">
                <label class="" for="subject">Subject of the letter</label>
                <input class="form-control {{ $errors->has('subject') ? 'is-invalid' : '' }}" type="text" name="subject" id="subject" value="{{ old('subject', '') }}">
                @if($errors->has('subject'))
                    <div class="invalid-feedback">
                        {{ $errors->first('subject') }}
                    </div>
                @endif
            </div>
            <div class="form-group">
                <label for="file">Nomination File</label>
                <div class="form-group group-input">
                    <div class="input-group input-file" name="file">
                        <input type="file" name="file" id="file" class="form-control" placeholder='Choose a file...' />
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-4 form-group">
                    <label class="" for="organization_id">{{ trans('cruds.nominatedOrganisation.fields.organization') }}</label>
                    <select class="form-control select2 {{ $errors->has('organization') ? 'is-invalid' : '' }}" name="organization_id" id="organization_id">
                        @foreach($organizations as $id => $entry)
                            <option value="{{ $id }}" {{ old('organization_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                        @endforeach
                    </select>
                    @if($errors->has('organization'))
                        <div class="invalid-feedback">
                            {{ $errors->first('organization') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.nominatedOrganisation.fields.organization_helper') }}</span>
                </div>
                <div class="form-group col-4">
                    <label class="" for="number_of_trainee">{{ trans('cruds.nominatedOrganisation.fields.number_of_trainee') }}</label>
                    <input class="form-control {{ $errors->has('number_of_trainee') ? 'is-invalid' : '' }}" type="number" name="number_of_trainee" id="number_of_trainee" value="{{ old('number_of_trainee', '') }}" step="1" >
                  <div id="error">
                        <span></span>
                  </div>
                    @if($errors->has('number_of_trainee'))
                        <div class="invalid-feedback">
                            {{ $errors->first('number_of_trainee') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.nominatedOrganisation.fields.number_of_trainee_helper') }}</span>
                  
                </div>
                <div class="form-group col-4 pt-4">
                    <button class="btn btn-success btn-block" id="org_trainne">
                        {{ trans('global.save') }}
                    </button>
                </div>
            </div>
            <div class="form-group mt-2">
                <table class="table table-striped">
                    <thead>
                      <tr>
                        <th scope="col">SL</th>
                        <th scope="col">Organization</th>
                        <th scope="col">Number Of Trainee</th>
                        <th scope="col">Action</th>
                      </tr>
                    </thead>
                    <tbody id="trShow">

                    </tbody>
                  </table>
              </div>
       
            
            <div class="form-group">
                <label class="" for="course_for">{{ trans('cruds.nomination.fields.course_for') }}</label>
                <input class="form-control {{ $errors->has('course_for') ? 'is-invalid' : '' }}" type="text" name="course_for" id="course_for" value="{{ old('course_for', '') }}" >
                @if($errors->has('course_for'))
                    <div class="invalid-feedback">
                        {{ $errors->first('course_for') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.nomination.fields.course_for_helper') }}</span>
            </div>
            <div class="form-group">
                <label class="" for="course_fee">{{ trans('cruds.nomination.fields.course_fee') }}</label>
                <input class="form-control {{ $errors->has('course_fee') ? 'is-invalid' : '' }}" type="number" name="course_fee" id="course_fee" value="{{ old('course_fee', '') }}" step="1" >
                @if($errors->has('course_fee'))
                    <div class="invalid-feedback">
                        {{ $errors->first('course_fee') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.nomination.fields.course_fee_helper') }}</span>
            </div>
            <div class="form-group">
                <label class="" for="batch_id">Select Course</label>
                <select class="form-control select2 {{ $errors->has('batch') ? 'is-invalid' : '' }}" name="course_id" id="course_id" >
                    @foreach($courses as $id => $entry)
                        <option value="{{ $entry->id }}" {{ old('course_id') == $id ? 'selected' : '' }}>{{ $entry->title }}</option>
                    @endforeach
                </select>
              
            </div>
          
            <div class="form-group">
                <button class="btn btn-danger" type="submit">
                    {{ trans('global.save') }}
                </button>
            </div>
        </form>
    </div>
</div>



@endsection

@section('scripts')
<script>
    let exist_org_id=[]
        $('#org_trainne').on('click', function(e) {
            e.preventDefault();
            let organization_id = $('#organization_id').val();
            let organization = $('#organization_id option:selected').text();
            let number_of_trainee = $('#number_of_trainee').val(); 
            let tr_length=$('#trShow tr').length+1;
            if(exist_org_id.includes(organization_id)){
                alert('This organization already added')
            }else{
                $('#trShow').append(
                `<tr>
                    <td>${tr_length}</td>
                    <td class="org_name"><input type='hidden' name='organization_id[]' value='${organization_id}' />${organization}</td>
                    <td><input type='hidden' name='number_of_trainee[]' value='${number_of_trainee}' /> ${number_of_trainee}</td>
                    <td>
                        <button type="submit" id="${number_of_trainee}" class="btn btn-danger btn-sm delete_data"><i class="fa fa-trash"></i></button>
                    </td>
                    
                </tr>`
            );
                exist_org_id.push(organization_id)
            }
            
        });

        $('body').on('click', '.delete_data', function(e) {
            $(this).closest('tr').remove();
        })
        function bs_input_file() {
	    $(".input-file").before(
		function() {
			if ( ! $(this).prev().hasClass('input-ghost') ) {
				var element = $("<input type='file' class='input-ghost' style='visibility:hidden;display:none;height:0'>");
				element.attr("name",$(this).attr("name"));
				element.change(function(){
					element.next(element).find('input').val((element.val()).split('\\').pop());
				});
				$(this).find("button.btn-choose").click(function(){
					element.click();
				});
				$(this).find("button.btn-reset").click(function(){
					element.val(null);
					$(this).parents(".input-file").find('input').val('');
				});
				$(this).find('input').css("cursor","pointer");
				$(this).find('input').mousedown(function() {
					$(this).parents('.input-file').prev().click();
					return false;
				});
				return element;
			}
		}
	);
}
$(function() {
	bs_input_file();
});
</script>
@endsection