@extends('layouts.backend.main')
@section('title','Carrousel')
@section('styles')
    @include('pages.backend.includes.carousel_styles_links')
@endsection
@section('body')
    <div class="row">
        <div id="breadcrumbs-wrapper" data-image="{{asset('backend/images/gallery/breadcrumb-bg.jpg')}}">
            <!-- Search for small screen-->
            <div class="container">
                <div class="row">
                    <div class="col s12 m6 l6">
                        <h5 class="breadcrumbs-title mt-0 mb-0"><span>Carrousel</span></h5>
                    </div>
                    <div class="col s12 m6 l6 right-align-md">
                        <ol class="breadcrumbs mb-0">
                            <li class="breadcrumb-item"><a href="{{route('admin-home')}}">Acceuil</a>
                            </li>
                            <li class="breadcrumb-item"><a href="{{ route('admin-carousel') }}">Carrousel</a>
                            </li>

                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="col s12">
            <div class="container">
                <div class="seaction">

                    <div class="card">
                        <div class="card-content top-text">
                            <p class="caption mb-0">Gestion du Carrousel.</p>
                            <p class="caption mb-0">Vous pouvez changer l'ordre des medias.</p>
                        </div>
                    </div>

                    <!--Basic Form-->

                    <!-- jQuery Plugin Initialization -->
                    <div class="row">


                        <!-- Form with icon prefixes -->
                        <div class="col s12 m6 l6">
                            <div id="prefixes" class="card card card-default scrollspy carousel_ulpload_card">
                                <div class="card-content">
                                    <form id="upload_form">
                                        <div class="row">
                                            <div class="input-field col s12 title_area">
                                                <i class="material-icons prefix">title</i>
                                                <input id="carousel_title_input" name="title" type="text">
                                                <label for="carousel_title_label">Titre</label>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="input-field col s12 subtitle_area">
                                                <i class="material-icons prefix">subtitles</i>
                                                <input id="carousel_subtitle_input" name="subtitle" type="text">
                                                <label for="carousel_subtitle_label">Sous-titre</label>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col s12">
                                                <p>Media</p>
                                                <span>
                                                    <label>
                                                        <input class="validate" required="" id="image_radio" name="media_type" value="image" type="radio" checked="">
                                                        <span>Image</span>
                                                    </label>
                                                </span>

                                                <label>
                                                    <input class="validate" required="" id="video_radio" name="media_type" value="video" type="radio">
                                                    <span>Video</span>
                                                </label>
                                                <div class="input-field">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row" id="image_row">
                                            <div id="file-upload" class="section">
                                                <!--Default version-->
                                                <div class="row section">
                                                    <div class="col s12">
                                                        <input type="file" id="input-file-now" accept="image/*" name="image" class="dropify" data-allowed-file-extensions="png jpg jpeg" >
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="row" id="video_row">
                                            <div id="file-upload" class="section">
                                                <!--Default version-->
                                                <div class="row section">
                                                    <div class="col s12">
                                                        <div  id="video_drop_and_down_section">
                                                               <p><i class="material-icons">cloud_upload</i></p>
                                                                <p>Déposez un fichier ici ou cliquez</p>
                                                                <p>fichiers supportés .mp4</p>
                                                            <input type="file" accept="video/*" id="video_input" name="video" hidden="hidden">
                                                        </div>
                                                        <div id="progress_wrapper">
                                                            <div id="upload_progress" >
                                                                <div id="labels">
                                                                    <p>En cours ...</p>
                                                                    <p><span id="upload_percentage">0</span></p>
                                                                </div>
                                                                <div id="buttons">
                                                                    <span id="pause_upload_vedeo_in_progress"><i class="material-icons pause_span">pause</i></span>
                                                                    <span id="remove_upload_vedeo_in_progress"><i class="material-icons clear_span">clear</i></span>
                                                                </div>
                                                            </div>
                                                            <div id="progress_bar">

                                                            </div>
                                                            <div id="success_video_upload">

                                                                    <p>Terminé</p>
                                                                    <div id="file_name">
                                                                        <span id="upload_video_name"></span>
                                                                        <span id="remove_uploaded_vedeo"><i class="material-icons">clear</i></span>
                                                                    </div>
                                                                    <span><i class="material-icons clear_span">done_all</i></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="row">
                                                <div class="input-field col s12">
                                                    <button class="btn  waves-effect waves-light right save_button" type="submit" name="save_media">Enregistrer
                                                        <i class="material-icons right">file_upload</i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <!-- Form with validation -->
                        <div class="col s12 m6 l6 validation_wrapper">
                            <div id="validation" class="card card card-default scrollspy">
                                <div class="card-content" id="sortable_list">

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

                    </div>
                </div><!-- START RIGHT SIDEBAR NAV -->

            </div>
            <div class="content-overlay"></div>

            <div id="modal1" class="modal bottom-sheet">
                <div class="modal-content">
                    <div id="modal_wrapper">
                          <div id="image_section">
                              <img  hidden="hidden" />
                              <video  controls hidden="hidden">
                                  <source  >
                              </video>
                          </div>
                        <div id="text_section">
                                    <p id="modal_main_title"></p>
                                     <p id="modal_second_title"></p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="#!" class=" modal-action
                    modal-close waves-effect
                    waves-green btn red">
                        Fermer
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    @include('pages.backend.includes.carousel_scripts_links')
@endsection