@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;}
    </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">

            <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" 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 withoutborder {{ (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>
							<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="mb-3">
                                <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-primary 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-primary 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-primary 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') }}" 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 change(type, color){
        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');

        $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);
            }
        });
    });

    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;}');
        };
        image.onerror = function(){
            $('.logo-wrong').show(); var logo = '/assets-app/blank-app.png';
            $("#file-upload").val('');
        };
    };
    elmFileUpload.addEventListener('change',onFileUploadChange,false);



    $(".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-step') }}", {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');


		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();
			}
		}

		

        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){
        $('.btn-stepsave').prop('disabled',true);
        if(step == '2'){
            $('.collapse2').prop("disabled", false);
            if($('#app_name').val()){
                $.post("{{ route('radio.apps.r.android-step') }}", { name: $('#app_name').val(), step: "1" })
                    .done(function(data) {
                        if(data.success){
                        $('.check1').removeClass('d-none');
                        $('#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-step') }}", {
                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'),
				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);
                    }
                });
            $('.btn-stepsave').prop('disabled',false);
            $('#request').prop('disabled',false);
        }

        if(step == '4'){
            $('.collapse4').prop("disabled", false);
            $('.btn-stepsave').text('Processando...');

            var fd = new FormData();


            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('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-step') }}',
                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");
                    }
                }

            });
            $('.btn-stepsave').prop('disabled',false);
            $("#finish").attr("disabled", false);
        }
    }

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