@extends('layouts.app')

@section('content')
<meta name="csrf-token" id="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ asset('/css/dropzone.min.css') }}">
<script src="{{ asset('/js/dropzone.min.js') }}"></script>
<link rel="stylesheet" href="{{ asset('/css/select2.min.css') }}">

<style type="text/css">
    .select2-container{
        float: left !important;
        padding-left: 1px !important;
    }
    .dpZone{
        background: white none repeat scroll 0 0;
        border: 2px solid rgba(0, 0, 0, 0.3);
        min-height: 150px;
        padding: 20px;
    }
    .dpZone .dz-message {
        margin: 2em 0;
        text-align: center;
    }
</style>

<section class="content-header" style="margin-bottom:20px">
    <h1>Song Management <small>manage songs</small></h1>
</section>
<!-- /.box -->

@if ($message = Session::get('success'))
<div class="alert alert-warning shows-div">
    <p>{{ $message }}</p>
</div>
@elseif ($message = Session::get('failure'))
<div class="alert alert-warning shows-div">
    <p>{{ $message }}</p>
</div>
@endif

<div class="box">
    <div class="box-header">
        <h3 class="box-title">Upload Multiple Songs</h3>
        <div class="pull-right">
            <button class="btn btn-success btn-sm pull-right" onclick="window.history.back();">Back</button>
        </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <form id="songs-upload" class="dpZone form-horizontal dz-clickable" enctype="multipart/form-data" method="POST" action="{{ route('songs.songs_save') }}">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <!-- Album div -->
            <div class="col-xs-12 col-sm-12 col-md-12" >
                <div class="form-group">
                    <label class="col-md-1">Album:</label>
                    <select id="album" class="col-md-3 album" name="album" required="true" onchange="addDropzone()">
                    </select>

                    <div class="col-md-2">
                        <!-- <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#add-album-modal"><b>Add</b></button> -->
                    </div>
                    <br><br>
                    <span class="col-md-1"></span><span class="hideError" style="color:red;font-size:10px;">*Please select album before upload songs.</span>
                </div>

                <div class="">
                    <div class="dz-default dz-message" style="color:#cfcfcf" data-dz-message="">
                        <span>Browse or Drop files here to upload</span>
                    </div>
                </div>
            </div>
            <!-- Album div end -->
            <div style="padding-top: 100px;"></div>
        </form>
    </div>
</div>

<div class="addBorderClass" id="songListDiv" style="display: none;margin-top: 5px;">
    <ul id="addSongsListing" style="list-style-type: none;"></ul>
</div>

@include('elements.songs')
<script src="{{ asset('/js/select2.min.js') }}"></script>
<script src="{{ asset('/js/songs.js') }}"></script>
<script type="text/javascript">
                        function addDropzone() {
                            // If you use jQuery, you can use the jQuery plugin Dropzone ships with:
                            $(".dz-message").css("color", "#337ab7");
                            if (!$("#songs-upload").hasClass("dropzone")) {
                                $("#songs-upload").addClass('dropzone');
                                $("#songs-upload").dropzone({url: "/songs/songs_save"});
                            }
                            //Remove uploaded songs listing
                            $('.hideError').hide();
                            $('.dz-preview').remove();
                            $('.dz-message').show();
                        }
                        Dropzone.options.songsUpload = {
                            maxFilesize: 10000,
                            acceptedFiles: ".mp3",
                        };
</script>
@endsection