@extends('cms.master')

@section('content')
<style>
    form input, form select {
        width: 100%;
    }
    form input[type=submit] {
        width: 6vw;
        margin-top: 2vw;
    }
</style>

<nav class="uk-navbar uk-navbar-attached" data-uk-sticky data-uk-scrollspy-nav="{closest:'li'}" >
    <ul class="uk-navbar-nav">
        <li><a href="{{ URL::to('/cms/programs') }}"><div class="uk-icon-list-ul top-menu-icon"></div>List of Programs</a></li>
        <li class="uk-active"><a href="{{ URL::to('/cms/programs/add-program') }}"><div class="uk-icon-plus-square top-menu-icon"></div>Add Program</a></li>
    </ul>
</nav>

<div class="uk-grid cms-page-content">
    <div class="uk-width-1-1 page-title">
        <p>Add Program</p>
        <br/><br/><hr/>
    </div>
    
    <div class="uk-width-1-1 uk-margin-top">
        <form class="uk-form uk-form-stacked" onsubmit="" action="{{ URL::to('/cms/programs') }}" method="POST">
            <div class="uk-form-row uk-width-1-6">
                <label class="uk-form-label" for="course_type">Course type<div class="req-label">Required</div></label>
                <div class="uk-button-dropdown">
                    <select name="courseId">
                        @foreach ($courses as $course)
                            <option value="{{ $course->id }}">{{ $course->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            
            <div class="uk-form-row uk-width-1-6">
                <label class="uk-form-label" for="program_type">Program type<div class="req-label">Required</div></label>
                <div class="uk-button-dropdown">
                    <select name="programTypeId">
                        @foreach ($programTypes as $programType)
                            <option value="{{ $programType->id }}">{{ $programType->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="uk-form-row uk-width-1-6">
                <label class="uk-form-label" for="tutor">Location<div class="req-label">Required</div></label>
                <div class="uk-button-dropdown">
                    <select name="location">
                        <option>Onsite</option>
                        <option>Online</option>
                    </select>
                </div>
            </div>
            
            <div class="uk-form-row uk-width-4-6">
                <label class="uk-form-label" for="school">School<div class="req-label">Required</div></label>
                <div class="uk-button-dropdown">
                    <select name="school">
                        @foreach ($schools as $school) {
                            <option value="{{ $school->id }}">{{ $school->name, $school->address, $school->zip_code }}</option>;
                        @endforeach
                    </select>
                </div>
            </div>
            
            <div class="uk-form-row uk-width-1-6">
                <label class="uk-form-label" for="tutor">Tutor<div class="req-label">Required</div></label>
                <div class="uk-button-dropdown">
                    <select name="tutorId">
                        @foreach ($tutors as $tutor) {
                            <option value="{{ $tutor->id }}">{{ $tutor->user->first_name.' '.$tutor->user->last_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            
            <div class="uk-form-row uk-width-1-6">
                <label class="uk-form-label" for="start_date">Start date<div class="req-label">Required</div></label>
                <input type="text" name="start_date" data-uk-datepicker="{format:'MMMM Do, YYYY'}" value="">
            </div>
            <div class="uk-form-row uk-width-2-6">
                <label class="uk-form-label" for="for_exam">Prep for exam<div class="req-label">Required</div></label>
                <input type="text" name="for_exam" value="">
            </div>  
            <div class="uk-form-row uk-width-3-6">
                <label class="uk-form-label" for="meets_on">Meets on<div class="req-label">Required</div></label>
                <input type="text" name="meets_on" value="">
            </div>
            <div class="uk-form-row uk-width-1-10">
                <label class="uk-form-label" for="price">Price<div class="req-label">Required</div></label>
                <input type="text" name="price" onkeypress="return allowNum(event)" value="">
            </div>
            
            <div class="uk-form-row uk-width-1-10">
                <input type="submit" class="uk-button" value="Add">
            </div>
            <input type="hidden" name="programId" value="">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
        </form>
    </div>
</div>
<script>
    function allowNum(event) {
    var key = window.event ? event.keyCode : event.which;

    if (event.keyCode == 8 || event.keyCode == 46
     || event.keyCode == 37 || event.keyCode == 39) {
        return true;
    }
    else if ( key < 48 || key > 57 ) {
        return false;
    }
    else return true;
    };
</script>

@stop