@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;}
		
		
	.selectBgContainer {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      background: #e9e9e9;
      padding: 5px;
      border-radius: 5px;
	}

    .image-option {
	  position: relative;
      width: 80px;
      height: 80px;
      cursor: pointer;
      border-radius: 4px;
      border: 1px solid #c7c7c7;
      background-size: cover;
      background-position: center;
      transition: border 0.2s ease;
      overflow: hidden;
	}
	
    .image-option.selected {
      border-color: #00b894;
    }
	
	.image-option.selected::after {
	  content: '';
	  position: absolute;
	  top: 0; left: 0;
	  width: 100%; height: 100%;
	  background-color: rgba(0, 184, 148, 0.7);
	  pointer-events: none; /* permite clique passar para a div */
	}
		
    </style>
    <link href="/assets/customize/css/colorpicker.css" media="screen" rel="stylesheet" type="text/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">
			@php
			<div class="py-5 text-center"><h2>Página em manutenção</h2></div>
			@endphp
            <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>
							@if(str_contains($siteData->apps_themes,'2'))
							<div class="mb-3">
								{{ __('radio.app_theme_label') }}
								<select class="form-select" id="theme_select">
									<option value="1" {{ (isset($appData) && $appData->theme == '1' ? 'selected' : '') }}>{{ __('radio.app_theme_01') }}</option>
									<option value="2" {{ (isset($appData) && $appData->theme == '2' ? 'selected' : '') }}>{{ __('radio.app_theme_02') }}</option>
								</select>
							</div>
							@endif
                            <button type="button" class="btn btn-lg btn-primary w-100 btn-stepsave" 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>
							@if(str_contains($siteData->apps_themes,'2'))
							<div class="stAppNew @if(isset($appData) && $appData->theme != 2) d-none @endif">
							<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 withoutborder {{ (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>
							@endif
							
							
							<h3>{{ __('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" 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">

							<div class="stAppNewF mt-2 @if(isset($appData) && $appData->theme != 2) d-none @endif">
									 <div class="mb-3">
										<h5 class="txtSlBgType mb-1">{{ __('radio.app_bg_type') }}</h5>
										<select class="form-select" name="slBgType" id="bgType">
											<option value="">{{ __('radio.app_bg_type_question') }}</option>
											<option value="1">{{ __('radio.app_bg_solid_color') }}</option>
											<option value="2">{{ __('radio.app_bg_image') }}</option>
										</select>
										<span class="text-bold text-danger errorSlBgType d-none">{{ __('radio.app_bg_type_error_continue') }}</span>
										
										<div class=" mt-2 bgTypeColor d-none">
										
										<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="#ffffff" style="background: #ffffff"></i>
												<input type="hidden" name="picBg" value="#000000" />
								</div>
                                <div class="help-block"></div>
                            </div>
										
										</div>
										
										<div class=" mt-2 bgTypeImg d-none">
											<div class="selectBgContainer" id="imageSelector">
												<div class="image-option" style="background-image: url('https://android-content.brascast.com/configs/modelo-2/assets/bg/01.jpg')" data-id="01"></div>
												<div class="image-option" style="background-image: url('https://android-content.brascast.com/configs/modelo-2/assets/bg/02.jpg')" data-id="02"></div>
												<div class="image-option" style="background-image: url('https://android-content.brascast.com/configs/modelo-2/assets/bg/03.jpg')" data-id="03"></div>
												<div class="image-option" style="background-image: url('https://android-content.brascast.com/configs/modelo-2/assets/bg/04.jpg')" data-id="04"></div>
												<div class="image-option" style="background-image: url('https://android-content.brascast.com/configs/modelo-2/assets/bg/05.jpg')" data-id="05"></div>
												<div class="image-option" style="background-image: url('https://android-content.brascast.com/configs/modelo-2/assets/bg/06.jpg')" data-id="06"></div>
												<div class="image-option" style="background-image: url('https://android-content.brascast.com/configs/modelo-2/assets/bg/07.jpg')" data-id="07"></div>
												<div class="image-option" style="background-image: url('https://android-content.brascast.com/configs/modelo-2/assets/bg/08.jpg')" data-id="08"></div>
												<div class="image-option" style="background-image: url('https://android-content.brascast.com/configs/modelo-2/assets/bg/09.jpg')" data-id="09"></div>
												<div class="image-option" style="background-image: url('https://android-content.brascast.com/configs/modelo-2/assets/bg/10.jpg')" data-id="10"></div>
											</div>
										</div>
										
										
									 </div>
								</div>

                            <div class="mb-3 imgBG @if(isset($appData) && $appData->theme == 2) d-none @endif">
                                <h4>{{ __('radio.app_bg_title') }}</h4>
                                <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_schedule_text') }}</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_top_text') }}</label>
                                <div class="color-input">
                                    <i data-background="{{ (isset($appData) && $appData->p2 ? $appData->p2 : '#ff') }}" style="background: {{ (isset($appData) && $appData->p2 ? $appData->p2 : '#000000') }}"></i>
                                    <input type="hidden" name="color2" value="{{ (isset($appData) && $appData->p2 ? $appData->p2 : '#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_menu_effect') }}</label>
                                <div class="color-input">
                                    <i data-background="{{ (isset($appData) && $appData->p3 ? $appData->p3 : '#000000') }}" style="background: {{ (isset($appData) && $appData->p3 ? $appData->p3 : '#000000') }}"></i>
                                    <input type="hidden" name="color3" value="{{ (isset($appData) && $appData->p4 ? $appData->p4 : '#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_other_elements') }}</label>
                                <div class="color-input">
                                    <i data-background="{{ (isset($appData) && $appData->p4 ? $appData->p4 : '#000000') }}" style="background: {{ (isset($appData) && $appData->p4 ? $appData->p4 : '#000000') }}"></i>
                                    <input type="hidden" name="color4" value="{{ (isset($appData) && $appData->p4 ? $appData->p4 : '#000000') }}" />
                                </div>
                                <div class="help-block"></div>
                            </div>

                            <button type="button" class="mt-2 btn btn-lg btn-primary w-100 btn-stepsave" 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 style="width: 100%;padding-bottom: 20px;position: relative; 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',(isset($appData) && $appData->theme ? $appData->theme : '1')) }}" 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>

    function limit(element)
    {
        if(element.value.length >= 30) {
            element.value = element.value.substr(0, 30);
        }
    }
    function hexToRGB(hex, alpha) {
        var r = parseInt(hex.slice(1, 3), 16),
            g = parseInt(hex.slice(3, 5), 16),
            b = parseInt(hex.slice(5, 7), 16);

        if (alpha) {
            return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
        } else {
            return "rgb(" + r + ", " + g + ", " + b + ")";
        }
    }
	
	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 = '1'){
		if(theme == '2'){
			
			if(type == 'picBg'){
				var colorBgCustom = $('input[name=picBg]').val();
				$("#preview").contents().find("#styleBGCustom").html('body, .sidebar__background, .sidebar_header, .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('.current_data .music_status, .current_data .music_name{color: '+color2+'!important;} .music_play_btn{background: '+color2+'!important;} .home_action_btn{background-color: '+final3Btns+'!important;}');
			}else if(type=='color1'){
				var color1 = $('input[name=color1]').val();
				$("#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;}');
			}else if(type=='color3'){
				var color3 = $('input[name=color3]').val();
				$("#preview").contents().find("#styleChangeCor3").html('.sidebar__background{background: '+color3+'!important;}');
			}
		}else{
			if(type=='color2') {
				var color2 = $('input[name=color2]').val();
				$("#preview").contents().find("#styleChangeCor").html('.mainBottom .infors{color: '+color2+'!important;}');
			}else if(type=='color1'){
				var color1 = $('input[name=color1]').val();
				$("#preview").contents().find("#styleChangeBg").html('.bgButons{color: '+color1+'!important;}');
			}else if(type=='color3'){
				var color3 = $('input[name=color3]').val();
				$("#preview").contents().find("#styleChangeCor3").html('.bgButons{background: '+color3+'!important;} .bgMenuItem .borderMenuIcon{background: '+color3+'!important;}');
			}else if(type=='color4'){
				var color4 = $('input[name=color4]').val();
				$("#preview").contents().find("#styleChangeCor4").html('.onairInfo h6{color: '+color4+'!important;} .rName{color: '+color4+'!important;} #menuOpen{color: '+color4+'!important;}');

			}
		}
    }

    $('.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;
        image.onload = function() {
            $('.alert-error-bg').addClass('d-none');
            var img = e.target.result;
            $("#preview").contents().find("#styleChangeBGCor").html('.bgOne { background: url("'+img+'") !important; background-size: 100% 100% !important; background-position: center bottom !important; min-height: 100%; position: fixed; z-index: -99!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);
		
		});
	}
	
	
	document.getElementById('bgType').addEventListener('change', function() {
		$('.txtSlBgType').removeClass('text-danger');
		$('.errorSlBgType').addClass('d-none');
		var selBgTypeVal = this.value;
		if(selBgTypeVal == '2'){
			document.querySelector('.bgTypeColor').classList.add('d-none');
			document.querySelector('.bgTypeImg').classList.remove('d-none');
		}else{
			var colorBgCustom = $('input[name=picBg]').val();
			$("#preview").contents().find("#styleBGCustom").html('body, .sidebar__background, .sidebar_header, .sidebar_navigation{background-color:'+colorBgCustom+'!important}');
			document.querySelector('.bgTypeImg').classList.add('d-none');
			document.querySelector('.bgTypeColor').classList.remove('d-none');
		}
	});
	
	 const selector = document.getElementById('imageSelector');
    const output = document.getElementById('selectedImage');

    selector.addEventListener('click', (e) => {
      if (e.target.classList.contains('image-option')) {
        selector.querySelectorAll('.image-option').forEach(el => el.classList.remove('selected'));
        e.target.classList.add('selected');
		var selclickValImg = (e.target.dataset.id ? e.target.dataset.id : '01');
		var colorpvImg = {'01': '#ffb025','02': '#1a9fea', '03': '#061340','04': '#0d161d','05': '#d10402','06': '#033919','07': '#1e8b2e','08': '#6f1d80','09': '#f84f8a','10': '#ededed'};
		$("#preview").contents().find("#styleBGCustom").html('body{background:url("https://android-content.brascast.com/configs/modelo-2/assets/bg/'+selclickValImg+'.jpg")!important} .sidebar__background, .sidebar_header, .sidebar_navigation{background-color:'+colorpvImg[selclickValImg]+'!important}');
      }
    });
	
	
	
	
	

    $(".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 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'),
				@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'){
			var inpSelectTheme = document.querySelector('#theme_select');
			var thSelected = (inpSelectTheme ? inpSelectTheme.value : '1');
			
			if(inpSelectTheme && thSelected != '1' && !$('select[name=slBgType]').val()){ $('.errorSlBgType').removeClass('d-none'); $('.txtSlBgType').addClass('text-danger'); $('.btn-stepsave').prop('disabled',false); return false; }
			
			$('.txtSlBgType').removeClass('text-danger');
			$('.errorSlBgType').addClass('d-none');
            $('.collapse4').prop("disabled", false);
            $('.btn-stepsave').text('Processando...');
			

            var fd = new FormData();

			if(thSelected == '2'){
				var isBgType = ($('#bgType').val() == '2' ? '2' : '1');
				fd.append('bg_type',isBgType);
				if(isBgType == '2'){
					var selectedImgCont = document.querySelector('.selectBgContainer .image-option.selected');
					fd.append('bg_img',selectedImgCont.dataset.id);
				}else{
					fd.append('bg_color',(isBgType == '1' ? $('input[name=picBg]').val() : null));
				}
			}else{	
				var bgFile = $('#bg-upload')[0].files;
				fd.append('bgImg',bgFile[0]);
			}
			
			
            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('color1',$('input[name=color1]').val());
            fd.append('color2',$('input[name=color2]').val());
            fd.append('color3',$('input[name=color3]').val());
            fd.append('color4',$('input[name=color4]').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').text('Salvar e continuar');
                    },
                    200: function(data){
                        $('.check3').removeClass('d-none');
                        $('#collapse4').collapse("toggle");
						$('#request').prop('disabled',false);
                    }
                }

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

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