@extends('backend.index')
@section('content')
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('backend.dashboard') }}">Control Panel</a>
        </li>
        <li class="breadcrumb-item active"><a href="{{ route('backend.podcasts') }}">Podcasts</a></li>
        <li class="breadcrumb-item active">{{ $podcast->title }}</li>
        <li class="breadcrumb-item active">{{ $episode->title }}</li>
    </ol>
    @if(isset($podcast))
        <div class="row col-lg-12 media-info mb-3 podcast">
            <div class="media">
                <img class="mr-3" src="{{ $podcast->artwork_url }}">
                <div class="media-body">
                    <h5 class="mt-0">{{ $podcast->title }}</h5>
                    <p>{{ $podcast->description }}</p>
                </div>
            </div>
        </div>
    @endif
    <div class="card-header p-0 position-relative">
            <ul class="nav">
                            <li class="nav-item"><a class="nav-link active" href="#overview" data-toggle="pill"><i class="fas fa-fw fa-newspaper"></i>Form</a></li>
                            <li class="nav-item"><a href="#textspeech" class="nav-link" data-toggle="pill">Text to speech</a></li>
            </ul>
    </div>
    <div class="card-body">
      <div class="tab-content mt-2" id="myTabContent">

      <div id="overview" class="tab-pane fade show active">   
    <div class="row">
        <div class="col-lg-12">
            <div class="template-upload upload-info card">
                <form class="upload-edit-song-form m-0" method="POST" action="{{ route('backend.ajax.podcast.episode.edit')  }}" enctype="multipart/form-data">
                    @csrf
                    <div class="upload-info-content">
                        <div class="error hide">
                        </div>
                        <div class="upload-info-block">
                            <div class="song-info-container full">
                                <div class="control field">
                                    <label for="title">
                                        <span data-translate-text="FORM_TITLE">{{ __('web.FORM_EPISODE_TITLE') }}</span>
                                    </label>
                                    <input class="form-control" name="title" type="text" autocomplete="off" value="{{ $episode->title }}" required>
                                </div>
                                <div class="control field">
                                    <label for="copyright">
                                        <span data-translate-text="FORM_DESCRIPTION">{{ __('web.FORM_EPISODE_DESCRIPTION') }}</span>
                                    </label>
                                    <textarea class="form-control" name="description" cols="30" rows="5">{{ $episode->description }}</textarea>
                                </div>
                                <div class="control field">
                                    <label for="season">
                                        <span>Season</span>
                                    </label>
                                    <input class="form-control" name="season" type="text" placeholder="{{ __('web.EPISODE_SEASON_NUMBER_TIP') }}" autocomplete="off">
                                </div>
                                <div class="control field">
                                    <label for="number">
                                        <span data-translate-text="EPISODE_NUMBER_FORM">{{ __('web.EPISODE_NUMBER_FORM') }}</span>
                                    </label>
                                    <input class="form-control" name="number" type="text" placeholder="{{ __('web.EPISODE_NUMBER_TIP') }}" autocomplete="off">
                                </div>
                                <div class="control field">
                                    <label for="type">
                                        <span data-translate-text="FORM_TYPE">{{ __('web.FORM_TYPE') }}</span>
                                    </label>
                                    {!! makeDropDown(array(
                                        1 => __('web.EPISODE_TYPE_FULL'),
                                        2 => __('web.EPISODE_TYPE_TRAILER'),
                                        3 => __('web.EPISODE_TYPE_BONUS'),
                                    ), 'type', null, true) !!}
                                </div>
                                <div class="control field">
                                    <label for="created_at">
                                        <span data-translate-text="FORM_SCHEDULE_PUBLISH">{{ __('web.FORM_SCHEDULE_PUBLISH') }}</span>
                                    </label>
                                    <input class="form-control datepicker" name="created_at" type="text" placeholder="{{ __('web.IMMEDIATELY') }}" autocomplete="off">
                                </div>
                                <div class="control field row mb-0">
                                    <div class="col-6">
                                        <div class="form-check">
                                            <input name="visibility" type="checkbox" class="form-check-input" id="checkbox1{%=btoa(file.name).replace(/=/g, '')%}" checked>
                                            <label class="form-check-label" for="checkbox1{%=btoa(file.name).replace(/=/g, '')%}">{{ __('web.MAKE_PUBLIC') }}</label>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-check">
                                            <input name="allow_comments" type="checkbox" class="form-check-input" id="checkbox2{%=btoa(file.name).replace(/=/g, '')%}" checked>
                                            <label class="form-check-label" for="checkbox2{%=btoa(file.name).replace(/=/g, '')%}">{{ __('web.ALLOW_COMMENTS') }}</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="control field row mb-0">
                                    <div class="col-6">
                                        <div class="form-check">
                                            <input name="allow_download" type="checkbox" class="form-check-input" id="checkbox3{%=btoa(file.name).replace(/=/g, '')%}" checked>
                                            <label class="form-check-label" for="checkbox3{%=btoa(file.name).replace(/=/g, '')%}">{{ __('web.ALLOW_DOWNLOAD') }}</label>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-check">
                                            <input name="explicit" type="checkbox" class="form-check-input" id="checkbox4{%=btoa(file.name).replace(/=/g, '')%}">
                                            <label class="form-check-label" for="checkbox4{%=btoa(file.name).replace(/=/g, '')%}">{{ __('web.PODCAST_EXPLICIT') }}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="upload-info-footer">
                            <input name="id" type="hidden" value="{{ $episode->id }}">
                            <button class="btn btn-primary save" type="submit" data-translate-text="SAVE">{{ __('SAVE') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="textspeech" class="tab-pane fade">
            <div class="text_fieds">
            <form action="" class="speechform" id="speechfrm" enctype="multipart/form-data">
                    <textarea class="sppeech_text" name="textspeech" id="text_speech"></textarea>

            <div class="speech_button">
                <button type="button" onclick="enableMute()" class="btn microphone_btn" id="getValsilence">Silence</button>

                <button type="button" class="btn microphone_btn" id="getValvolume">Volume</button>
                <input type="range" class="vol_range "id="rngVolume" min="0" max="1" step=".01" value=".5"/>  

                <button type="button" class="btn microphone_btn" id="getValspeechrate">Speech Rate</button>
                <!--input class="Speech_box" type="range" min="22000" max="23000" id="Speechrate" /-->
                <div class="speechrte">
                <div id="rate-value" class="badge badge-primary" >5</div>
                <input class="custom-range" type="range" id="Speechrate" max="1"
                        min="0.2" value="0.5" step="0.1">
                </div>
                <!--input type="range" list="tickmarks">
                <datalist id="tickmarks">
                    <option value="0" label="0%"></option>
                    <option value="25"></option>
                    <option value="50" label="50%"></option>
                    <option value="75"></option>
                    <option value="100" label="100%"></option>
                </datalist-->

                <button type="button" class="btn microphone_btn" id="getValpitch">Pitch</button>
                <input class="pict_box" type="range" min="0" max="2" step="0.1" id="pitch" />

                <button type="button" class="btn microphone_btn" id="getValBtnID">Play</button>
                <!--input id="submit" type="button" value="Submit"-->
            </div>
            </form>

            <audio id="spechid"  autoplay></audio>
       </div>
</div>
</div>
</div>

@endsection