@extends('layouts.admin.main')
@section('title', __('adminWords.audio_genres'))
@section('style')
    <link href="{{ asset('assets/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/plugins/switchery/switchery.min.css') }}" rel="stylesheet" type="text/css">
    <style>
        .btn-group .btn{
            border: 1px solid #fff;
            border-radius: 3px;
        }
        .dt-buttons{
            display: none !important;
        }
    </style>
@endsection
@section('rightbar-content')
           
<div class="breadcrumbbar">
	<div class="row align-items-center">
		<div class="col-md-3 col-lg-3">
			<h4 class="page-title">{{ __('adminWords.audio_genres') }}</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="#">{{ __('adminWords.audio_genres') }}</a></li>
				</ol>
			</div>
		</div>
        <div class="col-md-1 col-lg-1">

		</div>
		<div class="col-md-3 col-lg-3">
                <input type="text" name="search" id="search" class="form-control" placeholder="Search Audio Genre">
        </div>

		<div class="col-md-5 col-lg-5">
			<div class="widgetbar">
                <div class="btn-group">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Export
                    </button>
                    <div class="dropdown-menu">
                        <button class="dropdown-item copy" href="#">Copy</i></button>
                        <button class="dropdown-item csv" href="#">CSV</button>
                        <button class="dropdown-item excel" href="#">Excel</button>
                        <button class="dropdown-item pdf" href="#">PDF</button>
                    </div>
                </div>
				<button class="btn btn-danger audioGenrePopup" data-add="1" data-url="{{route('genres','create')}}"><i class="feather icon-plus mr-2"></i>{{ __('adminWords.create').' '.__('adminWords.audio_genres') }}</button>
				<button type="button" class="btn btn-danger" id="bulkDelete" data-msg="{{ __('adminWords.atleast').' '.__('adminWords.audio').' '.__('adminWords.must_selected') }} " data-url="{{route('bulkDeleteAudioGenre')}}"><i class="feather icon-trash"></i> {{ __('adminWords.delete_selected') }}</button>  
			</div>                        
		</div>
	</div>          
</div>

<div class="contentbar">  
	<div class="row">
		<div class="col-lg-12"> 
			<div class="card m-b-30">
				<div class="card-body">
					<div class="table-responsive">
						<form method="post" id="audioGenreForm">
							<table data-method="post" id="audio_genreTable" class="table table-borderless" >
								<thead>
									<tr> 
										<th class="select-checkbox"> 
											<div class="inline custom-checkbox">
												<input id="checkboxAll" type="checkbox" class="custom-control-input selectAllUser" onchange="checkAll(this, 'CheckBoxes')">
												<label for="checkboxAll" class="custom-control-label"></label>
											</div>
										</th>
										<th>{{ __('adminWords.image') }}</th>
										<th>{{ __('adminWords.genre_name') }}</th>
										<th>{{ __('adminWords.created_at') }}</th>
										<th>{{ __('adminWords.status') }}</th>
										<th>{{ __('adminWords.action') }}</th>
									</tr>
								</thead>
                                <tbody>
                                    @if(!empty($audio_genres))
                                    @foreach($audio_genres as $audio_genre)

                                       @php 
                                        if($audio_genre->image != '' && file_exists(public_path('/images/audio/audio_genre/'.$audio_genre->image))){
                                            $src = asset('/images/audio/audio_genre/'.$audio_genre->image);
                                        }else{
                                            $src = asset('images/sites/500x500.png');
                                        }
                                       @endphp
                                      <tr>
                                          <td><div class="inline custom-checkbox"><input name="checked" id="checkboxAll{{ $audio_genre->id }}" type="checkbox" class="custom-control-input CheckBoxes" value="{{ $audio_genre->id }}"><label for="checkboxAll{{ $audio_genre->id }}" class="custom-control-label"></label></div></td>
                                          <td><img src="{{ $src }}" alt="" class="img-fluid" width="60px" height="60px"></td>
                                          <td>{{ $audio_genre->genre_name  }}</td>
                                          <td>{{ Illuminate\Support\Carbon::parse($audio_genre->created_at)->diffForHumans(Illuminate\Support\Carbon::now()) }}</td>
                                          <td><div class="custom-switch"><input id="switch{{ $audio_genre->id }}" name="status" class="custom-control-input changeStatus"  {{ ($audio_genre->status == 1 ? 'checked':'') }} type="checkbox" data-url="{{ url('updateAudioGenre/'.$audio_genre->id) }}"><label class="custom-control-label" for="switch{{ $audio_genre->id }}"></label></div></td>
                                          <td><div class="button-list"><a class="btn btn-sm btn-success-rgba audioGenrePopup" data-url="{{ url('getAudioGenreData/'.$audio_genre->id) }}" data-save="{{ url('audio_genres/'.$audio_genre->id) }}"><i class="feather icon-edit-2"></i></a><button type="button" data-url="{{ url('destroyAudioGenre/'.$audio_genre->id) }}" class="btn btn-sm btn-danger-rgba" id="deleteUser"><i class="feather icon-trash"></i></button></div></td>
                                      </tr>
                                    @endforeach
                                    @endif
                                </tbody>
							</table>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="addUpdateAudioGenre">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title"></h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
		<form method="post" id="addUpdateGenreForm" action="{{route('genres','create')}}" enctype="multipart/form-data" data-reset="1" data-modal='1' table-reload="mrclsDtToShowData">
			{{csrf_field()}}
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="form-group">
                            <label for="genreName">{{ __('adminWords.genre_name') }}<sup>*</sup></label>
                            <input type="text" placeholder="{{ __('adminWords.enter').' '.__('adminWords.genre_name') }}" id="genreName" name="genre_name" class="form-control require" />
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12">
                        {!! Form::label('image', __('adminWords.genre').' '.__('adminWords.image'), ['class'=>'col-lg-12']) !!}
                        <label for="image" class="btn btn-danger js-labelFile" data-toggle="tooltip" data-original-title="{{__('adminWords.radio').' '.__('adminWords.image')}}">
                        <i class="icon fa fa-check"></i>
                        {!! Form::file('image',['class' => 'form-control hide basicImage', 'data-label'=>'genreImage', 'name'=>'image', 'data-ext'=>"['jpg','jpeg','png']", 'data-image-id'=>'radio_image', 'data-image'=>__('adminWords.image_error')]) !!}
                        <span class="js-fileName">{{ __('adminWords.choose_image') }}</span>
                        </label>
                        <input type="hidden" name="image" id="image_name" value="{{(!empty($radioData) ? $radioData->image:'')}}">
                        <span class="image_title" id="genreImage">{{(!empty($radioData) && $radioData->image != '' ? $radioData->image : __('adminWords.choose_image') )}}</span>
                        <small class="text-danger">{{ $errors->first('image')}}</small>
                        <input type="hidden" id="genre_image" />
                        <p class="note_tooltip">Note: {{ __('adminWords.recommended').' size - 500X500 px' }} </p>
                    </div>
                    
                    <!-- <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="form-group {{$errors->has('image') ? 'has-error' : ''}}">
                            <label for="image" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">{{ __('adminWords.genre').' '.__('adminWords.image') }}<sup>*</sup></label>
                            <label for="image" class="btn btn-danger js-labelFile" data-toggle="tooltip" data-original-title="{{ __('adminWords.genre').' '.__('adminWords.image') }}">
                            <i class="icon fa fa-check"></i>
                            {!! Form::file('image',['class' => 'form-control hide basicImage', 'data-label'=>'genreImage', 'name'=>'image',  'data-ext'=>"['jpg','jpeg','png']", 'data-image-id'=>'genre_image', 'data-image'=>__('adminWords.image_error')]) !!}
                            <span class="js-fileName">{{ __('adminWords.choose_image') }}</span>
                            </label>
                            <input type="hidden" id="image_name" name="image" value="">

                            <span class="image_title" id="genreImage">{{ __('adminWords.choose_image') }}</span>
                            <small class="text-danger">{{ $errors->first('image') }}</small>
                            <input type="hidden" name="image" id="genre_image" />
                            <p class="note_tooltip">Note: {{ __('adminWords.recommended').' size : 500X500 px' }} </p>
                        </div>
                    </div> -->

                    <!-- <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="row">
                            <div class="col-lg-3">
                                {!! Form::label('fetaured_switch', __('adminWords.featured') ) !!}
                            </div>
                            <div class="col-lg-2">
                                <input id="fetaured_switch" name="is_featured" class="js-switch-primary" type="checkbox" checked>
                            </div>
                        </div>                        
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="row">
                            <div class="col-lg-3">
                                {!! Form::label('trending_switch', __('adminWords.trending') ) !!}
                            </div>
                            <div class="col-lg-2">
                                <input id="trending_switch" name="is_trending" class="js-switch-primary" type="checkbox" checked>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="row">
                            <div class="col-lg-3">
                                {!! Form::label('recommended_switch', __('adminWords.recommended') ) !!}
                            </div>
                            <div class="col-lg-2">
                                <input id="recommended_switch" name="is_recommended" class="js-switch-primary" type="checkbox" checked>
                            </div>
                        </div>
                    </div> -->
                    <div class="col-lg-12 col-md-12 col-sm-12 d-none">
                        <div class="row">
                            <div class="col-lg-3">
                                {!! Form::label('status_switch', __('adminWords.status') ) !!}
                            </div>
                            <div class="col-lg-2">
                                <input id="status_switch" name="status" class="js-switch-primary" type="checkbox" checked>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ __('adminWords.close') }}</button>
                <button type="button" class="btn btn-primary" id="saveAlbum" data-action="submitThisForm">{{ __('adminWords.add') }}</button>
            </div>
        </form>
        </div>
    </div>
</div>

@endsection
@section('script')
    <script src="{{ asset('assets/plugins/switchery/switchery.min.js') }}"></script> 
    <script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/dataTables.buttons.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/datatables/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/vfs_fonts.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/buttons.print.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/datatables/responsive.bootstrap4.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>      
	<script src="{{ asset('assets/plugins/datepicker/datepicker.min.js') }}"></script> 
	<script src="{{ asset('assets/plugins/datepicker/i18n/datepicker.en.js') }}"></script> 
    <script src="{{ asset('assets/js/mrcls-custom.js') }}"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>


    <script>
        $(document).ready(function(){
            
            var audio_genreTable =  $('#audio_genreTable').DataTable({
                "lengthChange": false,
                "searching":false,
                dom: 'Bfrtip', 
                // buttons: [ 'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5' ] 
                buttons: [
                    {
                        extend: 'copyHtml5',
                    },
                    {
                        extend:'csvHtml5',
                        title: 'Disrupt_audioGenre_'+ new Date().toLocaleDateString()                        
                    },
                    {
                        extend: 'excelHtml5',
                        title: 'Disrupt_audioGenre_'+ new Date().toLocaleDateString()                        
                    },
                    {
                        extend: 'pdfHtml5',
                        title: 'Disrupt_audioGenre_'+ new Date().toLocaleDateString()                        
                    }
                ]
            });


             //custom search filter
             $('#search').keyup(function(){
                 let keyword = $(this).val();   
                 
                    $.ajax({
                        type:"POST",
                        url:"{{ route('audiogenreAjaxSearch') }}",
                        data:{
                            keyword : keyword,
                            _token:"{{ csrf_token() }}",
                        },

                        success:function(response){

                            var audioData = JSON.parse(response);

                            //Remove old table data
                            var audio_genreTable = $('#audio_genreTable').DataTable();
                            audio_genreTable.clear().draw();

                            //Append New response based on search keyword
                            audioData.forEach(function(item){

								var id = item.id; 
                                var editUrl = "{{ url('getAudioGenreData') }}"+'/' + id;
								var dataUrl = "{{ url('updateAudioGenre') }}"+'/' + id;
                                var dataSaveUrl = "{{ url('audio_genres') }}"+'/' + id;
								var deleteUrl = "{{ url('destroyAudioGenre') }}" + '/' + id;

                                if(item.image != null){
									var imgpath = "{{ asset('images/audio/audio_genre')  }}"+'/'+item.image; 
								}else{
									var imgpath = "{{ asset('images/sites/500x500.png')  }}";
								}
                      
                                audio_genreTable.row.add([

                                        '<div class="inline custom-checkbox"><input name="checked" id="checkboxAll'+id+'" type="checkbox" class="custom-control-input CheckBoxes" value="'+id+'"><label for="checkboxAll'+id+'" class="custom-control-label"></label></div>',
										'<img src="'+imgpath+'" alt="" class="img-fluid" width="60px" height="60px">',
										item.genre_name,
                                        moment(item.created_at).fromNow(),
                                        '<div class="custom-switch"><input id="switch'+id+'" name="status" class="custom-control-input changeStatus" type="checkbox" data-url="'+dataUrl+'"><label class="custom-control-label" for="switch'+id+'"></label></div>',
                                        '<div class="button-list"><a class="btn btn-sm btn-success-rgba audioGenrePopup" data-url="'+editUrl+'" data-save="'+dataSaveUrl+'"><i class="feather icon-edit-2"></i></a><button type="button" data-url="'+deleteUrl+'" class="btn btn-sm btn-danger-rgba" id="deleteUser"><i class="feather icon-trash"></i></button></div>',
                                     ]).draw(false);

								if(item.status == 1){
									$('#switch'+id).attr('checked', 'checked');
								}

                            });
                        }
                    });
                 
            });
        });

        $('.csv').click(function(){
             $('.buttons-csv').trigger('click');
         });

         $('.copy').click(function(){
             $('.buttons-copy').trigger('click');
         });

         $('.excel').click(function(){
             $('.buttons-excel').trigger('click');
         });

         $('.pdf').click(function(){
             $('.buttons-pdf').trigger('click');
         });
    </script>
@endsection