@inject('FrontendPresenter', 'App\Presenters\FrontendPresenter')
@extends('layouts.frontend')
@section('content')
    <main class="main pt-0">

        <div class="container py-8">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-10">
                    <div class="row align-items-center">
                        <div class="col-12 col-md-auto">
                            <div class="avatar" style="background: url({{asset($member->avatar)}});background-size: 170px;"></div>
                        </div>
                        <div class="col text-center text-md-left mt-6 mt-md-0">
                            <div class="h4 font-weight-bold">{{$member->name}}</div>
                        </div>
                        <div class="col text-right order-first order-md-last">
                            <a class="btn-edit text-muted" href="{{ route('member_member-info-edit') }}">
                                <i class="fas fa-lg fa-pencil-alt"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="nav-secondary border-0">
            <div class="container">
                <div class="nav-light">
                    <ul class="nav justify-content-center">
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('member_member-info') }}">帳戶</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="{{ route('member_save-school-list') }}">收藏頁面</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container pt-8 pt-md-12">
            <div class="row justify-content-center">
                {{-- <div class="col-12 col-lg-8 d-none d-lg-block"> --}}
                <div class="col-12 col-lg-8">
                    <div class="list-school">
                        @foreach ($member_collection_list as $k => $v)
                            <div class="box-school mb-4">
                                <div class="box">
                                    <div class="mb-4 mb-md-0">
                                        <div class="slider-school-gallery">
                                            @if (isset($v->school->schoolImage))
                                                @foreach ($v->school->schoolImage as $num => $i)
                                                    @if ($num == 10)
                                                        @break
                                                    @endif
                                                    <div class="slider-item" style="background-image: url({{$i->url}});"><img src="/assets/img/ui/blank.png"></div>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                    <div class="flex-column d-flex w-100 pl-0 pl-md-4">
                                        <div class="mb-auto">
                                            <div class="row justify-content-between no-gutters">
                                                <div class="col-lg-10 col-9">
                                                    <div class="h5 font-weight-bold">
                                                        {{ $v->school->name }}
                                                    </div>
                                                </div>
                                                <div class="col text-right">
                                                <!--<div class="custom-control custom-checkbox d-inline-block">
                                                        <input type="checkbox" class="custom-control-input" name="school_id[]" value="{{$v->school_id}}" id="school-{{$v->school_id}}">
                                                        <label class="custom-control-label" for="school-{{$v->school_id}}"></label>
                                                    </div>-->
                                                    <a class="btn-like" school_id="{{$v->school_id}}" href="javascript:void();">
                                                        <i class="far fa-fw fa-heart fas text-danger"></i>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="text-muted my-1">
                                                <i class="fas fa-sm fa-map-marker-alt"></i> {{ $FrontendPresenter->getCountry($v->school->country) }} {{$v->school->city_tw}}
                                            </div>
                                            <p class="text-row-3">
                                                {!!$v->school->feature!!}
                                            </p>
                                        </div>
                                        <div class="mt-4 md-md-auto d-block d-md-flex justify-content-between">
                                            @if ($v->school->school_type == 'ST010')
                                                <a class="btn btn-more btn-primary" href="{{ route('search_school-content', $v->school_id) }}">了解更多</a>
                                            @else
                                                <a class="btn btn-more btn-primary" href="{{ route('search_school-content', $v->school_id) }}">了解更多</a>
                                                <a class="btn btn-more btn-outline-primary ml-0 ml-md-4" href="{{ route('channel_appointment') }}">預約諮詢</a>
                                            @endif
                                            @if ($v->school->school_type == 'ST010')
                                                <a class="btn-search-course collapse-arrow-v font-weight-bold" data-toggle="collapse" href="#collapse-school-{{$v->school_id}}">課程資訊</a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="collapse" id="collapse-school-{{$v->school_id}}">
                                    <table class="table table-rwd table-noborder m-0">
                                        <thead>
                                        <tr class="bg-light">
                                            <th>課程</th>
                                            <th class="text-center">價格</th>
                                            <th class="text-center">時程</th>
                                            <th>&nbsp;</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @if (isset($v->school->schoolCourse))
                                            @foreach ($v->school->schoolCourse as $sc)
                                                @foreach ($sc->schoolCourseDetail as $scd)
                                                    <tr>
                                                        <td class="td-head align-middle" data-label="課程">{{$sc->name}}</td>
                                                        <td class="text-lg-center align-middle" data-label="價格"> {{$scd->term_pay}}</td>
                                                        <td class="text-lg-center align-middle" data-label="時程">為期{{$scd->term}}週</td>
                                                        <td>
                                                            {{-- <a class="btn btn-block btn-outline-primary" scd_id="{{$scd->scd_id}}" href="" data-toggle="modal" data-target="#modal-price">索取報價</a> --}}
                                                            {{-- <a class="btn btn-block btn-outline-primary price" scd_id="{{$scd->scd_id}}" course_name="{{$sc->name}}" course_term="{{$scd->term_pay}}" course_term_pay="為期{{$scd->term}}週"  href="javascript:void(0);" >索取報價</a> --}}
                                                            <a class="btn btn-block btn-outline-primary" href="{{ route('channel_appointment') }}" target="_blank">預約諮詢</a>
                                                        </td>
                                                    </tr>
                                                    @break
                                                @endforeach
                                            @endforeach
                                        @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <nav class="mt-10">
                        <!-- nav-pagination -->
                        <div id="nav-pagination">
                            {!! $FrontendPresenter->pagination($member_collection_list) !!}
                        </div>
                        <!-- ./nav-pagination -->
                    </nav>
                </div>
            </div>
        </div>

    </main>
@stop
@section('js')
    <script>
        $('.btn-like').click(function () {
            $.ajax({
                url: '{{ route('member_save-school') }}',
                data: 'school_id=' + $(this).attr('school_id') + '&_token={!! csrf_token() !!}',
                type: 'POST',
                success: function(response) {
                    alert(response);
                    location.reload();
                }
            });
        });

        $('.price').click(function () {
            $('.course_name').html($(this).attr('course_name'));
            $('.course_term').html($(this).attr('course_term'));
            $('.course_term_pay').html($(this).attr('course_term_pay'));
            $('#scd_id').val($(this).attr('scd_id'));

            $('#modal-price').modal();
            /*
            * recaptcha API 參考 https://developers.google.com/recaptcha/docs/display
            */
            // var verifyCallback = function(response) {
            //     $('.btn-primary').attr('disabled', false);
            // };

            // var onloadCallback = function() {
            //     grecaptcha.render(
            //         'g-recaptcha', {                              // widget 驗證碼視窗在 id="my-widget" 顯示
            //             'sitekey' : '6LeeWXsUAAAAAL4TrChBuOXXSsju6_MshpoELvDD',  // API Key
            //             'callback' : verifyCallback,            // 要呼叫的回調函式
            //             // 'theme' : 'dark'                        // 主題
            //         }
            //     );
            // };
        });

        $('#form').submit(function(event) {
            event.preventDefault();
            $.ajax({
                url: '{{ route('contact_add') }}',
                data: $('#form').serialize(),
                type: 'POST',
                success: function(response) {
                    alert(response);
                    $('#name').val('');
                    $('#phone').val('');
                    $('#email').val('');
                    $('#customCheck-agree').prop('checked', false)
                }
            });
        });
    </script>
@stop