@section('title', __('radio.app_exclusive_title'))
@section('head')
    <style>
        .list-item { margin: 10px 0; padding: 10px 0; } .accordion-body .list-item:not(.withoutborder){ border-bottom: 1px solid #888888; } .list-item:last-child { border: 0; margin-bottom: 0; } .list-item .conteiner { display: flex; flex-direction: row; } .list-item .conteiner .checkbutton-slider { margin-left: auto; } .list-item.disabled h4 { opacity: 0.4; } .list-item.disabled p.gray-text { opacity: 0.4; } .list-item .checkbutton-slider { float: right; width: 52px; height: 26px; flex: 0 0 52px; border: 1px solid #dddddd; border-radius: 13px; padding: 2px; cursor: pointer; } .list-item .checkbutton-slider .checkbutton-slider-button { width: 20px; height: 20px; border-radius: 10px; background-color: #dddddd; transition: all 0.25s linear 0s; } .list-item .checkbutton-slider.active .checkbutton-slider-button { margin-left: 26px; background-color: #239e76; } .list-item .checkbutton-slider input[type=checkbox] { display: none; } .color-title { color: #444444; font-size: 18px; margin: 0 10px; } .color-input { border: 1px solid #ffffff; margin-left: auto; padding: 5px; cursor: pointer; } .color-input i { display: block; width: 16px; height: 16px; background-color: rgb(0, 0, 0); box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2); } .app-inputs .accordion-button{font-size: 20px;} .app-inputs .accordion-item:not(:first-child){margin-top:10px;} .app-inputs h4{ margin-bottom: 10px; } .app-inputs p{ margin-bottom: 5px;} .table-app tr td{ padding: 8px; } .container-preview{ width: 300px; margin: 10px auto; padding: 0; } .fl-upload{ padding: 5px 15px; text-align: center; } ::-webkit-file-upload-button { display: none; } button[disabled]{ cursor: not-allowed; } .table-app .form-check-input[type=radio]{border: 1px solid #279e78!important; width: 1.4em!important; height: 1.4em!important;} .table-app tbody tr{border: 1px solid #e3e3e3; border-radius: 5px;} .da_checks{border: 1px solid #a2a2a2!important; width: 1.3em!important; height: 1.3em!important; margin-top: .12em!important;}

	
	.preview-sticky {
    position: sticky;
    top: 20px;
    z-index: 100;
}
		
    </style>
    <link href="/assets/customize/css/colorpicker.css?v=1" media="screen" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
@endsection
@include('includes/header')
@include('includes/topRadio')
<div class="content">

    <div class="row">
        <div class="col-12">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
                <div class="flex-grow-1">
                    <h1 class="h3 fw-bold mb-2">
                        {{ __('radio.app_exclusive_title') }}
                    </h1>
                </div>
                <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt push mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('radio.home.r') }}">{{ __('radio.menu_item_1') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0)">{{ __('radio.menu_item_5') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('radio.menu_item_5_sub_2') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>




    @if(isset($appData) && $appData->status == '2')
        <div class="row">
            <div class="col-md-2 mb-5">
                @include('radio.menu-apps')
            </div>
            <div class="col-md-10 app-inputs mb-5">

                <div class="alert alert-secondary text-center">
                    <h3 class="alert-heading h4 my-1"><i class="fa fa-circle-check"></i> {{ __('radio.app_requested_title') }}</h3>
                    <p class="mb-0">
                        {{ __('radio.app_analysis_p1') }}
                    </p>
                    <p class="mb-0">{{ __('radio.app_analysis_p2') }}</p>
                </div>


            </div>
        </div>
	@else
    <div class="row">
        <div class="col-md-2 mb-5">
            @include('radio.menu-apps')
        </div>
        <div class="col-md-5 app-inputs mb-5">

            <div class="accordion" id="appMenu">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                        <button class="accordion-button {{ (isset($appData) && $appData->name && $appData->step > 1 ? 'collapsed' : '') }}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="{{ (isset($appData) && $appData->name && $appData->step > 1 ? 'false' : 'true') }}" aria-controls="collapse1">
                            {{ __('radio.app_step1_title') }} <i class="ms-2 fas fa-check-circle text-primary check1 {{ (isset($appData) && $appData->name && $appData->step > 1 ? '' : 'd-none') }}"></i>
                        </button>
                    </h2>
                    <div id="collapse1" class="accordion-collapse collapse {{ (isset($appData) && $appData->name && $appData->step > 1 ? '' : 'show') }}" aria-labelledby="headingOne" data-bs-parent="#appMenu">
                        <div class="accordion-body pt-4">
                            <div class="mb-3">
                                <label>{{ __('radio.app_name_label') }}</label>
                                <input type="text" class="form-control mb-1" id="app_name" name="app_name" placeholder="{{ __('radio.app_name_placeholder') }}" onkeydown="limit(this);" onkeyup="limit(this);" value="{{ (isset($appData) && $appData->name ? $appData->name : '') }}">
                                <small class="fw-bold">{{ __('radio.app_name_limit_30') }}</small>
                                <p class="mt-2 mb-1 text-danger fw-semibold"><i class="fa fa-warning"></i> {{ __('radio.app_name_store_warning') }}</p>
                            </div>
                            <button type="button" class="btn btn-lg btn-primary w-100 btn-stepsave" data-id="2" onclick="save(2)">{{ __('radio.app_action_save_continue') }}</button>
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo">
                        <button class="accordion-button collapse2 {{ (isset($appData) && $appData->step != 2 ? 'collapsed' : '') }}" {{ (isset($appData) && $appData->step < 2 ? 'disabled' : '') }} type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
                            {{ __('radio.app_step2_title') }} <i class="ms-2 fas fa-check-circle text-primary check2 {{ (isset($appData) && $appData->step > 2 ? '' : 'd-none') }}"></i>
                        </button>
                    </h2>
                    <div id="collapse2" class="accordion-collapse collapse {{ (isset($appData) && $appData->step != 2 ? '' : 'show') }}" aria-labelledby="headingTwo" data-bs-parent="#appMenu">
                        <div class="accordion-body">
                            <p>{{ __('radio.app_modules_intro') }}</p>
                            <div class="list-item">
                                <h4>{{ __('radio.app_mod_listen') }} <span class="fs-xs fw-semibold d-inline-block py-1 px-2 rounded-pill bg-primary align-text-bottom text-white">{{ __('radio.app_required_badge') }}</span></h4>
                                <p class="gray-text">{{ __('radio.app_mod_listen_desc') }}</p>
                            </div>
                            <div class="list-item {{ (isset($appData) && $appData->mod_schedule == 0 ? 'disabled' : '') }}">
                                <h4>{{ __('radio.app_mod_schedule') }}</h4>
                                <div class="conteiner">
                                    <p class="gray-text">{{ __('radio.app_mod_schedule_desc') }}</p>
                                    <div class="checkbutton-slider {{ (isset($appData) && $appData->mod_schedule == 0 ? '' : 'active') }}">
                                        <input type="checkbox" name="mod_schedule" value="1" {{ (isset($appData) && $appData->mod_schedule == 0 ? '' : 'checked') }} class="">
                                        <div class="checkbutton-slider-button"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="list-item {{ (isset($appData) && $appData->mod_chat == 0 ? 'disabled' : '') }}">
                                <h4>{{ __('radio.app_mod_chat') }}</h4>
                                <div class="conteiner">
                                    <p class="gray-text">{{ __('radio.app_mod_chat_desc') }}</p>
                                    <div class="checkbutton-slider {{ (isset($appData) && $appData->mod_chat == 0 ? '' : 'active') }}">
                                        <input type="checkbox" name="mod_chat" value="1" {{ (isset($appData) && $appData->mod_chat == 0 ? '' : 'checked') }} class="">
                                        <div class="checkbutton-slider-button"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="list-item {{ (isset($appData) && $appData->mod_messages == 0 ? 'disabled' : '') }}">
                                <h4>{{ __('radio.app_mod_messages') }}</h4>
                                <div class="conteiner">
                                    <p class="gray-text">{{ __('radio.app_mod_messages_desc') }}</p>
                                    <div class="checkbutton-slider {{ (isset($appData) && $appData->mod_messages == 0 ? '' : 'active') }}">
                                        <input type="checkbox" name="mod_messages" value="1" {{ (isset($appData) && $appData->mod_messages == 0 ? '' : 'checked') }} class="">
                                        <div class="checkbutton-slider-button"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="list-item {{ (isset($appData) && $appData->mod_camera == 0 ? 'disabled' : '') }}">
                                <h4>{{ __('radio.app_mod_camera') }}</h4>
                                <div class="conteiner">
                                    <p class="gray-text">{{ __('radio.app_mod_camera_desc') }}</p>
                                    <div class="checkbutton-slider {{ (isset($appData) && $appData->mod_camera == 0 ? '' : 'active') }}">
                                        <input type="checkbox" name="mod_camera" value="1" {{ (isset($appData) && $appData->mod_camera == 0 ? '' : 'checked') }} class="">
                                        <div class="checkbutton-slider-button"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="list-item {{ (isset($appData) && $appData->mod_requests == 0 ? 'disabled' : '') }}">
                                <h4>{{ __('radio.app_mod_requests') }}</h4>
                                <div class="conteiner">
                                    <p class="gray-text">{{ __('radio.app_mod_requests_desc') }}</p>
                                    <div class="checkbutton-slider {{ (isset($appData) && $appData->mod_requests == 0 ? '' : 'active') }}">
                                        <input type="checkbox" name="mod_requests" value="1" {{ (isset($appData) && $appData->mod_requests == 0 ? '' : 'checked') }} class="">
                                        <div class="checkbutton-slider-button"></div>
                                    </div>
                                </div>
                            </div>
							<div class="stAppNew">
							<div class="list-item {{ (isset($appData) && $appData->mod_top == 0 ? 'disabled' : '') }}">
                                <h4>{{ __('radio.app_mod_top') }}</h4>
                                <div class="conteiner">
                                    <p class="gray-text">{{ __('radio.app_mod_top_desc') }}</p>
                                    <div class="checkbutton-slider {{ (isset($appData) && $appData->mod_top == 0 ? '' : 'active') }}">
                                        <input type="checkbox" name="mod_top" value="1" {{ (isset($appData) && $appData->mod_top == 0 ? '' : 'checked') }} class="">
                                        <div class="checkbutton-slider-button"></div>
                                    </div>
                                </div>
                            </div>
							<div class="list-item {{ (isset($appData) && $appData->mod_news == 0 ? 'disabled' : '') }}">
                                <h4>{{ __('radio.app_mod_news') }}</h4>
                                <div class="conteiner">
                                    <p class="gray-text">{{ __('radio.app_mod_news_desc') }}</p>
                                    <div class="checkbutton-slider {{ (isset($appData) && $appData->mod_news == 0 ? '' : 'active') }}">
                                        <input type="checkbox" name="mod_news" value="1" {{ (isset($appData) && $appData->mod_news == 0 ? '' : 'checked') }} class="">
                                        <div class="checkbutton-slider-button"></div>
                                    </div>
                                </div>
                            </div>
							<div class="list-item {{ (isset($appData) && $appData->mod_events == 0 ? 'disabled' : '') }}">
                                <h4>{{ __('radio.app_mod_events') }}</h4>
                                <div class="conteiner">
                                    <p class="gray-text">{{ __('radio.app_mod_events_desc') }}</p>
                                    <div class="checkbutton-slider {{ (isset($appData) && $appData->mod_events == 0 ? '' : 'active') }}">
                                        <input type="checkbox" name="mod_events" value="1" {{ (isset($appData) && $appData->mod_events == 0 ? '' : 'checked') }} class="">
                                        <div class="checkbutton-slider-button"></div>
                                    </div>
                                </div>
                            </div>
							<div class="list-item {{ (isset($appData) && $appData->mod_team == 0 ? 'disabled' : '') }}">
                                <h4>{{ __('radio.app_mod_team') }}</h4>
                                <div class="conteiner">
                                    <p class="gray-text">{{ __('radio.app_mod_team_desc') }}</p>
                                    <div class="checkbutton-slider {{ (isset($appData) && $appData->mod_team == 0 ? '' : 'active') }}">
                                        <input type="checkbox" name="mod_team" value="1" {{ (isset($appData) && $appData->mod_team == 0 ? '' : 'checked') }} class="">
                                        <div class="checkbutton-slider-button"></div>
                                    </div>
                                </div>
                            </div>
							<div class="list-item {{ (isset($appData) && $appData->mod_gallery == 0 ? 'disabled' : '') }}">
                                <h4>{{ __('radio.app_mod_gallery') }}</h4>
                                <div class="conteiner">
                                    <p class="gray-text">{{ __('radio.app_mod_gallery_desc') }}</p>
                                    <div class="checkbutton-slider {{ (isset($appData) && $appData->mod_gallery == 0 ? '' : 'active') }}">
                                        <input type="checkbox" name="mod_gallery" value="1" {{ (isset($appData) && $appData->mod_gallery == 0 ? '' : 'checked') }} class="">
                                        <div class="checkbutton-slider-button"></div>
                                    </div>
                                </div>
                            </div>
							<div class="list-item {{ (isset($appData) && $appData->mod_promo == 0 ? 'disabled' : '') }}">
                                <h4>{{ __('radio.app_mod_promo') }}</h4>
                                <div class="conteiner">
                                    <p class="gray-text">{{ __('radio.app_mod_promo_desc') }}</p>
                                    <div class="checkbutton-slider {{ (isset($appData) && $appData->mod_promo == 0 ? '' : 'active') }}">
                                        <input type="checkbox" name="mod_promo" value="1" {{ (isset($appData) && $appData->mod_promo == 0 ? '' : 'checked') }} class="">
                                        <div class="checkbutton-slider-button"></div>
                                    </div>
                                </div>
                            </div>
							<div class="list-item {{ (isset($appData) && $appData->mod_podcasts == 0 ? 'disabled' : '') }}">
                                <h4>{{ __('radio.app_mod_podcasts') }}</h4>
                                <div class="conteiner">
                                    <p class="gray-text">{{ __('radio.app_mod_podcasts_desc') }}</p>
                                    <div class="checkbutton-slider {{ (isset($appData) && $appData->mod_podcasts == 0 ? '' : 'active') }}">
                                        <input type="checkbox" name="mod_podcasts" value="1" {{ (isset($appData) && $appData->mod_podcasts == 0 ? '' : 'checked') }} class="">
                                        <div class="checkbutton-slider-button"></div>
                                    </div>
                                </div>
                            </div>
							</div>
							
							
							<h3 class="mt-4">{{ __('radio.app_section_schedule_metadata') }}</h3>
							<div class="list-item {{ (isset($appData) && $appData->cog_metadata == 0 ? 'disabled' : '') }}">
                                <h4>{{ __('radio.app_cog_metadata') }}</h4>
                                <div class="conteiner">
                                    <p class="gray-text">{{ __('radio.app_cog_metadata_desc') }}</p>
                                    <div class="checkbutton-slider {{ (isset($appData) && $appData->cog_metadata == 0 ? '' : 'active') }}">
                                        <input type="checkbox" name="cog_metadata" value="1" {{ (isset($appData) && $appData->cog_metadata == 0 ? '' : 'checked') }} class="">
                                        <div class="checkbutton-slider-button"></div>
                                    </div>
                                </div>
                            </div>
							
							<div class="list-item {{ (isset($appData) && $appData->cog_albumdata == 0 ? 'disabled' : '') }}">
                                <h4>{{ __('radio.app_cog_albumdata') }}</h4>
                                <div class="conteiner">
                                    <p class="gray-text">{{ __('radio.app_cog_albumdata_desc') }}</p>
                                    <div class="checkbutton-slider {{ (isset($appData) && $appData->cog_albumdata == 0 ? '' : 'active') }}">
                                        <input type="checkbox" name="cog_albumdata" value="1" {{ (isset($appData) && $appData->cog_albumdata == 0 ? '' : 'checked') }} class="">
                                        <div class="checkbutton-slider-button"></div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="mt-2 btn btn-lg btn-primary w-100 btn-stepsave" data-id="3" onclick="save(3)">{{ __('radio.app_action_save_continue') }}</button>
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingThree">
                        <button class="accordion-button collapse3  {{ (isset($appData) && $appData->step != 3 ? 'collapsed' : '') }}" {{ (isset($appData) && $appData->step < 3 ? 'disabled' : '') }} type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
                            {{ __('radio.app_step3_title') }} <i class="ms-2 fas fa-check-circle text-primary check3 {{ (isset($appData) && $appData->step > 3 ? '' : 'd-none') }}"></i>
                        </button>
                    </h2>
                    <div id="collapse3" class="accordion-collapse collapse {{ (isset($appData) && $appData->step != 3 ? '' : 'show') }}" aria-labelledby="headingThree" data-bs-parent="#appMenu">
                        <div class="accordion-body overflow-hidden">
						
						<h5 class="txtSlBgType mb-1">{{ __('radio.app_bg_type') }}</h5>
							<select class="form-select" name="slBgType" id="bgType" label="{{ __('radio.app_bg_type_question') }}">
								<option value="1" selected>{{ __('radio.app_bg_solid_color') }}</option>
								<option value="3">{{ __('radio.app_bg_send_image') }}</option> 
							</select>
							<small class="text-danger d-none errorSlBgType">
								{{ __('radio.app_bg_type_error') }}
							</small>


            							<div class="stAppNewF mt-4 d-none">
            									 <div class="mb-3">
            										<h5 class="txtSlBgType mb-1">{{ __('radio.app_bg_title') }}</h5>										
            										<div class=" mt-2 bgTypeColor">
            										
            										<div class="d-flex bg-primary p-2 text-white rounded mb-3">
                                            <label>{{ __('radio.app_bg_color_label') }}</label>
                                            <div class="color-input">
            												<i data-background="#05b993" style="background: #05b993"></i>
            												<input type="hidden" name="picBg" value="#05b993" />
            								</div>
                                            <div class="help-block"></div>
                                        </div>
            										
            										</div>								
            										
            									 </div>
            								</div>

                            <div class="mb-3 mt-3 imgBG d-none">
                                <div class="block-bgimg mt-3">
                                    <h5 class="mb-1">{{ __('radio.app_bg_image') }}</h5>
                                <div class="d-flex w-100 gap-1 flex-column">
                                    <div class="">
                                        <span class="btn btn-primary w-100 p-0">
                                           <input type="file" name="file-upload" id="bg-upload" class="clickable fl-upload" accept=".png">
                                         </span>
                                    </div>
                                    <div class="bg-secondary w-100 d-flex align-items-center justify-content-center text-white rounded">
                                        <i class="fa fa-arrows me-1"></i>
                                        {{ __('radio.app_dimension') }} <strong class="ms-1 me-1">1080 x 1920</strong> {{ __('radio.app_pixels') }} | {{ __('radio.app_format') }} <b>PNG</b>
                                    </div>
                                </div>
                                <input type="hidden" name="baseBG" id="baseBG" value="">
                                </div>
                                <div class="bg-danger py-2 text-white ps-3 rounded alert-error-bg d-none mt-2">{{ __('radio.app_bg_required') }}</div>
                                <div class="bg-danger py-2 text-white ps-3 rounded alert-custom-error-bgImg d-none mt-2"></div>
                            </div>
							

                            <div class="mb-3">
                            <h4>{{ __('radio.app_logo_title') }}</h4>
                             <p class="info">{{ __('radio.app_logo_desc') }}</p>
                                    <div class="d-flex w-100 gap-1 flex-column">
                                        <div class="">
                                        <span class="btn btn-primary w-100 p-0">
                                                        <input type="file" name="file-upload" id="logo-upload" class="clickable fl-upload" accept=".png">
                                         </span>
                                        </div>
                                        <div class="bg-secondary w-100 d-flex align-items-center justify-content-center text-white rounded">
                                            <i class="fa fa-arrows me-1"></i>
                                            {{ __('radio.app_dimension') }} <strong class="ms-1 me-1">450 x 450</strong> {{ __('radio.app_pixels') }} | {{ __('radio.app_format') }} <b>PNG</b>
                                        </div>
                                    </div>
                                <div class="bg-danger py-2 text-white ps-3 rounded alert-error-logo d-none mt-2">{{ __('radio.app_logo_required') }}</div>
                                <div class="bg-danger py-2 text-white ps-3 rounded alert-custom-error-logoImg d-none mt-2"></div>
                            </div>

                            <div class="mb-3">
                                <h4>{{ __('radio.app_icon_title') }}</h4>
                                <p class="info">{{ __('radio.app_icon_desc') }}</p>
                                <div class="d-flex w-100 gap-2 flex-column">
                                    <div class="">
                                        <span class="btn btn-primary w-100 p-0">
                                                        <input type="file" name="file-upload" class="clickable fl-upload" id="icon-upload" accept=".png">
                                        </span>
                                    </div>
                                    <div class="bg-secondary w-100 d-flex align-items-center justify-content-center text-white rounded sizeBlock">
                                        <i class="fa fa-arrows me-1"></i>
                                        {{ __('radio.app_dimension') }} <strong class="ms-1 me-1">1024 x 1024</strong> {{ __('radio.app_pixels') }} | {{ __('radio.app_format') }} <b>PNG</b>
                                    </div>
                                    <button type="button" data-bs-toggle="modal" data-bs-target="#iconPreview" class="border-0 bg-primary w-100 d-flex align-items-center justify-content-center text-white rounded previewBlock">
                                        {{ __('radio.app_icon_preview') }}
                                    </button>
                                </div>
                                <div class="bg-danger py-2 text-white ps-3 rounded alert-error-icon d-none mt-2">{{ __('radio.app_icon_required') }}</div>
                                <div class="bg-danger py-2 text-white ps-3 rounded alert-custom-error-iconImg d-none mt-2"></div>
                            </div>


                            <div class="modal fade" id="iconPreview" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="block block-rounded block-transparent mb-0">
                                        <div class="block-content fs-sm pt-4 pb-4 ps-3 pe-3">
                                            <p id="iconImg" style="text-align: center;font-size: 17px;">{{ __('radio.app_icon_empty') }}</p>
                                        </div>
                                        <div class="block-content block-content-full text-end bg-body">
                                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">{{ __('radio.app_action_close') }}</button>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>

                            <hr>
                            <div class="d-flex bg-primary p-2 text-white rounded mb-3">
                                <label>{{ __('radio.app_color_text_icons') }}</label>
                                <div class="color-input">
                                    <i data-background="{{ (isset($appData) && $appData->p1 ? $appData->p1 : '#000000') }}" style="background: {{ (isset($appData) && $appData->p1 ? $appData->p1 : '#000000') }}"></i>
                                    <input type="hidden" name="color1" value="{{ (isset($appData) && $appData->p1 ? $appData->p1 : '#000000') }}" />
                                </div>
                                <div class="help-block"></div>
                            </div>

                            <div class="d-flex bg-primary p-2 text-white rounded mb-3">
                                <label>{{ __('radio.app_color_button_top') }}</label>
                                <div class="color-input">
                                    <i data-background="{{ (isset($appData) && $appData->p2 ? $appData->p2 : '#05b993') }}" style="background: {{ (isset($appData) && $appData->p2 ? $appData->p2 : '#05b993') }}"></i>
                                    <input type="hidden" name="color2" value="{{ (isset($appData) && $appData->p2 ? $appData->p2 : '#05b993') }}" />
                                </div>
                                <div class="help-block"></div>
                            </div>

                            <button type="button" class="mt-2 btn btn-lg btn-primary w-100 btn-stepsave" data-id="4" onclick="save(4)">{{ __('radio.app_action_save_continue') }}</button>
                        </div>
                    </div>
                </div>
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingThree">
                        <button class="accordion-button collapse4 {{ (isset($appData) && $appData->step != 4 ? 'collapsed' : '') }}" {{ (isset($appData) && $appData->step < 4 ? 'disabled' : '') }} type="button" data-bs-toggle="collapse" data-bs-target="#collapse4" aria-expanded="false" aria-controls="collapse4">
                            {{ __('radio.app_step4_title') }}
                        </button>
                    </h2>
                    <div id="collapse4" class="accordion-collapse collapse {{ (isset($appData) && $appData->step != 4 ? '' : 'show') }}" aria-labelledby="headingThree" data-bs-parent="#appMenu">
                        <div class="accordion-body text-center">
                            @if($streamData->plan_app)
                                <button id="request" class="btn btn-lg btn-primary w-100" @if(isset($appData) && $appData->step <= 3) disabled @endif>{{ __('radio.app_action_request') }}</button>
                            @else
                            <div class="mb-3">
                            <i class="fa fa-mobile-alt display-5" style="margin-top:17px;"></i>
                            <i class="fa fa-ban display-1" style="position: absolute; margin-left: -58px;"></i>
                            </div>
                            <h6>{{ __('radio.app_plan_no_android') }}</h6>
                            <a href="" class="btn btn-primary">{{ __('radio.app_plan_change') }}</a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>


        </div>

        <div class="col-md-5 mb-5">
			<div class="preview-sticky" style="width: 100%; padding-bottom: 20px; background: #ebeef2; border-radius:5px;">
				<p class="text-center p-2 mb-0 fw-semibold">{{ __('radio.app_preview_label') }}</p>
				<div class="container-preview">
					<iframe src="{{ route('radio.apps.r.android-preview','2') }}" id="preview" allowtransparency="true" frameborder="0" style="border-radius:5px; height: 600px;"></iframe>
				</div>
			</div>
		</div>

    </div>
    @endif


</div>

</div>

</main>



<div class="modal" id="infoApp" tabindex="-1" role="dialog" aria-labelledby="modal-block-vcenter" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="block block-rounded block-transparent mb-0">
                <div class="block-header block-header-default">
                    <h3 class="block-title">{{ __('radio.app_modal_title') }}</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
                            <i class="fa fa-fw fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content fs-sm">
                    <p class="text-center mb-2"><i class="fas fa-exclamation-triangle" style="color: #ef751f;font-size: 70px;"></i></p>
                    <p class="text-center mb-0">{{ __('radio.app_modal_intro') }}</b></p>
                   
                    <table class="table-app mt-3 mb-3">
                        <thead>
                        <tr>
                            <td><h5 class="mb-1">{{ __('radio.app_modal_question') }}</h5></td>
                            <td style="text-align: center; width:80px;"><b>{{ __('radio.app_yes') }}</b></td>
                            <td style="text-align: center"><b>{{ __('radio.app_no') }}</b></td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>{{ __('radio.app_modal_q1') }}</td>
                            <td style="text-align: center"><input type="radio" name="radio_1" class="form-check-input no_checks"/></td>
                            <td style="text-align: center"><input type="radio" name="radio_1" class="form-check-input don_checks"/></td>
                        </tr>

                        <tr>
                            <td>{{ __('radio.app_modal_q2') }}</td>
                            <td style="text-align: center"><input type="radio" name="radio_2" class="form-check-input no_checks"/></td>
                            <td style="text-align: center"><input type="radio" name="radio_2" class="form-check-input don_checks"/></td>
                        </tr>

                        <tr>
                            <td>{{ __('radio.app_modal_q3') }}</td>
                            <td style="text-align: center"><input type="radio" name="radio_3" class="form-check-input no_checks"/></td>
                            <td style="text-align: center"><input type="radio" name="radio_3" class="form-check-input don_checks"/></td>
                        </tr>
                        </tbody>
                    </table>

                    <div class="form-check mb-2">
                        <input class="form-check-input da_checks" type="checkbox" value="" id="vc1">
                        <label class="form-check-label ms-1" for="vc1">{{ __('radio.app_modal_check1') }}</label>
                    </div>

                    <div class="form-check mb-2">
                        <input class="form-check-input da_checks" type="checkbox" value="" id="vc2">
                        <label class="form-check-label ms-1" for="vc2">{{ __('radio.app_modal_check2') }}</label>
                    </div>

                    <div class="form-check mb-2">
                        <input class="form-check-input da_checks" type="checkbox" value="" id="vc3">
                        <label class="form-check-label ms-1" for="vc3">{{ __('radio.app_modal_check3') }}</label>
                    </div>

                    <div class="form-check mb-2">
                        <input class="form-check-input da_checks" type="checkbox" value="" id="vc4">
                        <label class="form-check-label ms-1" for="vc4">{{ __('radio.app_modal_check4') }}</label>
                    </div>

                    <div class="form-check mb-3">
                        <input class="form-check-input da_checks" type="checkbox" value="" id="vc5">
                        <label class="form-check-label ms-1" for="vc5">{{ __('radio.app_modal_check5') }}</label>
                    </div>

                </div>
                <div class="block-content block-content-full text-end bg-body">
                    <button type="button" class="btn btn-sm btn-alt-secondary me-1" data-bs-dismiss="modal">{{ __('radio.app_action_close') }}</button>
                    <button type="button" class="btn btn-sm btn-primary" disabled id="finish">{{ __('radio.app_modal_confirm') }}</button>
                </div>
            </div>
        </div>
    </div>
</div>



@include('includes/footer')

</div>
<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script type="text/javascript" src="/assets/customize/js/colorpicker.js"></script>
<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script>

    function limit(element)
    {
        if(element.value.length >= 30) {
            element.value = element.value.substr(0, 30);
        }
    }
	
	
	function hexToRgb(hex) {
    hex = hex.replace("#", "");
    if (hex.length === 3) {
        hex = hex.split("").map(c => c + c).join("");
    }
    const num = parseInt(hex, 16);
    return {
        r: (num >> 16) & 255,
        g: (num >> 8) & 255,
        b: num & 255
    };
}

// ---- COLOR OBJECT ----
function Color(r, g, b) {
    this.r = r; this.g = g; this.b = b;
}

Color.prototype.set = function(r, g, b) {
    this.r = r; this.g = g; this.b = b;
};

Color.prototype.rgb = function() {
    return { r: this.r, g: this.g, b: this.b };
};

// ---- FILTER ENGINE ----
function Solver() {}

Solver.prototype.solve = function(target) {
    let result = this.spsa(target);
    return {
        filter: this.css(result)
    };
};

Solver.prototype.css = function(v) {
    return `
invert(${v[0].toFixed(0)}%)
sepia(${v[1].toFixed(0)}%)
saturate(${v[2].toFixed(0)}%)
hue-rotate(${v[3].toFixed(0)}deg)
brightness(${v[4].toFixed(0)}%)
contrast(${v[5].toFixed(0)}%)
`.trim().replace(/\n/g, " ");
};

Solver.prototype.loss = function(v, target) {
    let c = new Color(255, 255, 255);

    // ordem dos filtros
    c = this.apply(c, "invert", v[0]);
    c = this.apply(c, "sepia", v[1]);
    c = this.apply(c, "saturate", v[2]);
    c = this.apply(c, "hueRotate", v[3]);
    c = this.apply(c, "brightness", v[4]);
    c = this.apply(c, "contrast", v[5]);

    let o = c.rgb();
    return Math.abs(o.r - target.r) + Math.abs(o.g - target.g) + Math.abs(o.b - target.b);
};

// Aqui usamos aproximações básicas (suficientes para o solver SPSA)
Solver.prototype.apply = function(color, type, value) {
    let r = color.r, g = color.g, b = color.b;

    switch (type) {
        case "invert":
            value /= 100;
            r = (1 - value) * r + value * (255 - r);
            g = (1 - value) * g + value * (255 - g);
            b = (1 - value) * b + value * (255 - b);
            break;

        case "brightness":
            r *= value / 100;
            g *= value / 100;
            b *= value / 100;
            break;

        case "contrast":
            r = (r - 128) * (value / 100) + 128;
            g = (g - 128) * (value / 100) + 128;
            b = (b - 128) * (value / 100) + 128;
            break;

        case "sepia":
            value /= 100;
            r = r * (1 - value) + (r * .393 + g * .769 + b * .189) * value;
            g = g * (1 - value) + (r * .349 + g * .686 + b * .168) * value;
            b = b * (1 - value) + (r * .272 + g * .534 + b * .131) * value;
            break;

        case "saturate":
            value /= 100;
            const avg = (r + g + b) / 3;
            r = avg + (r - avg) * value;
            g = avg + (g - avg) * value;
            b = avg + (b - avg) * value;
            break;

        case "hueRotate":
            let angle = value * Math.PI / 180;
            let cos = Math.cos(angle), sin = Math.sin(angle);
            r = (.213 + cos * .787 - sin * .213) * r + (.715 - cos * .715 - sin * .715) * g + (.072 - cos * .072 + sin * .928) * b;
            g = (.213 - cos * .213 + sin * .143) * r + (.715 + cos * .285 + sin * .140) * g + (.072 - cos * .072 - sin * .283) * b;
            b = (.213 - cos * .213 - sin * .787) * r + (.715 - cos * .715 + sin * .715) * g + (.072 + cos * .928 + sin * .072) * b;
            break;
    }

    return new Color(r, g, b);
};

// Algoritmo SPSA (mágica do Sosuke)
Solver.prototype.spsa = function(target) {
    let v = [50, 20, 300, 0, 100, 100]; // chute inicial
    const maxIter = 500;

    for (let k = 1; k <= maxIter; k++) {
        const ck = 10 / Math.pow(k, 0.101);
        const ak = 2  / Math.pow(k, 0.602);

        let delta = Array.from({ length: 6 }, () => (Math.random() > 0.5 ? 1 : -1));

        let vHigh = v.map((val, i) => val + ck * delta[i]);
        let vLow  = v.map((val, i) => val - ck * delta[i]);

        let lossDiff = this.loss(vHigh, target) - this.loss(vLow, target);

        for (let i = 0; i < 6; i++) {
            v[i] -= ak * lossDiff / (2 * ck * delta[i]);
        }
    }

    return v;
};

// ---- FUNÇÃO PRINCIPAL ----
function hexToCssFilter(hex) {
    const rgb = hexToRgb(hex);
    const solver = new Solver();
    return solver.solve(rgb).filter;
}

	
function hexToRgba(hex, alpha = 1) {
	  hex = hex.replace(/^#/, '');
	  if (hex.length === 3) {
		hex = hex.split('').map(char => char + char).join('');
	  }
	  const r = parseInt(hex.slice(0, 2), 16);
	  const g = parseInt(hex.slice(2, 4), 16);
	  const b = parseInt(hex.slice(4, 6), 16);
	  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
	}
	
	

    function change(type, color, theme = '2'){
			
			if(type == 'picBg'){
				var colorBgCustom = $('input[name=picBg]').val();
				$("#preview").contents().find("#styleBGCustom").html('body, .sidebar__background, .sidebar_navigation{background-color:'+colorBgCustom+'!important}');
			}else if(type=='color2') {
				var color2 = $('input[name=color2]').val();
				var final3Btns = hexToRgba(color2, 0.3);
				$("#preview").contents().find("#styleChangeCor").html('.sidebar_header, .music_play_btn{background:'+color2+';} .music_player{color:'+color2+'} .home_action_btn{background-color:'+final3Btns+'!important} .sidebar__background, .sidebar_navigation, .sidebar_header{background-color:'+color2+'!important} .sidebar_navigation_item:hover{background-color:'+color2+'!important} .sidebar_overlay{background-color:'+color2+'!important} ');
			}else if(type=='color1'){
				var color1 = $('input[name=color1]').val();
				let filterString = hexToCssFilter(color1);
				$("#preview").contents().find("#styleChangeBg").html('.stream_status{border-color:'+color1+'!important;} .sidebar_page_title, .sidebar_navigation_item, .share_btn, .stream_status, .stream_name, .stream_description, .home_action_btn{color: '+color1+'!important;} .burger span,.music_player{background:'+color1+'!important;} svg,path{fill: '+color1+'}');
			}
		
    }

    $('.color-input').each(function(i) {
        var $this = $(this);
        var elm = $this.find('i');
        var input = $this.find('input');
		var inpSelecTheme = document.querySelector('#theme_select');
		
        $this.ColorPicker({
            color: elm.data('background'),
            onChange: function(hsb, hex, rgb) {
                var color = '#' + hex;
                elm.css({'backgroundColor': color}).data('background', color);
                input.val(color);
                change(input.attr('name'), color, (inpSelecTheme ? inpSelecTheme.value : 1));
            }
        });
    });

    var bgInput = document.getElementById('bg-upload');
    function bgUploadChange(e) {
        var file = e.target.files[0]; var fr = new FileReader();
        fr.onload = onFileReaderLoadBg; fr.readAsDataURL(file);
    }
    function onFileReaderLoadBg(e) {
        var image = new Image();
        image.src = e.target.result;
        // console.log(image.src);
        image.onload = function() {
            $('.alert-error-bg').addClass('d-none');
            var img = e.target.result;
            $("#preview").contents().find("#styleBGCustom").html(
				'body {' +
					'font-family: "Inter", sans-serif;' +
					'color: var(--color1);' +
					'background: url("' + img + '") no-repeat center center fixed !important;' +
					'background-size: cover !important;' +
				'}' +
				'.sidebar__background, .sidebar_navigation {' +
					'background: url("' + img + '") no-repeat center center !important;' +
					'background-size: cover !important;' +
				'}'
			);
        };
        image.onerror = function(){
            $("#bg-upload").val('');
            var img = '';
            $("#baseBG").val('');
        };
    };
    bgInput.addEventListener('change',bgUploadChange,false);



    var iconInput = document.getElementById('icon-upload');
    function iconUploadChange(e) {
        var file = e.target.files[0]; var fr = new FileReader();
        fr.onload = onFileReaderLoadIcone; fr.readAsDataURL(file);
    }
    function onFileReaderLoadIcone(e) {
        var image = new Image();
        image.src = e.target.result;
        image.onload = function() {
            $('.alert-error-icon').addClass('d-none');
            var icone = e.target.result;
            $("#iconImg").html('<img src='+icone+' style="width: 250px;height: 250px;border: 1px solid #e4e4e4;border-radius: 5px;margin: 0 auto;" />');
        };
        image.onerror = function(){
            $("#icone-upload").val('');
            var icone = '';
            $("#iconImg").html('Nenhuma imagem de ícone enviada.');
        };
    };
    iconInput.addEventListener('change',iconUploadChange,false);

    var elmFileUpload = document.getElementById('logo-upload');
    function onFileUploadChange(e) {
        var file = e.target.files[0]; var fr = new FileReader();
        fr.onload = onFileReaderLoad; fr.readAsDataURL(file);
    }

    function onFileReaderLoad(e) {
        var image = new Image();
        image.src = e.target.result;
        image.onload = function() {
            $('.alert-error-logo').addClass('d-none');
            $("#preview").contents().find('.logo-wrong').hide();
            var logo = e.target.result;
            $("#preview").contents().find('.img-logo').removeClass('d-none');
            $("#preview").contents().find("#styleChangeLogo").html('.img-logo { background: url('+logo+') !important; background-size: 100% 100% !important; background-position: center bottom !important;} .img-logo-menu { background: url('+logo+') !important; background-size: 100% 100% !important; background-position: center bottom !important;}');
        };
        image.onerror = function(){
            $('.logo-wrong').show(); var logo = '/assets-app/blank-app.png';
            $("#file-upload").val('');
        };
    };
    elmFileUpload.addEventListener('change',onFileUploadChange,false);
	
	function stepAppNew(isValue){
		if(isValue == '2'){
			document.querySelector('.stAppNew').classList.remove('d-none');
			document.querySelector('.stAppNewF').classList.remove('d-none');
			document.querySelector('.imgBG').classList.add('d-none');
		}else{
			document.querySelector('.stAppNew').classList.add('d-none');
			document.querySelector('.stAppNewF').classList.add('d-none');
			document.querySelector('.imgBG').classList.remove('d-none');
		}
	}
	

	
	var isSelectThemeInput = document.getElementById('theme_select');
	
	if(isSelectThemeInput){
		isSelectThemeInput.addEventListener('change', function() {
		   const prevIf = document.getElementById('preview');
			prevIf.src  = 'https://app.brascast.com/radio/app/android-preview/'+this.value;
			
			stepAppNew(this.value);
		
		});
	}


    $(".da_checks, .no_checks, .don_checks").click(function() {
        var da  = $( ".da_checks:checked" ).length;
        var no  = $( ".no_checks:checked" ).length;
        var don = $( ".don_checks:checked" ).length;

        if(da == 5 && no == 0 && don == 3) {
            $("#finish").attr("disabled", false);
        } else {
            $("#finish").attr("disabled", true);
        }
    });

    $("#finish").click(function() {
        var da  = $( ".da_checks:checked" ).length;
        var no  = $( ".no_checks:checked" ).length;
        var don = $( ".don_checks:checked" ).length;

        if(da == 5 && no == 0 && don == 3) {
            $("#finish").attr("disabled", false);
        } else {
            $("#finish").attr("disabled", true);
        }

        $.post("{{ route('radio.apps.r.android-doStep') }}", {step: 4 }).done(function() { location.reload(); });
    });

    $('#request').click(function () {
        $('#infoApp').modal('show');
    });

    $('.list-item .checkbutton-slider').click(function () {
        var slider = $(this);
        var checkbox = slider.find('input[type=checkbox]');
        var checked = !checkbox.prop('checked');

		/* Theme 2 */
		var themeSelectedInput = document.querySelector('#theme_select');
		
		if(themeSelectedInput && themeSelectedInput.value == '2'){
			if(checkbox.attr('name') === 'cog_albumdata' || checkbox.attr('name') === 'cog_metadata'){
				$("#preview").contents().find('#wrapper').addClass('toggled');
			}else{
				if($("#preview").contents().find('.sidebar_navigation_wrapper').attr('data-state') == 'closed'){
					$("#preview").contents().find('.sidebar_navigation_wrapper').attr('data-state','open');
				}
			}
			
		}else{

			if(checkbox.attr('name') === 'cog_albumdata' || checkbox.attr('name') === 'cog_metadata'){
				$("#preview").contents().find('#wrapper').addClass('toggled');
			}else{
				if($("#preview").contents().find('#wrapper').hasClass('toggled')){
					$("#preview").contents().find('#menuOpen').click();
				}
			}

		}
		/* Theme 2 */

        checkbox.attr('checked', checked);
        if (checked) {
            slider.addClass('active');
            $(this).parents('.list-item').removeClass('disabled');
            $("#preview").contents().find('#'+checkbox.attr('name')).removeClass('d-none');
        } else {
            slider.removeClass('active');
            $(this).parents('.list-item').addClass('disabled');
            $("#preview").contents().find('#'+checkbox.attr('name')).addClass('d-none');
        }
    });

    $('#app_name').bind('keyup', function() {
        var iframedoc = $('#preview').get(0).contentDocument;
        $(iframedoc).find('.app-preview .rName').text($(this).val());
    });

	function toggleBgType() {
				const value =  $('#bgType').val() || '1';

				if (value === '3') {
					// Imagem
					$('.stAppNewF').addClass('d-none');
					$('.imgBG').removeClass('d-none');
				} else {
					// Cor (padrão)
					$('.stAppNewF').removeClass('d-none');
					$('.imgBG').addClass('d-none');
				}
			}
			
			
			$('#bgType').on('change', function() {
				toggleBgType();

				var value = $(this).val();

				if (value === '3') {
					var bgFiles = $('#bg-upload')[0].files;
					if (bgFiles && bgFiles.length > 0) {
						var fr = new FileReader();
						fr.onload = function(e) {
							var img = e.target.result;
							$("#preview").contents().find("#styleBGCustom").html(
								'body, .sidebar__background, .sidebar_navigation{ background-image: url("' + img + '") !important; background-size: cover !important;} .sidebar__background, .sidebar_navigation, .sidebar_header{background-color:var(--color2)}'
							);
						};
						fr.readAsDataURL(bgFiles[0]);
					} else {
						$("#preview").contents().find("#styleBGCustom").html('');
					}
				} else {
					var colorBg = $('input[name=picBg]').val() || '#05b993';
					$("#preview").contents().find("#styleBGCustom").html(
						'body, .sidebar__background, .sidebar_navigation{background-color:' + colorBg + '!important}'
					);
				}
			});
      const el = document.querySelector('.collapse3');

      const observer = new MutationObserver(mutations => {
          mutations.forEach(mutation => {
              toggleBgType();
          });
      });
      
      observer.observe(el, {
          attributes: true
      });
      toggleBgType();
			

    function save(step){
		
		$('#collapse'+step).addClass('block block-mode-loading-refresh block-mode-loading');
		
		
        $('.btn-stepsave').prop('disabled',true);
        if(step == '2'){
            $('.collapse2').prop("disabled", false);
            if($('#app_name').val()){
				var inpSelectTheme = document.querySelector('#theme_select');
				var thSelected = (inpSelectTheme ? inpSelectTheme.value : '1');
                $.post("{{ route('radio.apps.r.android-doStep') }}", { name: $('#app_name').val(), theme: thSelected, step: "1" })
                    .done(function(data) {
                        if(data.success){
                        $('.check1').removeClass('d-none');
						@if(str_contains($siteData->apps_themes,'2'))
						stepAppNew(thSelected);
						@endif
                        $('#collapse2').collapse("toggle");
                        $("#preview").contents().find('#menuOpen').click();
                        }
                    });
            }
            $('.btn-stepsave').prop('disabled',false);
        }
        if(step == '3'){
            $('.collapse3').prop("disabled", false);
            $.post("{{ route('radio.apps.r.android-doStep') }}", {
                mod_schedule: ($('input[name=mod_schedule]').is(":checked") ? '1' : '0'),
                mod_chat: ($('input[name=mod_chat]').is(":checked") ? '1' : '0'),
                mod_messages: ($('input[name=mod_messages]').is(":checked") ? '1' : '0'),
                mod_requests: ($('input[name=mod_requests]').is(":checked") ? '1' : '0'),
                mod_camera: ($('input[name=mod_camera]').is(":checked") ? '1' : '0'),
				//@if(str_contains($siteData->apps_themes,'2'))
				mod_top: ($('input[name=mod_top]').is(":checked") ? '1' : '0'),
				mod_news: ($('input[name=mod_news]').is(":checked") ? '1' : '0'),
				mod_events: ($('input[name=mod_events]').is(":checked") ? '1' : '0'),
				mod_team: ($('input[name=mod_team]').is(":checked") ? '1' : '0'),
				mod_gallery: ($('input[name=mod_gallery]').is(":checked") ? '1' : '0'),
				mod_promo: ($('input[name=mod_promo]').is(":checked") ? '1' : '0'),
				mod_podcasts: ($('input[name=mod_podcasts]').is(":checked") ? '1' : '0'),
				//@endif
				cog_metadata: ($('input[name=cog_metadata]').is(":checked") ? '1' : '0'),
				cog_albumdata: ($('input[name=cog_albumdata]').is(":checked") ? '1' : '0'),
                step: "2" })
                .done(function(data) {
                    if(data.success){
                        $('.check2').removeClass('d-none');
                        $('#collapse3').collapse("toggle");
                        $('#request').prop('disabled',false);
						@if(str_contains($siteData->apps_themes,'2'))
							$("#preview").contents().find('.sidebar_navigation_wrapper').attr('data-state','closed');
						@endif
                    }
                });
            $('.btn-stepsave').prop('disabled',false);
            $('#request').prop('disabled',false);
        }

        if(step == '4'){
			$('.btn-stepsave[data-id="4"]').prop('disabled',true);
		
			
			$('.txtSlBgType').removeClass('text-danger');
			$('.errorSlBgType').addClass('d-none');
            $('.collapse4').prop("disabled", false);
            $('.btn-stepsave').text('Processando...');
			

			$('.txtSlBgType').removeClass('text-danger');
			$('.errorSlBgType').addClass('d-none');
			
			

            var fd = new FormData();

		
				var isBgType = ($('#bgType').val() == '3' ? '3' : '1');
				fd.append('bg_type',isBgType);
				if(isBgType == '3'){
					var bgFile = $('#bg-upload')[0].files;
					fd.append('bgImg',bgFile[0]);
				}else{
					fd.append('bg_color',(isBgType == '1' ? $('input[name=picBg]').val() : null));
				}
			
			
			
            var logoFile = $('#logo-upload')[0].files;
            fd.append('logoImg',logoFile[0]);
            var iconFile = $('#icon-upload')[0].files;
            fd.append('iconImg',iconFile[0]);

            fd.append('step','3');

			      //fd.append('theme',($('#theme_select').val() ? ($('#theme_select').val() == '2' ? '2' : '1') : '1'));
            fd.append('theme','2');
			
            fd.append('color1',$('input[name=color1]').val());
            fd.append('color2',$('input[name=color2]').val());
            fd.append('color3',$('input[name=color3]').val());
          
            $.ajax({
                url: '{{ route('radio.apps.r.android-doStep') }}',
                type: 'POST',
                data: fd,
                contentType: false,
                processData: false,
                statusCode: {
                    422: function(data){
                        let response = data.responseJSON;
                            $.each(response.errors, function( key, value ) {
                                var errorVal = response.errors[key];
                                $('.alert-custom-error-'+key).removeClass('d-none').html(errorVal.join('<br>'));
                            });
                        $('.btn-stepsave[data-id="4"]').text('Salvar e continuar');
						$('.btn-stepsave[data-id="4"]').prop('disabled',false);
                    },
                    200: function(data){
                        $('.check3').removeClass('d-none');
                        $('#collapse4').collapse("toggle");
						$('#request').prop('disabled',false);
						$('.btn-stepsave[data-id="4"]').prop('disabled',false);
                    },
					500: function(data){
						
						Sweetalert2.fire({
							icon: ('error'),
							html: ('<h3>Oops</h3><p class="mb-0">Falha ao tentar enviar, verifique todos os campos</p>'),
							confirmButtonText: 'Entendi',
							showConfirmButton: true
						});
						
						$('.btn-stepsave[data-id="4"]').text('Salvar e continuar');
						$('.btn-stepsave[data-id="4"]').prop('disabled',false);
					}
                }

            });
            
            $("#finish").attr("disabled", false);
        }
		
		$('#collapse'+step).removeClass('block block-mode-loading-refresh block-mode-loading');
    }

</script>
</body>
</html>