{% extends "layout.html" %}
{% block title %}{{title_pre}} Media {% endblock %}
{% block content %}
   <div class="page_content" >
<link href="{{ constant('HTTP_CSS') }}/plugins/dropzone/dropzone.css" rel="stylesheet">
<link href="{{ constant('HTTP_CSS') }}/plugins/blueimp/css/blueimp-gallery.min.css" rel="stylesheet">
<link href="{{ constant('HTTP_CSS') }}/plugins/sweetalert/sweetalert.css"" rel="stylesheet">


        <div class="wrapper wrapper-content">
           
 

            <div class="row">
                <div class="col-lg-3">
                    <div class="ibox ">
                        <div class="ibox-content">
                            <div class="file-manager">

                                <h5><strong>Show</strong></h5>
                                {% for key,type in types %}
                                    <a href='index.php?page=media&type={{ key }}' class='file-control {% if key == _get.type %} active {% endif %}' > {{ type.type }} </a>

                                {% endfor %}
                                <!--?php foreach($types as $k=>$v){
                                        echo "<a href='index.php?=media&type={$k}' class='file-control ";
                                         if($k==$_GET['type']) 
                                            echo "active" ;
                                        echo " ' >".$v['type']."</a>";
                                }
                                ?> -->
                                <!--<form action="#" class="dropzone" id="dropzoneForm">
                                    <div class="fallback">
                                        <input name="file" type="file" multiple />
                                    </div>
                                </form> -->
                               

                            <form  method="get" id="form_search" >

                                <div class="hr-line-dashed"></div>
                                <h5><strong>Sort By</strong></h5>

                                <div class="form-group">
                                        <input type="hidden" name="page" value="{{_get.page}}">

                                    <label for="">Select</label>
                                    <select id="sort" class="form-control m-b text-capitalize"  name="sort">
                                        {% for key,val in sort %}
                                            <option value="{{ key }}" {% if _get.sort ==  key  %}  SELECTED='selected' {% endif %}> {{key}} </option>
                                        {% endfor %}

                                    </select>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <h5><strong>search</strong></h5>
                               
                                    <input type="hidden" name="type" value="{{ curreny_type }}">
                                      <div class="form-group">
                                        <label for="">Added Date</label>
                                        <input type="date" name="date" class="form-control" value="{% if _get.date != '' %}{{ _get.date }}{% endif %}"  placeholder="">
                                      </div>
                                      {% if types[curreny_type]['search'] == '1'  %}

                                        <div class="form-group">
                                            <label for="">artist</label>
                                            <select class="form-control m-b" name="artist">
                                            	<option value="" >All Artists</option>
                                            	{% for key,artist in artists %}
													<option value="{{ artist.artist }}" {% if _get.artist ==  artist.artist  %}  SELECTED='selected' {% endif %}> {{artist.artist}} </option>
                                            	{% endfor %}
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="">type</label>
                                            <select class="form-control m-b" name="music_type">
                                            	<option value="" >All types</option>
                                            	{% for key,music_type in music_types %}
    												<option value="{{ music_type.genre }}" {% if _get.music_type ==  music_type.genre  %}  SELECTED='selected' {% endif %}> {{music_type.genre}} </option>
                                            	{% endfor %}
                                            </select>                                     
                                        </div>
                                        {% endif %}

                                    	<div class="form-group">
	                                        <label for="">Free text</label>
	                                        <input type="text" class="form-control" name="text" value="{% if _get.text != '' %}{{ _get.text }}{% endif %}" placeholder="Type here...">
                                      	</div>


                                      <button class="btn btn-sm btn-primary float-right m-t-n-xs" type="submit"><strong>Search</strong></button>
                                 </form>


                                <div class="clearfix"></div>
                                  <div class="hr-line-dashed mb-3 mt-3"></div>

                               <div class="detils-box" style="overflow: hidden; width: auto; ">
                                        <h5><strong>File Details</strong></h5>

                                        <div class="alert alert-success saved " style="display: none;" role="alert">
                                          <strong>Successfully Saved!</strong> Your changes was saved .
                                        </div>

                                        <input type="hidden" id="idfile" >
                                        <ul class="list-group clear-list">
                                        	<li class="list-group-item fist-item">
                                            {% if types[curreny_type]['search'] == '1'  %}

                                                <input style="width: 260px;border: solid 1px #ddd;height: 27px;" class="pl-1 float-right"   id="name-file"   type="text"  />
                                            {% else %}
                                                <span class="float-right"  id="name-file">  </span>
                                            {% endif %}

                                                Name
                                            </li>
                                            <li class="list-group-item ">
                                                <span class="float-right"  id="type-file">  </span>
                                                Type
                                            </li>
                                            <li class="list-group-item">
                                                <span class="float-right" id="size-file"> </span>
                                                Size
                                            </li>
                                            <li class="list-group-item">
                                                <span class="float-right"  id="date-file">  </span>
                                                Upload at:
                                            </li>
                                            <li class="list-group-item">
                                                <span class="float-right"  id="duration-file">  </span>
                                                Duration
                                            </li>
                                            {% if types[curreny_type]['search'] == '1'  %}
                                            <li class="list-group-item">
                                                <input style="width: 260px;border: solid 1px #ddd;height: 27px;" class="pl-1 float-right"   id="artist-file"   type="text"  />
                                                <span class="float-right"  id="1artist-file">  </span>
                                                Artist:
                                            </li>
                                            <li class="list-group-item fist-item" >
                                                <input style="width: 260px;border: solid 1px #ddd; height: 27px;" class="pl-1 float-right"   id="type-music-file"   type="text"  />
                                                <span class="float-right"  id="t1ype-music-fileff">  </span>
                                                Type:
                                            </li>


                                            <li class="list-group-item fist-item" >
                                                <button id="music_save" class="btn btn-sm btn-primary  float-right m-t-n-xs" type="button"><strong>Save</strong></button>                                            
                                            </li>


                                            {% endif %}



                                            
                                        </ul>
                                        <!--<strong>Notes</strong>
                                        <p>
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua.
                                        </p>
                                        <hr>-->

                                    <div class="file_details ">

                                        <div class="lightBoxGallery file-type-box" id="file-image" style="display: none;">
                                            <a href="" title="" data-gallery=""><img src="" style="height: 190px;"></a>
                                            <div id="blueimp-gallery" class="blueimp-gallery">
                                                <div class="slides"></div>
                                                <h3 class="title"></h3>
                                                <a class="close">×</a>
                                                <a class="play-pause"></a>
                                                <ol class="indicator"></ol>
                                            </div>
                                        </div>

                                        <div class="file-type-box " id="file-video" style="display: none;">
                                                <video width="290" height="162" controls  id="video" >
                                                    <source src="" type="video/mp4">
                                                    Your browser does not support the video tag.
                                                </video>
                                        </div>

                                        <div class="file-type-box " id="file-music" style="display: none;">
												<audio id="audio" controls>
												  <source src="" type="" id="audioSource">
												Your browser does not support the audio element.
												</audio>
                                        </div>

                                        <div class="file file-type-box" id="file-defualt" style="display: none;" >
                                            <a href="#">
                                                <span class="corner"></span>

                                                <div class="icon">
                                                    <i class="img-fluid fa fa-film"></i>
                                                </div>
                                                <div class="file-name">
                                                    Monica's birthday.mpg4
                                                    <br>
                                                    <small>Added: Fab 18, 2014</small>
                                                </div>
                                            </a>
                                        </div>
                                </div>

                            </div>
                                <div class="hr-line-dashed mb-3 mt-3"></div>


                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 animated fadeInRight">
                    <div class="row"> 
                    
                        <div class="col-lg-12">
                            {% for key,media in medias %}
								
                                <div class="file-box " id="media-{{ key }}">
                                    <div class="file">
                                        <a class="show_media" d-id="{{media.id}}" d-src="{{media.file_src}}"  d-src-type="{{ media.format }}" d-name="{{ media.name }}" d-date="{{ media.date_added }}" d-size="{{ media.size }}"  d-type="{{media.type}}"   d-duration="{{media.duration}}" d-type-music="{{ media.music_type }}" d-artist="{{ media.artist}}"       >
                                            <span class="corner"></span>
                                            {% if media.name != '' and curreny_type != 3 %}
                                            <div class="image">
                                                <img alt="image" class="img-fluid" src="{{media.file}}">
                                            </div>
                                            {% else %}
                                            <div class="icon">
                                            	{%if curreny_type == 3 %}
                                                	<i class="fa fa-music"></i>
                                                	{% else %}
                                                <i class="fa fa-file"></i>
                                                {% endif %}
                                            	
                                            </div>
                                            {% endif %}

                                            <div class="file-name media-name text-capitalize">
                                                <span class="name-file">{{ media.name }}</span>
                                                <br/>
                                                {% if media.artist %}<small>{{ media.artist }}</small> |{% endif %}<small>{{ media.type }}</small>
                                                <br/>
                                                <small>{{ media.date_added }}</small>
                                                <a href="#" class="btn btn-white btn-sm mb-1 float-right dlt-media" im="{{ key }}" ><i style="font-size: 14px;" class="fa fa-trash "></i>  </a>
                                             <!--   <a href="#" class="btn btn-white btn-sm mb-1 float-right edit-media" im="{{ key }}" ><i style="font-size: 14px;" class="fa fa-pencil "></i>  </a>
-->                                            </div>

                                        </a>
                                    </div>
                                </div>
                            {% endfor %}

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


    <script src="{{ constant('HTTP_JS') }}/jquery-3.1.1.min.js"></script>


    <!-- blueimp gallery -->
    <script src="{{ constant('HTTP_JS') }}/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>

        <!-- Sweet alert -->
    <script src="{{ constant('HTTP_JS') }}/plugins/sweetalert/sweetalert.min.js"></script>



    <!-- DROPZONE -->
    <script src="{{ constant('HTTP_JS') }}/plugins/dropzone/dropzone.js"></script>
    <script>
        Dropzone.options.dropzoneForm = {
            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 2, // MB
            dictDefaultMessage: "<strong>Drop files here or click to upload. </strong></br> (This is just a demo dropzone. Selected files are not actually uploaded.)"
        };

    </script>

</div>
{% endblock %}