@extends('admin.layouts.container')

@section('content')
<div class="side-title">
    <h3>{{ $head ?? ''}}</h3>
</div>
{{--@php  echo '<pre>'; print_r($training_course_audios->toArray()); echo '</pre>'; @endphp--}}

<div class="border-item">
    <form class="form-row" method="post" action="{{ $action }}" enctype="multipart/form-data">
        @if($news ?? ''  && $news->id)
        @method('PUT')
        @endif
        @csrf
        <div class="col-12">
    <div class="row" style="display: flex; background-color:rgba(21,97,203,.1); height:auto">
        <div class="col-lg-12">
            <h3>{{ __('news.news_advantages') }}</h3>
            <div class="col-lg-12" style="height:100%;" id="audios">
                @if(isset($training_course_audios))
                    @foreach($training_course_audios as $key => $value)
                        <input type="hidden" value="{{ $value->id }}" name="audio[{{$key}}][id]">
                        
                        <div class="row features-list-item" style="background-color:rgba(21,97,203,.1); height:auto; margin-bottom: 20px;">
                            <div class="form-group col-lg-4">
                                <label>{{ __('news.file_name') }}</label>
                                <input id="show_audio_id{{$key}}" class="form-control" name="audio[{{$key}}][file_name]" value="{{ $value->file_name }}" type="text" />
                            </div>

                            <div class="form-group col-lg-4">
                                <label>{{ __('news.file_name_en') }}</label>
                                <input id="show_audio_id{{$key}}" class="form-control" name="audio[{{$key}}][file_name_en]" value="{{ $value->file_name_en }}" type="text" />
                            </div>

                            <div class="form-group col-lg-2">
                                <label>{{ __('news.priority') }}</label>
                                <input id="show_audio_id{{$key}}" class="form-control" name="audio[{{$key}}][priority]" value="{{ $value->priority }}" type="text" />
                            </div>
                             <div class="form-group col-lg-2" style="font-size:30px; margin-top:35px;">
                            <i class="fas fa-times-circle" onclick="remove_audio(this, {{ $value->id }})" 
                             data-url="{{ route('news.destroyAudio', ['news' => $news->id, 'id' => $value->id]) }}" 
                               style="cursor:pointer;"></i>
                                </div>
                            <!-- Description Fields -->
                            <div class="form-group col-lg-6">
                                <label>{{ __('news.file_description') }}</label>
                                <input id="show_audio_id{{$key}}" class="form-control" name="audio[{{$key}}][file_description]" value="{{ $value->file_description }}" type="text" />
                            </div>

                            <div class="form-group col-lg-6">
                                <label>{{ __('news.file_description_en') }}</label>
                                <input id="show_audio_id{{$key}}" class="form-control" name="audio[{{$key}}][file_description_en]" value="{{ $value->file_description_en }}" type="text" />
                            </div>

                            
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
        
        <!-- Add new audio button -->
        <div class="col-lg-12">
            <a style="cursor: pointer;" onclick="addAudioItem(this)" class="btn_1 gray">
                <i class="fa fa-fw fa-plus-circle"></i>{{ __("news.new") }}
            </a>
        </div>
    </div>
</div>


            <div class="text-center mt-5 col-12">
                <button class="butn"><span>{{ __('dashboard.save') }}</span></button>
            </div>
    </form>
</div>

@endsection

@section('inner_js')
<!-- Editor JS files -->
{{--<script src="{{ asset('/vendor/laravel-filemanager/js/stand-alone-button.js') }} "></script>--}}
<script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>
<!--<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>-->
<script>
let route_prefix = "{{ url(config('lfm.prefix')) }}",
        url = "{{url('/')}}/",
        currentLanguage = "{{getCurrentLocale()}}",
        imagePath = "{{asset('')}}";
</script>
<script src="{{ asset('assets/admin/js/editor.js') }}"></script>
<script src="{{ asset('assets/admin/js/lfm.js') }}"></script>
<script>
   
/*add new feature*/

let index = {{ isset($training_course_attachments) ? count($training_course_attachments) : 0 }};

    let audio_index = {{ isset($training_course_audios) ? count($training_course_audios) + 1 : 1 }};


    
function addAudioItem(elm) {
    // Create input fields for name in Arabic and English
    var new_in = '<div id="file_name_'+audio_index+'" class="form-group col-lg-4"> <label> {{ __('news.file_name') }}  </label> <input name="audio['+audio_index+'][file_name]" class="form-control" value="" type="text" /> </div>';
    var new_in_en = '<div id="file_name_en_'+audio_index+'" class="form-group col-lg-4"> <label>{{ __('news.file_name_en') }}  </label> <input name="audio['+audio_index+'][file_name_en]" class="form-control" value="" type="text" /> </div>';

    // Create input fields for description and description_en
    var description = '<div id="file_description_'+audio_index+'" class="form-group col-lg-6"> <label>{{ __('news.file_description') }}   </label> <textarea name="audio['+audio_index+'][file_description]" class="form-control" rows="3"></textarea> </div>';
    var description_en = '<div id="file_description_en_'+audio_index+'" class="form-group col-lg-6"> <label>{{ __('news.file_description_en') }}  </label> <textarea name="audio['+audio_index+'][file_description_en]" class="form-control" rows="3"></textarea> </div>';

    // Create input field for priority
    var priority = '<div class="form-group col-lg-2"> <label>{{ __('news.priority') }}</label><input id="show_audio_id'+audio_index+'" class="form-control" name="audio['+ audio_index +'][priority]" type="text" /> </div>';

    // Combine all fields into one row
    var data = '<div id="audio_item_' + audio_index + '" class="audio-item-container" style="margin-bottom: 20px;">' +
    '<div class="row align-items-end" style="display: flex; align-items: flex-end;background-color:rgba(21,97,203,.1);height:auto">'
     + new_in + new_in_en + priority+ 
      '<div class="form-group col-lg-2" style="font-size:30px;margin-top:35px"><i class="fas fa-times-circle" onclick="remove_audio(this)"></i></div>'
      + description + description_en +'</div>' ;
    
    // Increment the audio index for future additions
    $('#audios').append(data);
        $('#audio_id'+audio_index).val(audio_index + 1);
        $('#show_audio_id'+audio_index).val(audio_index + 1);
        audio_index ++
}

function remove_audio(elem, audio_val_index) {
        let url = $(elem).data('url');
        // alert(url); 

        if (audio_val_index){
            axios.delete(url).then(
                audio_index--
            )
        }
        $(elem).closest('.row').remove();
    }

</script>

@endsection