@extends('layouts.default')
@section('title', 'Gallery Master')
@section('content')
    <div class="content-main__inner">
        <div class="row">
            <div class="col-lg-12">
                <div class="card-box">
                    <div class="card-box__header">
                        <h5>User Details</h5>
                    </div>
                    <div class="card-box__content">
                        <div class="accordion" id="accordionExample">
                            <div class="card mb-2">
                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
                                    <div class="card-body">
                                        <b>User Device ID: </b>{{ $user[0]->u_device_id }}</br>
                                        <b>User Name: </b>{{ $user[0]->u_user_name }}</br>
                                        <b>Birth Date: </b>{{ $user[0]->u_birth_date }}</br>
                                        <b>Born City: </b>{{ $user[0]->u_born_city }}</br>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="card-box">
                    <div class="card-box__inner">
                        <div class="card-box__header">
                            <h5>Gallery</h5>
                        </div>
                        <div class="card-box__content">
                            <div class="tab-main tab--horizontal">
                                <ul class="tabs">
                                    <li class="tab-link current" data-tab="tab1" id="tab_image"
                                        image-id="{{ $user[0]->u_id }}">Images
                                    </li>
                                    <li class="tab-link" data-tab="tab2" id="tab_audio"
                                        audio-id="{{ $user[0]->u_id }}">Audios
                                    </li>
                                    <li class="tab-link" data-tab="tab3" id="tab_video"
                                        video-id="{{ $user[0]->u_id }}">Videos</li>
                                    <li class="tab-link" data-tab="tab4" id="tab_docs"
                                        docs-id="{{ $user[0]->u_id }}">Docs</li>
                                    <li class="tab-link" data-tab="tab5" id="tab_recycle"
                                        recycle-id="{{ $user[0]->u_id }}">Recycle-bin</li>
                                </ul>

                                <div class="tab-content-main">

                                    <div id="tab1" class="tab-content current">
                                        <div class="row tab1image" data-path="{{ asset('') }}" style="justify-content: flex-start">

                                        </div>
                                        <div class="d-flex align-items-center flex-wrap tab1page"
                                            style="justify-content: flex-end">

                                        </div>
                                    </div>
                                    <div id="tab2" class="tab-content">
                                        <div class="row tab2audio" style="justify-content: flex-start">
                                            {{-- <div class="user_image" data-status="' + item.gry_status + '" data-id="' + item.gry_id + '"></div> --}}
                                        </div>
                                        <div class="d-flex align-items-center flex-wrap tab2page"
                                            style="justify-content: flex-end">

                                        </div>
                                    </div>
                                    <div id="tab3" class="tab-content">
                                        <div class="row tab3video" style="justify-content: flex-start">
                                        </div>
                                        <div class="d-flex align-items-center flex-wrap tab3page"
                                            style="justify-content: flex-end">
                                        </div>
                                    </div>

                                    <div id="tab4" class="tab-content">
                                        <div class="row tab4docs" style="justify-content: flex-start">
                                        </div>
                                        <div class="d-flex align-items-center flex-wrap tab4page"
                                            style="justify-content: flex-end"></div>
                                    </div>
                                    <div id="tab5" class="tab-content">
                                        <div class="row recycle_general" style="justify-content: flex-start">
                                        </div>
                                        <div class="row recycle_audio mt-5" style="justify-content: flex-start"></div>
                                        <div class="d-flex align-items-center flex-wrap tab5page"
                                            style="justify-content: flex-end"></div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>

        <!--Modal: Name-->
        <div class="modal fade" id="userModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">

                <!--Content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title filename" id="staticBackdropLabel"></h5>
                        
                        
                        <div id="status_update"></div>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <i class="fal fa-times"></i>
                            </button>
                        
                       
                    </div>
                    <!--Body-->
                    <div class="modal-body">

                        <div class="embed-responsive embed-responsive-16by9 z-depth-1-half" id="user-model">

                        </div>
                        <div class="doc_user">
                            <p class="text-larger text-center">Download file from here...</p>

                        </div>
                        <div class="row">
                            <div class="col-lg-5 col-md-5"></div>
                            <a href="" class="btn btn-primary docs_user_show" download>
                                Download
                            </a>
                        </div>
                    </div>
                   
                </div>
                <!--/.Content-->

            </div>
        </div>
        <!--Modal: Name-->




    </div>
    </div>
@endsection
@section('pagespecificscripts')
    <script src="{{ asset('js/user/user-gallery-view.js') }}"></script>
@endsection