@extends('layouts.admin.main')
@section('title', 'Program')
@section('style')
    <link href="{{ asset('assets/plugins/datepicker/datepicker.min.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/plugins/switchery/switchery.min.css') }}" rel="stylesheet" type="text/css">
    <link href="{{asset('assets/plugins/summernote/summernote-bs4.css')}}" rel="stylesheet" type="text/css">

@endsection
@section('rightbar-content')               
<div class="breadcrumbbar">
  <div class="row align-items-center">
    <div class="col-md-8 col-lg-8">
      <h4 class="page-title">{{!empty($albumData) ? __('adminWords.update').' '.__('adminWords.album') : __('adminWords.create').' Program' }}</h4>
      <div class="breadcrumb-list">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{url('/')}}">{{__('adminWords.home')}}</a></li>
          <li class="breadcrumb-item"><a href="#">Program</a></li>
        </ol>
      </div>
    </div> 
  </div>          
</div>
  
<div class="contentbar">  
    <div class="row">
        <div class="col-lg-12">
            <div class="card m-b-30">
                <div class="card-header"> 
                    <div class="text-right">   
                        <a class="btn btn-primary" href="{{ url('/program') }}">{{ __('adminWords.go_back') }}</a>
                    </div>                               
                    <div class="row align-items-center">
                        <div class="col-6">
                        <h5 class="card-title mb-0"> {{!empty($albumData) ? __('adminWords.update').' '.__('adminWords.album') : __('adminWords.create').' Program'}}</h5>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                <div class="admin-form">
                    
                <form action="{{ route('update_program') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-lg-6"> 
                            <div class="form-group{{ $errors->has('album_name') ? ' has-error' : '' }}">
                                <label for="album_name">Program Name<sup>*</sup></label> 
                                 <input type="text" name="program_name" class="form-control" value="{{ $program->program_name }}" required>
                            </div>   
                            
                            @php 
                                $artist_ids = json_decode($program->artist_name) ?: [];
                                $giestsList = [];
                            @endphp
                            <div class="form-group">
                                <label for="artist_name">Presenter Name </label>
                                <select name="artist_name[]" id="artist_name" class="form-control multipleSelectWithSearch require presenter-list" multiple="multiple" data-placeholder="Select Presenter">
                                      @if(!empty($artists))
                                      @foreach($artists as $artist)
                                         <option value="{{ $artist->id }}" @if(isset($artist_ids) && !empty($artist_ids) && (in_array($artist->id,$artist_ids))) selected @endif>{{ $artist->artist_name  }}</option>
                                         @php 
                                            if(in_array($artist->id,$artist_ids)){
                                                $giestsList[$artist->id] = $artist->artist_name;
                                            }
                                         @endphp
                                      @endforeach
                                      @endif
                                  </select>
                            </div>
                            @php 
                                $guestIds = json_decode($program->guest) ?: [];
                            @endphp

                            <div class="form-group">
                                <label for="artist_name">Guest Name</label>
                                <select name="guest[]" id="guest" class="form-control multipleSelectWithSearch guest-list" multiple="multiple" data-placeholder="Select Guest">
                                    @foreach($giestsList as $k=>$v)
                                    <option value="{{ $k }}" @if(isset($guestIds) && !empty($guestIds) && (in_array($k,$guestIds))) selected @endif>{{ $v  }}</option>
                                    @endforeach
                                </select>
                          </div>
                                    
                          
                           
                            @php 
                                $program_type = json_decode($program->type) ?: [];
                            @endphp
                            <div class="form-group">
                                  <label for="type">Program Type <em class="text-danger">*</em></label>
                                  <select name="type[]" id="type" class="form-control multipleSelectWithSearch" multiple="multiple" required>
                                       <option value="1" @if(in_array(1,$program_type)){{ 'selected' }} @endif>Prime Time Program</option>
                                       <option value="2" @if(in_array(2,$program_type)){{ 'selected' }} @endif>Specialist Program</option>
                                       <option value="3" @if(in_array(3,$program_type)){{ 'selected' }} @endif>Live Program</option>
                                       <option value="4" @if(in_array(4,$program_type)){{ 'selected' }} @endif>Pre-Recorded Program</option>
                                  </select>
                            </div>

                            <div class="form-group">
                                   <label for="start_time">Start Time</label>
                                   <input type="time" name="start_time" class="form-control" placeholder="Enter Start Time" onchange="checkOverlap()" value="{{ $program->start_time }}" required>
                            </div>

                            <div class="form-group">
                                   <label for="end_time">End Time</label>
                                   <input type="time" name="end_time" class="form-control" placeholder="Enter End Time" onchange="checkOverlap()" value="{{ $program->end_time }}" required>
                            </div>
                            <small class="TimeMsg"></small>

                            <div class="form-group">
                                <label for="end_time">Select Days</label> 

                                @php 
                                    //week days 
                                    $days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
                                    $selectedDays = $program->days!=null ? json_decode($program->days,true) : [];
                                      
                                    if($selectedDays == null){
                                        $selectedDays = [];
                                    }
                                   // dd($selectedDays);
                                @endphp
                                <ul>
                                @foreach($days as $day)
                                <li>
                                    <input type="checkbox" class="program_days" name="days[]" value="{{$day}}" @if(in_array($day, $selectedDays)) checked  @endif > {{$day}}
                                </li>
                                @endforeach
                            </ul>
                            </div>


                            <!-- <div class="form-group">
                                <label for="time">Time <em class="text-danger">*</em></label>
                                <input type="text" name="time" class="form-control" placeholder="Enter Time" value="{{ $program->time }}" required>
                            </div> -->

                            <div class="form-group{{ $errors->has('description') ? ' has-error' : '' }}">
                                {!! Form::label('description', __('description')) !!}
                                <!-- {!! Form::textarea('description', null, ['class' => 'form-control', 'rows' => '3', 'placeholder'=> __('adminWords.enter').' '.__('adminWords.description')]) !!} -->
                                {!! Form::textarea('description', $program->description, ['id' => 'summernote','class' => 'form-control require' ,'required']) !!}
                                <small class="text-danger">{{ $errors->first('adminWords.description') }}</small>
                            </div>  
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group{{ $errors->has('weekdays') ? ' has-error' : '' }} switch-main-block">
                                    <div class="row">
                                        <div class="col-lg-3">
                                            {!! Form::label('Weekdays') !!}
                                        </div>
                                        <div class="col-lg-2">
                                            {!! Form::checkbox('weekdays', 1, (!empty($program) &&   $program->weekdays == 0 ? 0 : 1), ['class' => 'js-switch-primary']) !!}
                                        </div>
                                    </div>
                                    <small class="text-danger">{{ $errors->first('weekdays') }}</small>
                            </div>
                          
                            <div class="form-group{{ $errors->has('repeat_program') ? ' has-error' : '' }} switch-main-block">
                                <div class="row">
                                    <div class="col-lg-3">
                                        {!! Form::label('Parent Program') !!}
                                    </div>
                                    <div class="col-lg-5">
                                                                            @php 
                                                                                $parentProgram = \Modules\Album\Entities\Program::where('status',1)->where('id','!=',$program->id)->pluck('program_name','id')->toArray();
                                                                            @endphp
                                        {!! Form::select('repeat_program', $parentProgram, (!empty($program) ? $program->repeat_program : ''), ['class' => 'form-control select2WithSearch','placeholder' => __('adminWords.choose')]) !!}

                                    </div>
                                </div>
                                <small class="text-danger">{{ $errors->first('repeat_program') }}</small>
                            </div>
                            <div class="form-group{{ $errors->has('status') ? ' has-error' : '' }} switch-main-block">
                                <div class="row">
                                    <div class="col-lg-3">
                                        {!! Form::label('status', __('adminWords.status')) !!}
                                    </div>
                                    <div class="col-lg-2">
                                        {!! Form::checkbox('status', 1, (!empty($program) &&   $program->status == 0 ? 0 : 1), ['class' => 'js-switch-primary']) !!}
                                    </div>
                                </div>
                                <small class="text-danger">{{ $errors->first('status') }}</small>
                            </div>
                            <div class="form-group{{ $errors->has('is_featured') ? ' has-error' : '' }} switch-main-block">
                                <div class="row">
                                    <div class="col-lg-3">
                                        {!! Form::label('is_featured', __('adminWords.featured')) !!}
                                    </div>
                                    <div class="col-lg-2">
                                        {!! Form::checkbox('is_featured', 1, (!empty($program) &&   $program->is_featured == 0 ? 0 : 1), ['class' => 'js-switch-primary']) !!}
                                    </div>
                                </div>
                                <small class="text-danger">{{ $errors->first('is_featured') }}</small>
                            </div>
                           {{-- <div class="form-group{{ $errors->has('is_trending') ? ' has-error' : '' }} switch-main-block">
                                <div class="row">
                                    <div class="col-lg-3">
                                        {!! Form::label('is_trending', __('adminWords.trending')) !!}
                                    </div>
                                    <div class="col-lg-2">
                                        {!! Form::checkbox('is_trending', 1, (!empty($program) &&   $program->is_trending == 0 ? 0 : 1), ['class' => 'js-switch-primary']) !!}
                                    </div>
                                </div>
                                <small class="text-danger">{{ $errors->first('is_trending') }}</small>
                            </div>
                            <div class="form-group{{ $errors->has('is_recommended') ? ' has-error' : '' }} switch-main-block">
                                <div class="row">
                                    <div class="col-lg-3">
                                        {!! Form::label('is_recommended', __('adminWords.recommended')) !!}
                                    </div>
                                    <div class="col-lg-2">
                                        {!! Form::checkbox('is_recommended', 1, (!empty($program) &&   $program->is_recommended == 0 ? 0 : 1), ['class' => 'js-switch-primary']) !!}
                                    </div>
                                </div>
                                <small class="text-danger">{{ $errors->first('is_recommended') }}</small>
                            </div>
                            <div class="form-group{{ $errors->has('is_verified') ? ' has-error' : '' }} switch-main-block">
                                <div class="row">
                                    <div class="col-lg-3">
                                        {!! Form::label('is_verified', __('adminWords.verified')) !!}
                                    </div>
                                    <div class="col-lg-2">
                                        {!! Form::checkbox('is_verified', 1, (!empty($program) &&   $program->is_verified == 0 ? 0 : 1), ['class' => 'js-switch-primary']) !!}
                                    </div>
                                </div>
                                <small class="text-danger">{{ $errors->first('is_verified') }}</small>
                            </div>--}}
                            <div class="form-group{{$errors->has('image') ? 'has-error' : ''}}">
                                <label for="image" class="col-lg-12">{{ __('adminWords.album').' '.__('adminWords.image') }}<sup>*</sup></label> 
                                <label for="image" class="btn btn-danger js-labelFile" data-toggle="tooltip" data-original-title="Album Image">
                                <i class="feather icon-image"></i>
                                {!! Form::file('image',['class' => 'form-control hide basicImage', 'data-label'=>'albumImage', 'name'=>'image', 'data-ext'=>"['jpg','jpeg','png']", 'data-image-id'=>'album_image', 'id'=>'image']) !!}
                                <span class="js-fileName">{{__('adminWords.choose_image')}}</span>
                                </label>
                                <input type="hidden" name="image" id="image_name" value="{{(!empty($albumData) ? $albumData->image:'')}}">
                                <span class="image_title" id="albumImage">{{(!empty($program) && $program->image != '' ? $program->image : __('adminWords.choose_image') )}}</span>
                                <small class="text-danger">{{ $errors->first('image')}}</small>
                                <input type="hidden" name="image" id="album_image" />
                                <p class="note_tooltip">Note: {{ __('adminWords.recommended').' size - 500X500 px' }} </p>
                            </div>

                            <div class="form-group{{$errors->has('presenter_banner') ? 'has-error' : ''}}">
                                <label for="presenter_banner" class="col-lg-12">{{ __('Presenter').' '.__('Banner Image') }}<sup>*</sup></label> 
                                    @php $presenterBtnClass = (!empty($program) && $program->supporting_video) ? 'btn-success' : 'btn-danger'; @endphp
                                    <label for="presenter_banner" class="btn {{ $presenterBtnClass }} js-labelFile" data-toggle="tooltip" data-original-title="Album Image">
                                    <i class="feather icon-image"></i>
                                {!! Form::file('presenter_banner',['class' => 'form-control hide basicImage', 'data-label'=>'PresenterBannerImage', 'name'=>'presenter_banner', 'data-ext'=>"['jpg','jpeg','png']", 'data-image-id'=>'presenter_banner_image', 'id'=>'presenter_banner']) !!}
                                <span class="js-fileName">{{__('adminWords.choose_image')}}</span>
                                </label>
                                <input type="hidden" name="presenter_banner" id="presenter_banner_name" value="{{(!empty($albumData) ? $albumData->presenter_banner:'')}}">
                                <span class="presenterimage_title" id="PresenterBannerImage">{{(!empty($program) && $program->presenter_banner != '' ? $program->presenter_banner : __('adminWords.choose_image') )}}</span>
                                <small class="text-danger">{{ $errors->first('presenter_banner')}}</small>
                                <input type="hidden" name="presenter_banner" id="presenter_banner_image" />
                               {{-- <p class="note_tooltip">Note: {{ __('adminWords.recommended').' size - 500X500 px' }} </p> --}}
                            </div>

                            <div class="form-group{{$errors->has('supporting_video') ? 'has-error' : ''}}">
                                <label for="supporting_video" class="col-lg-12">Supporting Video (optional)</label>
                                @if(!empty($program) && $program->supporting_video)
                                    <div class="mb-2">
                                        <video controls style="width:100%;max-height:360px;" poster="{{ asset('images/programs/'.$program->image) }}">
                                            <source src="{{ asset('videos/programs/'.$program->supporting_video) }}" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                    </div>
                                @endif
                                @php $videoBtnClass = (!empty($program) && $program->supporting_video) ? 'btn-success' : 'btn-danger'; @endphp
                                <label for="supporting_video" class="btn {{ $videoBtnClass }} js-labelFile" data-toggle="tooltip" data-original-title="Supporting Video">
                                    <i class="feather icon-video"></i>
                                    <input type="file" name="supporting_video" id="supporting_video" accept="video/*" class="form-control hide" style="display:none;">
                                    <span class="js-fileName">Choose Video</span>
                                </label>
                                <span class="video_title" id="supportingVideoName">{{(!empty($program) && $program->supporting_video != '' ? $program->supporting_video : 'Choose Video' )}}</span>
                                <small class="text-muted d-block">Optional: Upload a supporting video to replace existing one.</small>
                                <small class="text-danger">{{ $errors->first('supporting_video') }}</small>
                            </div>



                            <label for="artist_name">Add new content to the Program</label>
                            <select class="song-search-ajax" name="new_songs[]" multiple></select>


                            <hr>
                            <div class="program_content">

                                <label for="artist_name"><strong style="color: black">Remove Content</strong></label>

                                {{-- search date --}}
                                <div class="form-group row">
                                    <div class="col-lg-6">
                                        <label for="start_date">Search Content By Date</label>
                                        <input type="date" class="form-control search-date" value="">
                                    </div>
                                </div>

                                <div class="containter-div" style="height: 500px;overflow-y:scroll">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th style="width: 60%">Content Title</th>
                                            <th>Date</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                                <div class="pagination"></div>
                            </div>
                            
                        </div>
                        <input type="hidden" name="id" id="id" value="{{ $program->id }}">
                        <div class="col-lg-8">
                                    <div class="form-group"> 
                                    <button type="submit" class="btn btn-primary"><i class="feather icon-check-circle"></i> {{!empty($program) ? __('adminWords.update') : __('adminWords.add') }}</button>  
                                        {{-- <button type="submit" class="btn btn-primary"><i class="feather icon-check-circle"></i> {{!empty($program) ? __('adminWords.update') : __('adminWords.add') }}</button>   --}}
                                    @if(empty($albumData))
                                        <button type="reset" class="btn btn-danger"><i class="feather icon-x-circle"></i> {{__('adminWords.reset')}}</button>
                                    @endif  
                            </div>
                            <div class="clear-both"></div>
                        </div>
                    </div>
                    <input type="hidden" name="deleted_songs" class="deleted_songs" value="[]">
                   </form>
                </div>
                 
            </div>
        </div>
    </div>
</div>
@endsection 
@section('script')
    <script src="{{ asset('assets/plugins/datepicker/datepicker.min.js') }}"></script> 
    <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script> 
    <script src="{{ asset('assets/plugins/datepicker/i18n/datepicker.en.js') }}"></script> 
    <script src="{{ asset('assets/plugins/switchery/switchery.min.js') }}"></script> 
    <script src="{{ asset('assets/js/mrcls-custom.js') }}"></script>  
    <script src="{{asset('assets/plugins/summernote/summernote-bs4.min.js')}}"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
    <script>

        let deletedSongs = [];
        let newSongs = [];


        $(document).ready(function(){
            $('#Dashboard-tab').trigger('click');
            $('.program_days').change(checkOverlap)

            $('.presenter-list').change(function(){
                console.log($(this).val());
                let presenterList = $(this).val();
                let presenterListHtml = '';
                if(presenterList != null){
                    presenterList.forEach(function(item){
                        presenterListText = $('.presenter-list option[value="'+item+'"]').text();
                        presenterListHtml += '<option value="'+item+'">'+presenterListText+'</option>';
                    });
                }
                $('.guest-list').html(presenterListHtml);
            });

            load_audio()

            $('.song-search-ajax').select2({
                ajax: {
                    url: '{{ route('search_audio') }}',
                    dataType: 'json',

                    data: function (params) {
                        var query = {
                            search: params.term
                        }
                        return query;
                    }
                }
                });

                $('.search-date').change(function(){
                    load_audio();
                });

            // Supporting video file change handler
            $('#supporting_video').on('change', function() {
                const fileName = $(this).val().split('\\').pop();
                if (fileName) {
                    $(this).siblings('.js-fileName').text(fileName);
                    $('#supportingVideoName').text(fileName);
                    $(this).parent('label').removeClass('btn-danger').addClass('btn-success');
                } else {
                    $(this).siblings('.js-fileName').text('Choose Video');
                    $('#supportingVideoName').text('Choose Video');
                }
            });

        });

        function load_audio(url=""){
            if(url == ""){
                url = '{{ url('program_content',"pid") }}';
                url = url.replace('pid',$('input[name=id]').val());
            }
            let date = $('.search-date').val();

            // if your has ? then add & else add ?
            if(url.indexOf('?') != -1){
                url += '&date='+date;
            }else{
                url += '?date='+date;
            }



            $.ajax({
                type:"GET",
                url:url,
                // respose json format
                dataType: "json",

                success:function(response){

                    // program_content.table tbody
                    let html = '';
                    response.data.forEach(function(item){

                        // if item.id not in deletedSongs then show it
                        if(deletedSongs.indexOf(item.id) != -1){
                            return;
                        }

                        html += '<tr>';
                        html += '<td>'+item.audio_title+'</td>';
                        html += '<td>'+ dayjs(item.created_at).format('DD-MM-YYYY hh:mm') +'</td>';
                        html += '<td><a  href="javascript:void(0)"  onclick="delete_audio('+item.id+',this)" >Delete</a></td>';
                        html += '</tr>';
                    });
                    $('.program_content table tbody').html(html);

                    // set paginatino at the bottom of tabe. data is in response.links
                    let pagination = '';
                    if(response.prev_page_url != null){
                        pagination += '<a href="javascript:void(0)" class="btn btn-primary" onclick="load_audio(\''+response.prev_page_url+'\')">Prev</a>';
                    }
                    if(response.next_page_url != null){
                        pagination += '<a href="javascript:void(0)" class="btn btn-primary" onclick="load_audio(\''+response.next_page_url+'\')">Next</a>';
                    }
                    $('.program_content .pagination').html(pagination);




                    console.log(response);
                },
                error:function(){
                    alert('error');
                }
            });
        }


        function delete_audio(id,el){
            if(confirm('Are you sure to delete this audio?')){
                deletedSongs.push(id);
                $('.deleted_songs').val(JSON.stringify(deletedSongs));

                $(el).parent().parent().remove();
                
            }
        }
        

        function checkOverlap(){
            let startTime = $('input[name=start_time]').val();
            let endTime = $('input[name=end_time]').val();
            let Id = $('input[name=id]').val();

            let days = [];
            $('.program_days').each(function(){
                if($(this).is(':checked')){
                    days.push($(this).val());
                }
            })

            if(startTime != "" && endTime != ""){
                $.ajax({
                    type:"POST",
                    url:"{{ route('check_overlap') }}",
                    data:{
                        startTime:startTime,
                        endTime:endTime,
                        Id:Id,
                        days:days,
                        _token:'{{csrf_token()}}',
                    },
                    success:function(response){
                        var data = JSON.parse(response);
                        console.log(data[0].message);

                        if(data[0].status == "true"){
                             $('.TimeMsg').removeClass('text-danger');
                             $('.TimeMsg').addClass('text-info');
                            //  $('.submitbtn').attr('disabled', false);
                        }else{
                            $('.TimeMsg').removeClass('text-info');
                            $('.TimeMsg').addClass('text-danger');
                            // $('.submitbtn').attr('disabled', true);
                        }
                        $('.TimeMsg').html(data[0].message);
                    },
                    error:function(){
                        alert('error');
                    }
                });
            }
        }
    </script>
@endsection