@extends('admin.layout.index')
@push('css-head')
@endpush
@section('content')
<!-- Page header -->
<div class="page-header page-header-light">
    <div class="breadcrumb-line breadcrumb-line-light header-elements-md-inline">
        <div class="d-flex">
            <div class="breadcrumb">
                <a href="{{url('/admin')}}" class="breadcrumb-item"><i class="icon-home2 mr-2"></i> Dashboard</a>
                <a href="{{url('/admin/courses')}}" class="breadcrumb-item"> Courses</a>
                <span class="breadcrumb-item active">Create New</span>
            </div>
        </div>
    </div>
</div>
<!-- /page header -->

<!-- Content area -->
<div class="content">
    <div class="card">
        <div class="card-body">
            @if (count($errors) > 0)
                <div class="alert alert-danger alert-no-border alert-txt-colored alert-close alert-dismissible fade show" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <strong>Whoops!</strong> There were some problems with your input.
                    <ul>
                      @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                      @endforeach
                    </ul>
                </div>
            @endif
            {!!Form::open(array('url'=>'admin/courses/store','method'=>'POST'))!!}
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Destination:</label>
                            <select class="form-control destination" name="destination_id" required=""> 
                                <option disabled="" selected="" value="">Choose One..</option>
                                @foreach($destinations as $row)
                                <option value="{{$row['id']}}::{{$row['name']}}">{{$row['name']}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-8" id="instituteDiv">
                        <div class="form-group">
                            <label>Institute:</label>
                            <select class="form-control select2 institute" name="institute_id" required=""> 
                                <option disabled="" selected="" value="">Choose One..</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4 d-none" id="campusDiv">
                        <div class="form-group">
                            <label>Campus:</label>
                            <select class="form-control campus select2" multiple name="campuses[]"> 
                                <option disabled="">Choose One..</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Course Level:</label>
                            <select class="form-control level" name="level_id" required=""> 
                                <option disabled="" selected="" value="">Choose One..</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Department:</label>
                            <input type="text" class="form-control" name="department" id="department" required="">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Intake:</label>
                            <select class="form-control select2 intake" multiple name="intakes[]" > 
                                <option disabled="">Choose One..</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Course Name:</label>
                            <input type="text" class="form-control" name="courseName" id="courseName" required="">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Course Length (month):</label>
                            <input type="number" class="form-control" name="courseLength" id="courseLength" required="">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Tution Fee:</label>
                            <input type="number" class="form-control" name="tutionFee" id="tutionFee" required="">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>IELTS:</label>
                            <input type="text" class="form-control" name="ielts" id="ielts">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>TOEFL:</label>
                            <input type="text" class="form-control" name="toefl" id="toefl">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Duolingo:</label>
                            <input type="text" class="form-control" name="duolingo" id="duolingo">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>PTE:</label>
                            <input type="text" class="form-control" name="pte" id="pte">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Scolarship:</label>
                            <input type="text" class="form-control" name="scholarship" id="scholarship">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Deposit Required:</label>
                            <input type="text" class="form-control" name="depositRequired" id="depositRequired" >
                            {{-- <div class="input-group">
                                <input type="number" min="0" max="100" class="form-control" name="depositRequired" id="depositRequired" >
                                <span class="input-group-addon mt-2">%</span>
                            </div> --}}
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label>SOP:</label>
                            <select class="form-control" name="sop" required=""> 
                                <option value="0">No</option>
                                <option selected="" value="1">Yes</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>CV:</label>
                            <select class="form-control" name="cv" required=""> 
                                <option value="0">No</option>
                                <option selected="" value="1">Yes</option>
                            </select>
                        </div>
                    </div>
                    {{-- <div class="col-md-3">
                        <div class="form-group">
                            <label>UCAS Fee:</label>
                            <select class="form-control" name="ucasFee" required=""> 
                                <option selected="" value="0">No</option>
                                <option value="1">Yes</option>
                            </select>
                        </div>
                    </div> --}}
                </div>
                <div class="row">
                    {{-- <div class="col-md-3">
                        <div class="form-group">
                            <label>Minimum GPA:</label>
                            <input type="number" step=".1" min="0" max="9" class="form-control" name="minGpa" id="minGpa" >
                        </div>
                    </div> --}}

                    <div class="col-md-9">
                        <div class="form-group">
                            <label>Keywords</label>
                            <input type="text" class="form-control tokenfield" name="tags" value="">
                        </div>
                    </div>
                    
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Reference:</label>
                            <select class="form-control" name="reference" required=""> 
                                <option selected="" value="0">N/A</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Entry Requirements</label>
                            <textarea class="form-control summernote" name="entry_requirement"></textarea>
                        </div>
                    </div>
                </div>
                <div class="text-right">
                    <a href="{{ url('admin/courses/create') }}" class="btn btn-secondary pull-left">
                        Refresh
                         <i class="icon-reload-alt ml-2"></i>
                    </a>
                    <button type="submit" class="btn btn-primary">Submit <i class="icon-paperplane ml-2"></i></button>
                </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>
<!-- /content area -->
@endsection

@push('scripts')
<script type="text/javascript" src="{{ asset('assets/global/js/plugins/forms/selects/select2.min.js')}}"></script>
<script type="text/javascript" src="{{ asset('assets/global/js/plugins/forms/tags/tagsinput.min.js')}}"></script>
<script type="text/javascript" src="{{ asset('assets/global/js/plugins/forms/tags/tokenfield.min.js')}}"></script>
<script type="text/javascript" src="{{ asset('assets/global/js/plugins/editors/summernote/summernote.min.js')}}"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.select2').select2();
        $('.tokenfield').tokenfield();
        $('.summernote').summernote();
    });

    $('.destination').on('change', function(){
        var destination = $('.destination option:selected').val();
        var select_tag = $('.institute');

        $.get("{{ route('admin.ajax-get', ['name'=>'sams_institutes']) }}", {
            destination : destination, type : 'all' 
        }).done(function(res){ 
            select_tag.empty().append('<option disabled="" selected="" value="">Choose One..</option>');
                
            res.forEach(function(row){   
                select_tag.append(
                    $('<option></option>').val(row.institute_id+'::'+row.institute_name).html(row.institute_name)
                ); 
            }); 
        });

        $('.institute').empty().append('<option disabled="" selected="" value="">Choose One..</option>');
        $('.level').empty().append('<option disabled="" selected="" value="">Choose One..</option>');
        $('.campus').empty().append('<option disabled="">Choose One..</option>');
        $('.intake').empty().append('<option disabled="">Choose One..</option>');
    });

    $('.institute').on('change', function(){
        var institute = $('.institute option:selected').val();
        var select_tag = $('.level'); 

        $.get("{{ route('admin.ajax-get', ['name'=>'sams_levels']) }}", {
            institute : institute, group : 0
        }).done(function(res){ 
            select_tag.empty().append('<option disabled="" selected="" value="">Choose One..</option>');
                
            res.forEach(function(row){   
                select_tag.append(
                    $('<option></option>').val(row.id+'::'+row.name).html(row.name)
                ); 
            }); 
        });

        $.get("{{ route('admin.ajax-get', ['name'=>'sams_campuses']) }}", {
            institute : institute
        }).done(function(campuses){ 
            var select_tag = $('.campus');
            select_tag.empty().append('<option disabled="">Choose One..</option>');
            
            if(campuses.length > 0){
                campuses.forEach(function(row){   
                    select_tag.append(
                        $('<option></option>').val(row.id+'::'+row.name).html(row.name)
                    ); 
                }); 

                $('#instituteDiv').removeClass('col-md-8');
                $('#instituteDiv').addClass('col-md-4');
                $('#campusDiv').removeClass('d-none');
            }else{
                $('#instituteDiv').addClass('col-md-8');
                $('#instituteDiv').removeClass('col-md-4');
                $('#campusDiv').addClass('d-none');
            }
        });

        $.get("{{ route('admin.ajax-get', ['name'=>'sams_intakes']) }}", {
            institute : institute
        }).done(function(intakes){ 
            var select_tag = $('.intake');
            select_tag.empty().append('<option disabled="">Choose One..</option>');
            if(intakes.length > 0){   
                intakes.forEach(function(row){   
                    select_tag.append(
                        $('<option></option>').val(row.intake).html(getMonthName(row.intake))
                    ); 
                }); 
            }else{
                select_tag.empty().append('<option disabled="">Choose One..</option>');
            }
        });
    });

    $('.level').on('change', function(){
        var institute = $('.institute option:selected').val();
        var level = $('.level option:selected').val();
        var select_tag = $('.intake');

        $.get("{{ route('admin.ajax-get', ['name'=>'sams_intakes']) }}", {
            institute : institute, level : level
        }).done(function(intakes){ 
            select_tag.empty().append('<option disabled="">Choose One..</option>');
            if(intakes.length > 0){   
                intakes.forEach(function(row){   
                    select_tag.append(
                        $('<option></option>').val(row.intake).html(getMonthName(row.intake))
                    ); 
                }); 
            }else{
                select_tag.empty().append('<option disabled="">Choose One..</option>');
            }
        });
    });

    function getMonthName(monthNumber) {
        var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        return months[monthNumber - 1];
    }
</script>
@endpush