@extends('layouts.header')

@section('content')

<div class="breadcrumb-wrap mt-n4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/home">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page" id="bread_{{$menu_obj->id}}" onclick="currentChild({{$menu_obj->id}})"><a href="/menu/open-header/{{$menu_obj->id}}">{{ $menu_obj->name }}</a></li>
        </ol>
    </nav>
</div>
<input type="hidden" name="menu_name" id="menu_name" value="{{ $menu_obj->name }}">
@if($menu_obj->parent_id != 1)
<a id="backArrow"><i class="fa fa-arrow-left" style="color:red;cursor:pointer;"></i></a>
@endif
<div class="row mt-4">

    @if(count($childrens) > 0)
    @foreach($childrens as $child)

    @if($child->type == 'FOLDER')
    <div class="col-12 mb-4">
        <!-- <a href="/menu/open-header/{{ $child->id }}"><button type="button" class="btn btn-outline-primary btn-lg" onclick="appendMenu({{$child->id}},'{{ $child->text }}')">{{ $child->text}} <i class="fa fa-angle-right ml-4" aria-hidden="true"></i></button></a> -->
        <a href="/menu/open-header/{{ $child->id }}" onclick="appendMenu({{$child->id}},'{{ $child->text }}')" style="color:black;">
            <i class="fa fa-folder" style="color:orange;font-size:30px;text-align: center;"></i>
            &nbsp;
            <span>{{ $child->text}}</span>
            <br><small> ( uploaded by: {{ $child->first_name . " " . $child->last_name }} , at:
                @if($child->updated_at )
                {{ date('d-m-Y h:i A', strtotime($child->updated_at)) }}
                @else
                {{ date('d-m-Y h:i A', strtotime($child->created_at))}}
                @endif
                )
            </small>
        </a>
    </div>
    @else

    <div class="col-12 mb-4">
        <!-- <a href="{{ config('constants.MENU_DOCS_AVTAR').$child->text }}" target="_blank" style="color:#274d8e">{{ $child->text }}</a> -->
        <!-- <a href="{{ config('constants.MENU_DOCS_AVTAR').$child->text }}" download="{{ $child->text }}" class="text-primary" style="float:right;">
				<i class="fa fa-cloud-download text-danger" aria-hidden="true"></i> 
				Download 
			</a> -->
        <!-- <iframe src="{{ config('constants.MENU_DOCS_AVTAR').$child->text}}#toolbar=0" id="" title="" width="100%" height="300" allowfullscreen webkitallowfullscreen></iframe> -->
        <!-- <a href="/menu/open-file/{{ $child->id }}"><button type="button" class="btn btn-outline-primary btn-lg" onclick="appendMenu({{$child->id}},'{{ $child->file_name }}')">{{ $child->file_name}} <i class="fa fa-angle-right ml-4" aria-hidden="true"></i></button></a> -->
        <a href="/menu/open-file/{{ $child->id }}" onclick="appendMenu({{$child->id}},'{{ $child->file_name }}')" style="color:black;">
            <i class="fa fa-file-o" style="color:darkgray;font-size:35px;"></i>
            &nbsp;{{ $child->file_name}}
            <br><small> ( uploaded by: {{ $child->first_name . " " . $child->last_name }} , at:
                @if($child->updated_at )
                {{ date('d-m-Y g:i a', strtotime($child->updated_at)) }}
                @else
                {{ date('d-m-Y g:i a', strtotime($child->created_at))}}
                @endif
                )
            </small>
        </a>

    </div>

    @endif

    @endforeach
    @else
    <label class="text-center" style="color:gray;position:absolute;left:55%;">Folder is empty.</label>
    @endif
</div>

@endsection

<style>
    .content-wrap .breadcrumb-wrap nav.fixed-header {
        position: fixed;
        width: 100%;
        z-index: 9;
        margin-top: -12px;
    }
</style>

@section('append')

<script>
    var breadcrumb = "";
    var text = "";

    $(document).ready(function() {
        // $('html,body').animate({
        //     scrollTop: $('body').position().top += 100
        //     },"slow");


        setTimeout(() => {
            $('.breadcrumb').html(sessionStorage.breadcrumb);
        }, 100);

        if (sessionStorage.breadcrumb == undefined) {
            breadcrumb = $('.breadcrumb').html();
            sessionStorage.setItem('breadcrumb', breadcrumb);
        }

    });


    function appendMenu(id, name) {
        if (sessionStorage.breadcrumb != undefined) {
            sessionStorage.breadcrumb += "<li class='breadcrumb-item' id='bread_" + id + "' onclick='currentChild(" + id + ")'><a href='/menu/open-header/" + id + "'>" + name + "</a></li>";
        }
    }

    function currentChild(id) {
        var after = $('#bread_' + id).nextAll().remove();
        breadcrumb = $('.breadcrumb').html();
        sessionStorage.setItem('breadcrumb', breadcrumb);
    }


    $('#backArrow').on('click', function() {
        $('.breadcrumb li:last-child').remove();
        breadcrumb = $('.breadcrumb').html();
        sessionStorage.setItem('breadcrumb', breadcrumb);
        history.back();
    });
</script>

@endsection