<?php

global $zc_ms;

$user_id = 0;

$all_stats = $zc_ms->get_plugin_option( 'stats' );

$total_song_count = $all_stats['total_song_count'];

$total_songs = 0;

$available_genres = $all_stats['available_genres'];

$playlist_count = $all_stats['sample_playlist_count'];

$all_settings = $zc_ms->get_plugin_option( 'settings' );

$table_height = (isset($all_settings['table_height']) && is_numeric($all_settings['table_height']) && $all_settings['table_height'] >= 200) ? $all_settings['table_height'] : '';

$show_title = $all_settings['show_page_title'];

$date_format = isset($all_settings['date_format']) ?  $all_settings['date_format'] : 'dd/mm/yy';

$opening_text = array_key_exists('opening_text',$all_settings) ? $all_settings['opening_text'] : "";

$custom_msg = $all_settings['custom_msg'];

$header_row_color = $all_settings['header_row_color'];

$body_row_color = $all_settings['body_row_color'];

$show_try_me =  $all_settings['show_try_me'];

$user_playlists = NULL;

$currentUser = null;

$isUserLog = is_user_logged_in();

$isSuperAdmin = is_super_admin();

if($isUserLog){

    $currentUser = wp_get_current_user();

    $user_id =$currentUser->ID;

}


if($user_id > 0){

    $user_playlists = get_user_meta($user_id, 'ms_playlists');

}

$event_id = get_user_meta($user_id, 'event_id', true);

global $global_page_width;

global $global_full_width;

$wp_upload = wp_upload_dir();

$upload_dir = $wp_upload['baseurl'] . '/EMP/';

$args = array('post_type' => 'songs', 'post_status' => 'publish',  'fields' => 'ids', 'posts_per_page' => -1 );

$query = new WP_Query($args);

if($query->have_posts()) {

    $total_songs = $query->post_count;

}

if(isset($global_page_width)){

    $full_width = $global_full_width;

    $page_width = $global_page_width;

}
?>

<div class="bootstrap-iso song-selector-wrapper">

    <div id="song_selector_block" class="container-fluid">

        <input type="hidden" class="pdf_url" value="<?= $upload_dir ?>">

        <?php
            if(!is_admin() && $show_title == '1'): ?>

                <h1 class="plugin_title">Song Selector</h1>

        <?php endif;

            if ($isUserLog): ?>

                <div class="row" style="margin-bottom: 15px !important">

                     <div class="col-md-12 col-sm-12 col-xs-12">

                        <h3 class="ellipsis">
                            Welcome <?= esc_html((strlen($currentUser->display_name)> 10 ? substr($currentUser->display_name,0,10)."..." : $currentUser->display_name)); ?>!
                        </h3>

                    </div>

                </div>

    <?php else: ?>

                <div class="row">

                    <div class="col-md-12 col-sm-12 col-xs-12">

                        <h3 class="margin-top-5"> Welcome! </h3>

                    </div>

                </div>

                <div class="row margin-top-5">

                    <div class="col-md-12">

                        <p style="line-height: 20px !important; margin-bottom: 10px !important">

                            Currently you are limited to viewing and searching our  PRINT VERSION only!

                        </p>

                    </div>

                </div>

            <?php
        endif;

        if($user_id > 0 ): ?>

            <script>

                var userPlaylists = '<?= json_encode($user_playlists); ?>';

                var availableGenres = '<?= json_encode($available_genres); ?>';

                var username = '<?= $currentUser->user_login; ?>';

                var pdfdir = "<?=  $upload_dir ?>";

            </script>

        <?php endif; ?>

        <div class="container-fluid" id="master-playlist">

            <div class="row">

                <div class="col-xs-12 col-sm-3 col-sm-offset-2 col-md-2 col-md-offset-3 col-lg-2 col-lg-offset-3">

                    <label for="search-by" style="float: left">Search By: </label>

                </div>

            </div>

            <div class="row">

                <div id="search-wrapper" class="col-xs-12 col-sm-3 col-sm-offset-2 col-md-2 col-md-offset-3 col-lg-2 col-lg-offset-3" >

                    <select id="search-by" class="form-control input-sm" name="search-by">
                        <option value='title_artist'>Title - Artist</option>
                        <option value='title'>Title</option>
                        <option value='artist_name'>Artist</option>
                        <option value='song_genre'>Genre</option>
                        <option value='song_year'>Year</option>
                    </select>

                </div>

                <div class="col-md-4 col-xs-12 col-sm-5 col-lg-4 " >

                      <div class="input-group input-group-sm" id="search-term-group">

                          <input type="text" class="form-control input-sm" name="search-term" id="search-term" >

                          <span class="input-group-btn">

                              <button class="btn btn-default btn-sm" id="search-btn" type="button">Search</button>

                          </span>
                      </div>

                </div>

            </div>

            <?php
                $args=array();

                $args['playlistID']='sample';

                $args['posts_per_page']='-1';

                $args['offset']='0';

                $args['playlist_selection']='sample';

                $unsanitized_args = $args;

                $sanitized_data = $zc_ms->sanitize_query($unsanitized_args);

                $args = $sanitized_data['args'];

                $query_songs = new WP_Query($args);

                $query_count_sample = $query_songs->found_posts;

            ?>

            <div class="row">

                <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-lg-6 col-lg-offset-3" id="playlist-row">

                    <form class="form-inline">

                        <div class="form-group form-group-sm play-list-full-width"  id="playlist-form-group">

                            <label for="playlist-selection">Select a Playlist:</label>

                            <select id="playlist-selection" class="form-control"  style="width:100% !important" data-current="">

                                <option id="pdf-0" value="sample" <?=  $user_id === 0 ? "selected" : ""; ?> >Print Version (Total: <?=$query_count_sample; ?>)</option>

                                <option value="selected"> Current Selection (Total: 0) </option>

                            </select>

                        </div>

                    </form>

                </div>

                <div class="col-md-2" id="instruction-wrapper">

                    <label>&nbsp;</label>

                    <a id="pdf-print" class="btn btn-default" href="<?= esc_url($upload_dir . 'song-list.pdf'); ?>"  target="_blank">

                        <i class="fa fa-file-pdf-o"></i>

                    </a>

                    <button type="button" id='instruction' class='btn btn-default' style='font-size: 20px !important; border: none' id='help-btn' >

                        <span class="glyphicon glyphicon-question-sign" style="top: 3px"></span>

                    </button>

                </div>

            </div>

             <?php
                if ( $user_id > 0 ):

                    $count_pages = round($playlist_count/50);

                else:

                    $count_pages = round($total_song_count/50);

                endif;
            ?>

            <div class="row" >

                <div class="col-md-12">

                    <div class="table-container" style="padding-right: 0px; padding-left: 0px; <?= !empty($table_height) ? 'height:'.$table_height.'px !important' : ''; ?> ">


                        <table class="table"  style="border: none !important" id="music_selector_table" datatable="" width="100%" cellspacing="0" data-scroll-x="true" scroll-collapse="false">

                           <thead class="music_selector_table_head">

                                <tr class="music_selector_thead_tr">

                                    <th class="music_selector_thead_th song-select checkbox-col" style="text-align: center">

                                        <input type="checkbox" id="select-all-songs"  value="1" />

                                    </th>

                                    <th style="padding-left: 0px !important" class="music_selector_thead_th song-title title-col" data-sort="string">

                                        <a style="<?= esc_attr('color: '.$header_row_color); ?> !important; box-shadow: none;" href="javascript:void(0) ">TITLE </a>
                                        - <a style="box-shadow: none; <?= esc_attr('color: '.$header_row_color); ?> !important;" href="javascript:void(0) ">ARTIST</a>

                                    </th>

                                    <!-- <th class="music_selector_thead_th song-artist" data-sort="string"><a href="javascript:void(0) ">ARTIST</a></th>-->
                                    <th style="padding-left: 0px !important" class="music_selector_thead_th song-genre genre-col" data-sort="string">

                                        <a style="<?= esc_attr('color: '.$header_row_color); ?> !important; box-shadow: none;" href="javascript:void(0) ">GENRE</a>

                                    </th>

                                    <th style="padding-left: 0px !important" class="music_selector_thead_th song-year year-col" data-sort="int">

                                        <a style="<?= esc_attr('color: '.$header_row_color); ?> !important; box-shadow: none;" href="javascript:void(0) ">YEAR</a>

                                    </th>

                                    <th style="padding-left: 0px !important" class="music_selector_thead_th song-length length-col" data-sort="int">

                                        <a style="<?= esc_attr('color: '.$header_row_color); ?> !important; box-shadow: none;" href="javascript:void(0) ">LENGTH</a>

                                    </th>

                                </tr>

                            </thead>

                            <tbody id="music_selector_results">

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

            <div class="row">

                <div class="col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3  col-lg-4 col-lg-offset-4">

                    <div class="col-md-12 " align="center" style="margin-bottom: 10px">

                        <div class="input-group input-group-sm page-indicator">

                            <span class="input-group-btn">

                                <button  class="btn btn-default prev-batch"  type="button">

                                    <span class="glyphicon glyphicon-chevron-left"></span>

                                </button>

                            </span>

                            <input type="text" readonly class="form-control text-center current-page" value="<?= esc_attr('1/'.$total_songs); ?>">

                            <input type="hidden" id="total-pages" >

                            <span class="input-group-btn">

                                <button  class="btn btn-default next-batch"  type="button">

                                    <span class="glyphicon glyphicon-chevron-right"></span>

                                </button>

                            </span>

                        </div>

                    </div>

                </div>

                <div class="col-md-3 col-sm-3 col-lg-4" id="page-length-wrapper">

                   <form class="form-inline">

                       <div  class="form-group form-group-sm" id="page-length">

                           <label for='limit-results-selection'  style="display: inline !important">Page</label>

                           <select id="limit-results-selection" class="form-control">

                               <option value=10>10</option>

                               <option value=25>25</option>

                               <option value=50 selected="selected">50</option>

                               <option value=100>100</option>

                           </select>

                       </div>

                   </form>

                </div>

           </div>

            <div class="row flex-row">

                <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6 col-md-offset-3 col-sm-offset-3 col-lg-offset-3">

                    <div class="col-md-12" style="font-size: 13px !important; margin-bottom: 7px !important;" align="center">

                            Current Selection: <span class="song-count"> 0 </span>

                    </div>

                    <div class="col-md-12" id="playlist_length" align="center" style="font-size: 13px !important; margin-bottom: 7px !important;">

                        Playlist Length: <span datasrc="" class="playlist-length"> 0h 00m 00s </span>

                    </div>

                </div>

                <div class="col-md-6 col-xs-12 col-sm-6 col-lg-4 col-md-offset-3 col-sm-offset-3 col-lg-offset-4" id="button-list-wrapper">

                    <div class="col-md-12 btn-container" style="margin-bottom: 10px;" align="center">

                        <button type="button" class="btn btn-block btn-default" style="background-color: #00bf9d !important; color: #ffffff !important;" id="current-selection-q">

                            Show Selection

                        </button>

                    </div>

                </div>

            </div>
            <div class="container-fluid">
                <div class="row">

                    <div class="col-md-12">

                        <span id= 'poweredby' style="float:right">
                            Powered by <a  href="https://www.eventmasterpro.com/wp-plugins" target="_blank">Event Master Pro</a>
                        </span>
                    </div>
                </div>
            </div>

            <input type="hidden" id="body_row_color" value="<?= esc_attr($body_row_color); ?>">

            <input type="hidden" id="last_playlist" value="">

        </div>

        <span class="playlist_loading" datasrc="<?= plugins_url('emp-song-selector-full/images/loading.gif'); ?>" style="  position: absolute;margin-top: 70px; "></span>



        <!-- Modal -->
        <div class="modal fade" id="confirmation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

            <div class="modal-dialog" role="document">

                <div class="modal-content">

                    <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                            <span aria-hidden="true">&times;</span>

                        </button>

                        <h4 class="modal-title" id="myModalLabel">Confirmation</h4>

                    </div>

                    <div class="modal-body">
                        Are you sure you want to load up this playlist, this will clear your current song selection?
                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

                        <button type="button" class="btn btn-primary" id="loadPlaylist" data-dismiss="modal">Yes</button>

                    </div>

                </div>

            </div>

        </div>



    </div>
</div>
