@extends('layout.frontend', ['title' => 'Образование и образовательные программы - РекаМоре'])

@section('scripts')
<script>
    $(function(){
        $('ul.accordion > li.accordion-item').click(function(e){
            if (e.target.closest('.accordion-sub')) {
                return;
            }

            var this_li = $(this);
            var thumb = this_li.find('> .accordion-thumb');

            if (thumb.hasClass('ui-state-active')){
                thumb.removeClass('ui-state-active');
                this_li.find('> .accordion-panel').hide(500);
            } else {
                thumb.addClass('ui-state-active');
                this_li.find('> .accordion-panel').show(500);
            }
        });

        $('ul.accordion-sub li.accordion-item').click(function(){
            var this_li = $(this);
            var thumb = this_li.find('.accordion-thumb');
            var parent_ul = this_li.closest('ul');
            var panel = this_li.closest('.accordion-panel');
            var added_height = parseInt(panel.data('added-height'));

            if (isNaN(added_height)){
                added_height = 0;
            }

            if (thumb.hasClass('ui-state-active')){
                this_li.find('.accordion-panel').hide(500);
                thumb.removeClass('ui-state-active');

                var reduce_height = this_li.find('.accordion-panel').height() + 20;
                var panel_height = panel.height() - parseInt(reduce_height);
                panel.animate({height: panel_height + "px"}, {
                    easing: 'swing',
                    duration: 500,
                    complete: function () {
                        panel.css('height', 'auto');
                    }
                });

                added_height = parseInt(added_height) - parseInt(reduce_height);
                if (added_height < 0){
                    added_height = 0;
                }
                panel.data('added-height', added_height);
            } else {
                thumb.addClass('ui-state-active');

                var add_height = this_li.find('.accordion-panel').height() + 20;
                var panel_height = panel.height() + parseInt(add_height);
                panel.animate({height: panel_height + "px"}, {
                    easing: 'swing',
                    duration: 500,
                    complete: function () {
                        panel.css('height', 'auto');
                    }
                });
                this_li.find('.accordion-panel').show(500);

                added_height = parseInt(added_height) + parseInt(add_height);
                panel.data('added-height', added_height);
            }
        });
    });
</script>
@endsection

@section('content')
<section class="thing">
    <div class="container">
        <div class="thing__body">
            <ul class="breadcrumbs thing__breadcrumbs">
                <li><a href="{{ route('index') }}">Главная</a></li>
                <li><a href="{{ route('education') }}">Образование</a></li>
                <li><b>@isset($education->name) {{ $education->name }} @else Не указано @endif</b></li>
            </ul>
           <img src="@if (!empty($education->image)) {{ asset(Storage::url($education->image)) }} @else {{ asset('images/education.jpg') }} @endif" class="thing__pic" alt="{{ $education->name }}">

            <h1 class="thing__title">{{ $education->name }}</h1>
        </div>
    </div>
</section>

<main class="main">
    <div class="container">
        <div class="content-single-candidate">
            <div class="list-content-candidate">
                <div class="education-detail-description">
                    <h3 class="title">Об учебном заведении</h3>
                    <div class="inner">
                        {!!$education->text!!}
                    </div>
                </div>
            </div>
        </div>

        @if($levels_education_programs)
        <div class="education-detail-programs">
            <h3 class="title">Программы обучения</h3>

            <ul class="accordion">
            @foreach($levels_education_programs as $level_name => $education_programs)
                <li class="accordion-item">
                    <h3 class="accordion-thumb">{{$level_name}}</h3>
                    <div class="accordion-panel hide pb-20">
                        <div>
                            <ul class="accordion-sub">
                                @foreach($education_programs as $education_program)
                                <li class="accordion-item">
                                    <h3 class="accordion-thumb">{{$education_program['name']}}</h3>
                                    <div class="accordion-panel">{!!$education_program['text']!!}</div>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </li>
            @endforeach
            </ul>
        </div>
        @endif

        @if($education->address || $education->telephone || $education->email)
        <div class="education-detail-contacts">
            <h3 class="title">Контактная информация</h3>
            <div class="inner">
                <div class="contacts address">
                    <div class="icon"><svg width="14" height="19" viewBox="0 0 14 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.84935 19C6.68849 18.8698 6.49925 18.7582 6.36678 18.6048C4.75349 16.759 3.26794 14.8156 2.03314 12.7002C1.31402 11.4728 0.68479 10.2036 0.296844 8.82738C-0.289805 6.76775 -0.0154048 4.82435 1.19574 3.04832C2.35012 1.36529 3.9776 0.351743 6.0356 0.0727861C8.0463 -0.201521 9.86302 0.300601 11.4337 1.56056C12.8199 2.67173 13.6431 4.11301 13.9223 5.85649C14.1399 7.21408 13.8797 8.50193 13.4018 9.76188C12.7632 11.4542 11.8501 13.0024 10.8376 14.4948C9.86302 15.9315 8.78907 17.2984 7.63943 18.6048C7.50223 18.7582 7.31772 18.8698 7.15686 19C7.05278 19 6.95343 19 6.84935 19ZM6.98181 10.343C8.88843 10.3756 10.4875 8.83203 10.5206 6.92117C10.5538 5.01497 8.99251 3.44351 7.03386 3.41097C5.11305 3.37842 3.51396 4.92198 3.48557 6.84214C3.45245 8.74834 5.0137 10.3058 6.98181 10.343Z" fill="#0E5C69"></path></svg></div>
                    <div>{{$education->address}}</div>
                </div>
                <div class="contacts phone">
                    <div class="icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.80729 6.05208C3.97396 8.3125 5.6875 10.026 7.94792 11.1927L9.66146 9.47917C9.90451 9.23611 10.1719 9.17535 10.4635 9.29688C11.3385 9.58854 12.2622 9.73438 13.2344 9.73438C13.4531 9.73438 13.6354 9.80729 13.7812 9.95312C13.9271 10.099 14 10.2812 14 10.5V13.2344C14 13.4531 13.9271 13.6354 13.7812 13.7812C13.6354 13.9271 13.4531 14 13.2344 14C9.58854 14 6.46528 12.7118 3.86458 10.1354C1.28819 7.53472 0 4.41146 0 0.765625C0 0.546875 0.0729167 0.364583 0.21875 0.21875C0.364583 0.0729167 0.546875 0 0.765625 0H3.5C3.71875 0 3.90104 0.0729167 4.04688 0.21875C4.19271 0.364583 4.26562 0.546875 4.26562 0.765625C4.26562 1.73785 4.41146 2.66146 4.70312 3.53646C4.80035 3.85243 4.73958 4.11979 4.52083 4.33854L2.80729 6.05208Z" fill="#0E5C69"></path></svg></div>
                    <div>{{$education->telephone}}</div>
                </div>
                <div class="contacts email">
                    <div class="icon"><svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.7451 0H0L7.37253 3.68627L14.7451 0Z" fill="#0E5C69"></path><path d="M4.95911e-05 11.0588L14.7451 11.0588L7.37258 5.52944L4.95911e-05 11.0588Z" fill="#0E5C69"></path><path d="M14.7451 11.0588L14.7451 0L7.37258 5.5294L14.7451 11.0588Z" fill="#0E5C69"></path><path d="M1.31875e-07 3.71933e-05L0 11.0588L7.37253 5.52944L1.31875e-07 3.71933e-05Z" fill="#0E5C69"></path></svg></div>
                    <div>{{$education->email}}</div>
                </div>
            </div>
        </div>
        @endif

    </div>
</main>
@endsection