@extends('backpack::layout')

@section('header')
    <section class="content-header">
      <h1>
        {{ __('base.timetable_table.page_title') }}
      </h1>
      <ol class="breadcrumb">
        <li><a href="{{ backpack_url() }}">{{ config('backpack.base.project_name') }}</a></li>
        <li class="active">{{ trans('backpack::base.dashboard') }}</li>
      </ol>
    </section>
@endsection


@section('content')
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        @foreach($return as $key => $faculty)
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="heading{{ $key }}">
                <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ $key }}" aria-controls="collapse{{ $key }}">
                        {{ __('base.faculty') }}: {{ App\Models\Faculty::where('id', $key)->first()->name }}
                    </a>
                </h4>
            </div>

            <div id="collapse{{ $key }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{ $key }}">
                <div class="panel-body">
                    @foreach($faculty as $categoryKey => $category)
                    <!--  -->
                        <div class="panel-group" id="accordionc" role="tablist" aria-multiselectable="true">
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" id="heading{{ $categoryKey }}{{ $key }}">
                                    <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordionc" href="#collapse{{ $categoryKey }}{{ $key }}" aria-controls="collapse{{ $categoryKey }}{{ $key }}">
                                            {{ $slug_to_cat[$categoryKey] }}
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapse{{ $categoryKey }}{{ $key }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{ $categoryKey }}{{ $key }}">
                                    <div class="panel-body">
                                        @foreach($category as $item)
                                            @php
                                            $filetype = explode(".", $item->file);
                                            @endphp
                                            <a href="#" data-href="{{ url($url_prefix . $item->file) }}" data-type="{{end($filetype)}}" data-toggle="modal" data-target="#view-modal">{{ $item->name }}</a><br>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    <!--//-->
                    @endforeach
                </div>
            </div>

        </div>
        @endforeach
    </div>
    <div class="modal fade" id="view-modal" style="display: none; min-height: 100vh">
        <div class="modal-dialog">
            <div class="modal-content" style="min-height: calc(100vh - 40px);">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span></button>
                </div>
                <div class="modal-body"></div>
                <iframe></iframe>
            </div>
        </div>
    </div>
    @push('after_scripts')
    <script>
        $('#view-modal').on('show.bs.modal', function (e) {
            var button = $(e.relatedTarget),
                viewerURI = 'https://view.officeapps.live.com/op/embed.aspx?wdEmbedCode=0&src=',
                viewData = {
                    src: viewerURI + button.data('href'),
                    style: 'height: calc( 100vh - 125px); width: 100%'
                };
                if(button.data('type') == 'pdf'){
                    viewData = {
                        src: button.data('href'),
                        style: 'height: calc( 100vh - 125px); width: 100%'
                    }
                }
            $(this).find("iframe").attr(viewData);
        })
    </script>
    @endpush
@endsection