@extends('layouts.app')

@section('content')

<meta name="csrf-token" id="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ asset('/css/jquery.dataTables.min.css') }}">
<link rel="stylesheet" href="{{ asset('/css/dropzone.min.css') }}">

<style type="text/css">
    .ui-autocomplete {
        z-index: 99999;
    }

    .excel_buttons {
        margin: 0px 5px;
    }
</style>
<script src="{{ asset('/js/dropzone.min.js') }}"></script>

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

<div class="box box-danger">
    <div class="box-header with-border">
        <h3 class="box-title">Search Albums by Category</h3>
    </div>
    <form role="form" method="GET" action="{{ route('songs.index') }}">
        <div class="box-body">
            <div class="row">
                <input type="hidden" name="_token" value="{{ csrf_token() }}">

                <div class="col-md-2">
                    <select class="form-control" name="type">
                        <option value="">Select Album Category</option>
                        @foreach($albumCat as $key => $typeCat)
                        <option value="{{ $key }}" @if($key == $cat) selected @endif>{{ $typeCat }}</option>
                        @endforeach
                    </select>
                </div>           
                <div class="col-md-2">
                    <select class="form-control" name="user_type">
                        <option value="">Select User Type</option>
                        @foreach($userType as $key => $uType)
                        <option value="{{ $uType->id }}" @if($uType->id == $userTypeId) selected @endif>{{ $uType->name }}</option>
                        @endforeach
                    </select>
                </div>           

                <div class="col-xs-1">
                    <button class="btn btn-success form-control" type="submit">
                        <i class="fa fa-search"></i> Search
                    </button>
                </div>
            </div>
        </div>
    </form>
    <!-- /.box-body -->
</div>
<!-- /.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">User data</h3>
        <div class="pull-right">
            <a href="{{ URL::to('songs/downloadExcel') }}" target="_blank" class="btn btn-success btn-sm excel_buttons pull-right">Download Excel</a>
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#add-album-modal"><b>Add Albums</b></button>
            <button type="button" class="btn btn-primary btn-sm " data-toggle="modal" data-target="#import-file-modal"><b>Import File</b></button>
        </div>
    </div>
    <!-- /.box-header -->
    <div class="box-body">
        <table id="example" class="table table-bordered table-hover dataTable">
            <tr>
                <th>ID</th>
                <th>Album Name</th>
                <th>Cover Image</th>
                <th>Date</th>
                <th>Songs</th>
                <th>Categories</th>
                <th>Action</th>
            </tr>
            @foreach($results as $value)
            <tr class="record_{{$value->id}}">
                <td>{{ $value->id }}</td>
                <td>{{ $value->name }}</td>
                <td>
                    <img class="img-responsive menu-thumbnails" src="/no_image.jpg" width="100"/>                </td>
                <td>{{(new \App\Http\Helper)->date_format($value->created_at)}}</td>
                <td>
                    <a href="#" class="btn btn-primary btn-sm btn-block space_buttons openSongsList" data-id="{{ $value->id }}" data-toggle="modal" data-target="#songs-modal">Songs List</a>
                </td>
                <td>
                    <ul style="list-style-type: none;">
                        @if(isset($type[$value->id]) && !empty($type[$value->id]))
                            @foreach($type[$value->id] as $category)
                                <li>
                                    {{ '- '.$category }}
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </td>
                <td>
                    <a href="#" class="btn btn-primary btn-sm btn-block space_buttons openPopUp" data-id="{{ $value->id }}" data-type="album" data-toggle="modal" data-target="#edit-album-modal">Edit</a>

                    @if($value->status == 'unpublished')
                    <a href="#" class="btn btn-danger btn-sm btn-block space_buttons publishAlbum" data-id="{{ $value->id }}" data-status="published">UnPublished</a>
                    @else
                    <a href="#" class="btn btn-success btn-sm btn-block space_buttons publishAlbum" data-id="{{ $value->id }}" data-status="unpublished">Published</a>
                    @endif

                    <a href="#" class="btn btn-primary btn-sm btn-block space_buttons uploadSongs" data-id="{{ $value->id }}" data-album_name="{{ $value->name }}" data-toggle="modal" data-target="#upload-songs-modal">Upload Songs</a>

                    <a href="#" class="btn btn-danger btn-sm btn-block space_buttons deleteAlbum" data-id="{{ $value->id }}">Delete</a>
                </td>
            </tr>
            @endforeach
        </table>
    </div>   
    <hr>
    <div class="col-xs-12">
        <div class="col-xs-3">
    <form role="form" method="get" action="{{ route('songs.index') }}">
        <input type="number" name="go_to_page" id="go_to_pages" placeholder="Go To Page">
    </div>
        <div class="col-xs-1">
        <button class="btn btn-success form-control" type="submit">
            <i class="fa fa-search"></i> Search
        </button>
    </div>
        </form></div>
    <div class="text-right margin-r-5">
        <div>Showing {{ $pageInfo['currentPage'] }} to {{ $pageInfo['lastPage'] }} of {{ $pageInfo['total'] }} entries</div>
        <div>{!! $results->appends($append)->render() !!}</div>
    </div>
</div>
<!-- /.box -->

@include('elements.albums')

<script src="{{ asset('/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('/js/select2.min.js') }}"></script>
<script src="{{ asset('/js/songs.js') }}"></script>

<script type="text/javascript">
$(document).ready(function () {
    

    Dropzone.options.albumSongsUpload = {
        maxFilesize: 10000,
        acceptedFiles: ".mp3",
    };
});
</script>
<script>
    $(document).on('keypress', '#go_to_page', function (e) {
       
        // Check if the pressed key is Enter (key code 13)
        if (e.which === 13) {
            e.preventDefault();
            var page_num = $(this).val();
            $.ajax({
                type: "GET",
                url: '/songs/index',
                data: {"_token": "{{ csrf_token() }}", "page_num": page_num},
                success: function (json) {
                    alert('fgf');
                }
            });
        }
    });
    
    </script>
@endsection