@extends('master')

@section('content')
<style>
    .toggleLocation {
        font-size: 18px;
        width: 80px;
        height: 50px;
        border: 1px solid #d3d3d3;
        padding: 10px;
        border-radius: 5px;
        color: #fff;
        background: #1b7800;
        cursor: pointer;
    }

    .active {
        font-size: 18px;
        width: 80px;
        height: 50px;
        border: 1px solid #d3d3d3;
        padding: 10px;
        border-radius: 5px;
        color: #1b7800;
        background: #fff;
    }

    .program-tables {
        display: none;
    }
</style>
<div class="new_row">
<div class="column-20 top_space_tutors">
    <div class="large_top_icon_tutors">
        <div class="large_top_text noicon_test_title">{{ $program->name }}</div>
    </div>
</div>
<div class="new_row row-fixed">
    <div class="column-20">
        <img src="{{ URL::asset('images/girl2.jpg') }}" alt="">
    </div>
</div>

<div class="push_underlayer1">

<div class="new_row row-space"></div>
<div class="new_row row-space"></div>
<div class="new_row">
    <div class="column-20">
        <div class="new_row">
            <div class="column-20 empty-1-lr" style="padding-bottom: 4vw;">
                <div class="title1 title1_left" style="text-align: left; height: 6vw;">
                    <p style="margin-bottom: 0;">{{ $program->name }} Programs</p>
                    <div class="toggleType">
                        <span id="all" class="toggleLocation active">All</span>
                        <span id="onsite" class="toggleLocation">Onsite</span>
                        <span id="online" class="toggleLocation">Online</span>
                    </div>
                </div>
                <div class="program-tables">
                    @include('partials.program-tables')
                </div>
            </div>
        </div>
    </div>
</div>    
</div>

    @include('partials.findtutorprogram')
<script>
    $('.row-fixed-content').addClass('tutors-top-content');

    $('.program-tables').fadeIn();

    $('.toggleLocation').on('click', function(){
        if(! $(this).hasClass('active'))
        {
            $('.toggleLocation').removeClass('active');
            $(this).addClass('active');
        }
    });

    $('#online').on('click', function(){
        var courseId = "{{ $program->id }}";
        $.post('{{ URL::to("/programs/online") }}', { "courseId": courseId, "_token": $("input[name=_token]").val() }, function(response){
            // console.log(response);
            $('.program-tables').empty().hide()
                                .append(response)
                                .fadeIn();
        });
    });

    $('#onsite').on('click', function(){
        var courseId = "{{ $program->id }}";
        $.post('{{ URL::to("/programs/onsite") }}', { "courseId": courseId, "_token": $("input[name=_token]").val() }, function(response){
            // console.log(response);
                $('.program-tables').empty().hide()
                                .append(response)
                                .fadeIn();
        });
    });

    $('#all').on('click', function(){
        var courseId = "{{ $program->id }}";
        $.post('{{ URL::to("/programs/all") }}', { "courseId": courseId, "_token": $("input[name=_token]").val() }, function(response){
            // console.log(response);
            $('.program-tables').empty().hide()
                                .append(response)
                                .fadeIn();
        });
    });

</script>
@include('partials.programModal')
@stop