@section('title', __('radio.app_webapp_title'))
@section('head')
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
    <style>
        .list-item {
            margin: 10px 0;
            padding: 10px 0;
            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;
        }
    </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_webapp_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(!$siteData->pwa)

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

                <div class="block block-rounded">
                    <div class="block-content text-center">
                        <i class="fa fa-mobile-alt display-3 mb-3"></i>
                        <h5 class="mb-2">{{ __('radio.app_webapp_no_plan') }}</h5>
                        <p>{{ __('radio.app_webapp_contact_sales') }}</p>
                    </div>
                </div>

            </div>

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

                <div class="block block-rounded">
                    <ul class="nav nav-tabs nav-tabs-block align-items-center">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link active"><i class="fa fa-info-circle me-1"></i> {{ __('radio.app_tab_details') }}</a>
                        </li>

                        <li class="nav-item" role="presentation">
                            <button type="button" class="nav-link chgPwa"><i class="fa fa-cog me-1"></i> {{ __('radio.app_tab_change') }}</button>
                        </li>
                    </ul>
                    <div class="block-content p-0">
                        <table class="table table-striped table-vcenter">
                            <thead>
                            <tr>
                                <th class="text-center fw-semibold" style="width:250px">{{ __('radio.app_status') }}</th>
                                <th><span class="fs-xs fw-semibold d-inline-block py-1 px-3 rounded-pill bg-primary text-white">{{ __('radio.app_status_published') }}</span></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <th class="fw-normal text-center">URL</th>
                                <td class="fw-bold">https://{{ $siteData->domain }}/app/</td>
                            </tr>
                            <tr>
                                <th class="fw-normal text-center">{{ __('radio.app_total_downloads') }}</th>
                                <td class="fw-bold">{{ $appData->downloads }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    @else
        <div class="row">
            <div class="col-md-2 mb-4">
                @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_50') }}</small>
                                </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_now') }} <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_full') }}</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_alt') }}</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_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>
                                <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">
                                <div class="mb-3">
                                    <h4>{{ __('radio.app_bg_title') }}</h4>
                                    <p class="info">{{ __('radio.app_bg_desc') }}</p>
                                    <select class="form-select" id="bgType">
                                        <option value="">{{ __('radio.app_bg_select_type') }}</option>
                                        <option value="1">{{ __('radio.app_bg_only_color') }}</option>
                                        <option value="3">{{ __('radio.app_bg_color_and_image') }}</option>
                                    </select>
                                    <div class="d-flex mb-0 mt-4 bg-primary p-2 text-white rounded block-bgcolor d-none">
                                        <label>{{ __('radio.app_bg_select_color') }}</label>
                                        <div class="color-input">
                                            <i data-background="#ffffff" style="background: #ffffff"></i>
                                            <input type="hidden" name="color1" value="#ffffff" />
                                        </div>
                                        <div class="help-block"></div>
                                    </div>

                                    <div class="block-bgimg mt-3 d-none">
                                        <h4 class="mb-1">{{ __('radio.app_bg_image') }}</h4>
                                        <div class="d-flex w-100 gap-3">
                                            <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 600</strong> {{ __('radio.app_pixels') }}
                                            </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-3">
                                        <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">500 x 500</strong> {{ __('radio.app_pixels') }}
                                        </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-3">
                                        <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 d-none">
                                            <i class="fa fa-arrows me-1"></i>
                                            {{ __('radio.app_dimension') }} <strong class="ms-1 me-1">1024 x 1024</strong> {{ __('radio.app_pixels') }}
                                        </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">512 x 512</strong> {{ __('radio.app_pixels') }}
                                        </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">
                                            Prévia do ícone
                                        </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_texts_icons_webapp') }}</label>
                                    <div class="color-input">
                                        <i data-background="#000000" style="background: #000000"></i>
                                        <input type="hidden" name="color2" value="#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($siteData->pwa)
                                    <button id="request" class="btn btn-lg btn-primary w-100">{{ __('radio.app_webapp_publish') }}</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_webapp') }}</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.webapp-preview') }}" id="preview" allowtransparency="true" frameborder="0" style="border-radius:5px; height: 600px;"></iframe>
                    </div>
                </div>
            </div>

        </div>
    @endif

    @endif

</div>

</div>

</main>



@include('includes/footer')

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

	$(document).on('click','.chgPwa',function(){
		
		 Sweetalert2.fire({
            html: '<h4 class="mb-2">Deseja realmente alterar o WebApp?</h4> <small>Esta ação desabilitará o WebApp enquanto está fazendo a alteração</small>?',
            showCancelButton: true,
            confirmButtonText: 'Confirmar',
            cancelButtonText: 'Cancelar',
        }).then((result) => {
            if (result.isConfirmed) {
				
				Sweetalert2.fire({
                    title:"<h3 class='changeTitle mb-0 mt-1'>Processando...</h3>",
                    allowEscapeKey: false,
                    allowOutsideClick: false,
                    showConfirmButton: false,
                });
				Sweetalert2.showLoading();
				$.post("/radio/app/webAppReDo", { func: "redo" }, function( data ) {
					location.reload();
				}, "json");
			}
		});
		

	});
	
	


    function limit(element)
    {
        if(element.value.length >= 50) {
            element.value = element.value.substr(0, 50);
        }
    }
    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 fc = $('input[name=color2]').val();
			$("#preview").contents().find("#styleChangeCor").html('.fcolor{color: '+fc+'!important;} .icon-home,.icon-settings{color: '+fc+'!important;} .fa-play{color: '+fc+'!important;} .now-block{border: 2px solid '+fc+'!important;}');
		} else if(type=='color1'){
			updateBgPreview();
		}
	}
	
	function updateBgPreview(){
		var type = $("#bgType").val();
		var bc = $('input[name=color1]').val();
		var imgBG = $('#baseBG').val();

		if(type == '1'){
			$("#preview").contents().find("#styleChangeBGCor").html(
				'body{background: '+bc+'!important;}'
			);
		} else if(type == '2'){
			$("#preview").contents().find("#styleChangeBGCor").html(
				'body{background: url("'+imgBG+'")!important; background-position: center!important; background-size: cover!important;}'
			);
		} else if(type == '3'){
			var rgba1 = hexToRGB(bc, 0.32);
			var rgba2 = hexToRGB(bc, 1.0);
			$("#preview").contents().find("#styleChangeBGCor").html(
				'body{background: '+bc+'!important;} '+
				'.bgMenu{background: '+bc+'!important;} '+
				'.bgMenuItem{background: '+bc+'!important;} '+
				'.bgOne{ background:linear-gradient(to bottom, '+rgba1+', '+rgba2+'), url("'+imgBG+'")!important; background-size: cover!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);
            }
        });
    });

    $("#bgType").change(function() {
        if(this.value == '1'){
            $('.alert-error-bg').addClass('d-none');
            $('.block-bgimg').addClass('d-none');
            $('.block-bgcolor').removeClass('d-none');
        }else if(this.value == '2'){
            $('.alert-error-bg').addClass('d-none');
            $('.block-bgcolor').addClass('d-none');
            $('.block-bgimg').removeClass('d-none');
        }else if(this.value == '3'){
            $('.alert-error-bg').addClass('d-none');
            $('.block-bgcolor').removeClass('d-none');
            $('.block-bgimg').removeClass('d-none');
        }else{
            $('.block-bgcolor').addClass('d-none');
            $('.block-bgimg').addClass('d-none');
        }
    });


    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-icon').addClass('d-none');
			$("#baseBG").val(e.target.result);
			updateBgPreview();
		};
		image.onerror = function(){
			$("#bg-upload").val('');
			$("#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);
        }
    });


    $('#request').click(function () {

        $('#request').attr('disabled',true).text('Publicando...');

        Sweetalert2.fire({
            title:"Publicando...",
            allowEscapeKey: false,
            allowOutsideClick: false,
            showConfirmButton: false,
            didOpen: () => {
                Sweetalert2.showLoading();
            }
        });

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

    });

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

        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 .title-app').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.webapp-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);
            $("#preview").contents().find('#menuOpen').click();
            $.post("{{ route('radio.apps.r.webapp-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'),
                step: "2" })
                .done(function(data) {
                    if(data.success){
                        $('.check2').removeClass('d-none');
                        $('#collapse3').collapse("toggle");
                    }
                });
            $('.btn-stepsave').prop('disabled',false);
        }

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

              var fd = new FormData();


            var logoFile = $('#logo-upload')[0].files;
            fd.append('logoImg',logoFile[0]);
            var iconFile = $('#icon-upload')[0].files;
            fd.append('iconImg',iconFile[0]);

            if($('#bgType').val() == '2' || $('#bgType').val() == '3'){
                var bgFile = $('#bg-upload')[0].files;
                fd.append('bgImg',bgFile[0]);
            }

            fd.append('step','3');
            fd.append('bgType',$('#bgType').val());

            fd.append('color1',$('input[name=color1]').val());
            fd.append('color2',$('input[name=color2]').val());
            $.ajax({
                url: '{{ route('radio.apps.r.webapp-step') }}',
                type: 'POST',
                data: fd,
                contentType: false,
                processData: false,
                statusCode: {
                    422: function(data){
                        let response = data.responseJSON;
                        $('.alert-custom-error-logoImg').addClass('d-none').empty();
                        $('.alert-custom-error-iconImg').addClass('d-none').empty();

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

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