@extends('layouts.app')

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

<style type="text/css">
    section.channelLib {
        padding: 0 0 10px !important;
    }
</style>

<section class="content-header" style="margin-bottom:20px">
    <h1>Live Radio</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">Assign album/songs to Live Radio</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="liveRadioForm" class="form-horizontal liveRadioForm" name="updatePlive" role="form" enctype="multipart/form-data" method="POST" action="{{ route('radios.playlist_update') }}">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">

            <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-6">
                    <div class="channelList">

                        <!-- Live Radio div -->
                        <div class="ChannelSelect clearDiv col-xs-12">
                            <select id="channelId" class="channelCls liveradio col-md-8" name="live_radio_id">
                                <option value=""> -- Select -- </option>
                                @foreach($result['radios'] as $key=>$radio)
                                <option value="{{$radio->id}}">{{ $radio->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!-- Live Radio end -->

                        <!-- Select type -->
                        <div class="selectType clearDiv col-xs-12">
                            <select class="movieType col-md-8" name="type">
                                <option value=''> -- Select Type -- </option>
                                <option value='album'>Album</option>
                                <option value='songs'>Songs</option>
                            </select>                                
                        </div>

                        <!-- Album div -->
                        <div id="albumDiv" class="clearDiv col-xs-12" style="display: none;">
                            <select id="albumId" class="albumCls col-md-8" name="album_id[]" multiple="multiple">
                                @foreach($result['albums'] as $key=>$album)
                                <option value="{{$album->id}}" data-id="{{$album->id}}" data-status="{{$album->status}}">{{ $album->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!-- Album div end -->

                        <!-- Songs listing -->
                        <div class="dd nestable-lists VideoList albumVideoList clearfix" id="albumSongsDiv" style="display: none;">
                            <ul id="albumSongList" class="dd-list sortable list-group-sortable-connected list-group-sortable-handles videoUl addAlbumSongs clearfix">
                            </ul>
                        </div>

                        <div class="dd nestable-lists VideoList clearfix" id="songsDiv" style="display: none;">
                            <ul id="songList" class="dd-list sortable list-group-sortable-connected list-group-sortable-handles videoUl addSongs clearfix">
                            </ul>

                            <div>
                                <input class="col-md-10 songName" name="track" type="text" data-song_id="" data-filename="" placeholder="Please choose song.">
                                <button class="btn btn-primary AddVideo add_song" data-added="6" data-start="6">Add</button>
                            </div>
                            <label id="song_name-error" class="error" for="track" style="display: none;">Please enter video title.</label>
                        </div>
                        <!-- End songs listing -->
                    </div>
                </div>
            </div>

            <button class="btn btn-primary publishBtn">Publish</button>
        </form>
    </div>
</div>

<script src="{{ asset('/js/select2.min.js') }}"></script>
<script src="{{ asset('/js/jquery.sortable.js') }}"></script>
<script src="{{ asset('/js/jquery.ui.touch.js') }}"></script>
<script src="{{ asset('/js/liveradio2.js') }}"></script>

<script type="text/javascript">
//Display artist div if video type karaoke selected
$(document).on('change', '.movieType', function () {
    if ($(".movieType option:selected").val() == 'album') {
        $('#albumDiv').show();
        $('#albumSongsDiv').hide();
        $('#albumSongList li').remove();
        $('#songsDiv').hide();
        $('#songList li').remove();
        //$('.albumCls').val('');
        $('.albumCls').select2("val", "");
        $('.albumCls li').remove();
    } else if ($(".movieType option:selected").val() == 'songs') {
        $('#albumDiv').hide();
        $('#albumSongsDiv').hide();
        $('#albumSongList li').remove();
        $('#songsDiv').show();
        $('.albumCls').select2("val", "");
    } else {
        $('#albumDiv').hide();
        $('#songsDiv').hide();
        $('#albumSongsDiv').hide();
        $('#albumSongList li').remove();
        //$('.albumCls').val('');
        $('#songList li').remove();
        $('.albumCls').select2("val", "");
    }
});

$(function () {
    setTimeout(function () {
        $("#failureMessage").hide('blind', {}, 500)
    }, 5000);
});
</script>
@endsection