@include('backend.layouts.alert')
<div class="row">
    <div class="col-lg-7">
        @include('backend.layouts.validation')
        <div class="form-group row">
            <x-forms.label name="File" class="col-md-3 col-form-label" />
            <div class="col-md-9">
                <div class="input-group">
                    {!! Form::hidden('fmdir', 'filemanager', ['id' => 'fmDir']) !!}
                    {!! Form::hidden('file_path', null, ['id' => 'file_path']) !!}
                    {!! Form::text('url', null, [
                        'data-file' => 'file',
                        'class' => 'form-control' . addErrorClass($errors->has('url')),
                        'id' => 'file_url',
                        'placeholder' => 'Upload file or audio url',
                    ]) !!}
                    <div class="input-group-append">
                        <button type="button" value="file" id="largeFileUploader"
                            data-href="{{ route('admin.uploader') }}" class="btn btn-danger"><i
                                class="fas fa-upload"></i></button>

                    </div>

                    @error('url')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                <div class="mt-1 copy-file-display">{!! Form::checkbox('copyfile', true, $copyfile ?? null, [
                    'data-toggle' => 'toggle',
                    'data-onstyle' => 'warning',
                    'data-size' => 'xs',
                    'id' => 'copy_file_server',
                ]) !!} <small>Copy file to
                        server</small>
                </div>

                <div id="progress" style="display: none">
                    <hr>
                    <div style="height: 25px;" class="progress mb-3">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                            aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%; height: 100%">
                            75%
                        </div>
                    </div>
                    <p class="text-center mb-0 progressStatus"></p>
                </div>

            </div>
        </div>

        <div class="form-group row">
            <x-forms.label name="FileName" class="col-md-3 col-form-label" />
            <div class="col-md-9">
                <x-forms.text name="file_name" :attrs="['required' => true, 'id' => 'file_name']" />
            </div>
        </div>

        <div class="form-group row">
            <x-forms.label name="Album" class="col-md-3 col-form-label" />
            <div class="col-md-9">
                <x-forms.select name="album_id" :value="$aid" :list="[$albumList]" :attrs="[
                    'required' => 'true',
                    'data-value' => $aid,
                    'id' => 'select2albumlist',
                    'placeholder' => 'Select Album',
                    'data-url' => route('admin.albumlist.ajax'),
                ]" />
                @error('album_id')
                    <span class="invalid-feedback d-block" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>

        <div class="form-group row">
            <x-forms.label name="Thumb" class="col-md-3 col-form-label" />
            <div class="col-md-9">
                <div class="input-group">
                    {!! Form::hidden('thumb_edit', null, ['id' => 'thumb_edit']) !!}
                    {!! Form::file('thumb', ['style' => 'display:none', 'id' => 'thumb', 'accept' => 'image/*']) !!}
                    {!! Form::text('thumb_url', null, [
                        'class' => 'form-control',
                        'data-file' => 'thumb',
                        'id' => 'thumb_url',
                        'placeholder' => trans('Please enter url or upload button'),
                    ]) !!}
                    <div class="input-group-append">
                        <button type="button" value="thumb" id="uploadImage" class="btn btn-primary"><i
                                class="fas fa-upload"></i></button>
                        <button type="button" value="thumb" id="editImage" class="btn btn-primary"><i
                                class="fas fa-edit"></i></button>
                    </div>
                </div>
                @error('thumb_url')
                    <span class="invalid-feedback d-block" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror

                @error('thumb_edit')
                    <span class="invalid-feedback d-block" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror

                @error('thumb')
                    <span class="invalid-feedback d-block" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror

            </div>
        </div>


        <div class="form-group row">
            <x-forms.label name="Artists" class="col-md-3 col-form-label" />
            <div class="col-md-9">
                {!! Form::select('artists[]', $artists ?? [], $artistsValues ?? null, [
                    'class' => 'form-control myartistInput' . addErrorClass($errors->has('artists')),
                    'multiple' => 'multiple',
                    'data-href' => route('admin.artists.ajax'),
                ]) !!}
                @error('artists')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>

        <div class="form-group row">
            <x-forms.label name="Playlists" class="col-md-3 col-form-label" />
            <div class="col-md-9">
                {!! Form::select('playlists[]', $playlists ?? [], array_keys($playlists ?? []), [
                    'class' => 'form-control multiplaylists' . addErrorClass($errors->has('playlists')),
                    'data-url' => route('admin.playlist.ajax'),
                    'multiple' => 'multiple',
                ]) !!}
                @error('playlists')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>

        <div class="form-group row">
            <x-forms.label name="Tags" class="col-md-3 col-form-label" />
            <div class="col-md-9">
                {!! Form::select('tags[]', $tags ?? [], $tagsValues ?? null, [
                    'class' => 'form-control mytagsinput' . addErrorClass($errors->has('tags')),
                    'multiple' => 'multiple',
                    'data-href' => route('admin.taglistAjax'),
                ]) !!}
                @error('tags')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>


        <div class="form-group row">
            <x-forms.label name="Description" class="col-md-3 col-form-label" />
            <div class="col-md-9">
                {!! Form::textarea('description', null, [
                    'class' => 'form-control htmleditor' . addErrorClass($errors->has('description')),
                    'rows' => 3,
                    'id' => 'description',
                ]) !!}
                @error('description')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>



    </div>
    <div class="col-lg-5">
        {{-- Other --}}

        <div class="form-group row">
            <x-forms.label name="Title" class="col-md-3 col-form-label" />
            <div class="col-md-9">
                <x-forms.text name="meta_title" />
            </div>
        </div>

        <div class="form-group row">
            <x-forms.label name="Meta Description" class="col-md-3 col-form-label" />
            <div class="col-md-9">
                {!! Form::textarea('meta_description', null, [
                    'class' => 'form-control' . addErrorClass($errors->has('meta_description')),
                    'rows' => 2,
                ]) !!}
                @error('meta_description')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
            </div>
        </div>


        <div class="form-group row">
            <x-forms.label name="Voice Track Mix" class="col-md-3 col-form-label" />
            <div class="col-md-9">

                <select name="voice_track" id="voice_track" class="form-control">

                    @foreach ([
        'off' => 'OFF',
        'first' => 'Start',
        'center' => 'Middle',
        'last' => 'END',
        'custom' => 'Custom',
    ] as $key => $label)
                        <option value="{{ $key }}"{{ $voice_track == $key ? ' selected' : '' }}>
                            {{ $label }}</option>
                    @endforeach

                </select>

                <div id="voice_track_display"
                    style="{{ $voice_track_custom_duration || old('voice_track') == 'custom' ? 'display:block' : 'display:none' }}"
                    class="mt-1">
                    <input type="text" name="voice_track_custom_duration"
                        value="{{ $voice_track_custom_duration ?: '00.05' }}" style="width:80px" class="form-control">
                    @error('voice_track_custom_duration')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
            </div>
        </div>


        <div class="form-group row">
            <x-forms.label name="Featured" class="col-md-3 col-form-label" />
            <div class="col-md-6">
                {!! Form::checkbox('featured', true, null, [
                    'data-on' => 'YES',
                    'data-off' => 'NO',
                    'data-toggle' => 'toggle',
                    'data-onstyle' => 'warning',
                ]) !!}
            </div>
        </div>

        <div class="form-group row">
            <x-forms.label name="DJ Remix" class="col-md-3 col-form-label" />
            <div class="col-md-6">
                {!! Form::checkbox('dj_remix', true, isset($music) ? $music->getCustomField('dj_remix') == true : false, [
                    'data-on' => 'YES',
                    'data-off' => 'NO',
                    'data-toggle' => 'toggle',
                    'data-onstyle' => 'warning',
                ]) !!}
            </div>
        </div>

        <div class="form-group row">
            <x-forms.label name="Status" class="col-md-3 col-form-label" />
            <div class="col-md-6">
                <x-forms.select name="status" :list="App\Models\Music::getStatuseToArray()" class="col-md-3 col-form-label" />
            </div>
        </div>
    </div>
</div>
<div class="row justify-content-end">
    {!! Form::button('<i class="fas fa-check"></i> ' . __('Submit'), [
        'type' => 'submit',
        'class' => 'btn btn-primary',
    ]) !!}
</div>

@push('scripts')
    <script>
        window.uploads = {
            maxFiles: 1,
            chunkSize: {{ (setting('uploads_chunksize', 2) ?: 2) * 1024 * 1024 }}
        }

        $(function() {
            console.log("Javascript is ready now");
            $(document).on("change", "#voice_track", function() {
                let value = $(this).val();
                console.log(value); // Typo corrected here
                if (value == "custom") {
                    $("#voice_track_display").css("display", "block");
                } else {
                    $("#voice_track_display").css("display", "none");
                }
            });
        });
    </script>
@endpush