@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">Bulk Entry [ <a href="{{ url('/admin/courses/bulk-template/download') }}"><i class="icon-file-excel" style="margin-right: 3px;"></i>Template</a> ]</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/bulk-entry/store','method'=>'POST','enctype'=>'multipart/form-data'))!!}
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Excel File:</label>
                            <input type="file" class="form-control" name="file" required>
                        </div>
                    </div>
                </div>
                <div class="text-right">
                    <a href="{{ url('admin/courses/bulk-entry') }}" 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