@section('title', __('radio.alexa_title'))
@section('head')
    <style>
        .clickable {
            width: 0.1px;
            height: 0.1px;
            opacity: 0;
            position: absolute;
            z-index: -1;
        }
        .clickable + label {
            color: #ffffff;
            padding: 5px;
            width: 100%;
        }

        .clickable:focus + label,
        .clickable.has-focus + label,
        .clickable + label:hover {
            color: #ffffff;
        }

        .clickable + label figure {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #ffffff;
            display: block;
            padding: 20px;
            margin: 0 auto 10px;
        }

        .clickable:focus + label figure,
        .clickable.has-focus + label figure,
        .clickable + label:hover figure {
            background-color: #ffffff;
        }

        .clickable + label svg {
            width: 100%;
            height: 100%;
            fill: #f1e5e6;
        }
    </style>
@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.alexa_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.alexa_title') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    @if($skillData->count())
        <div class="row">
            <div class="col-md-12">
                <div class="block block-rounded">
                    <div class="block-content">
                        <div class="py-6 text-center">
                            <i class="fa fa-check-circle text-primary fa-3x d-block mb-2"></i>
                            <h4 class="fw-semibold mb-2">{{ __('radio.alexa_sent_h1') }}</h4>
                            <h6 class="text-muted">{{ __('radio.alexa_sent_h2') }}</h6>
                            <small class="text-muted">{{ __('radio.alexa_sent_deadline') }} {{ date('d/m/Y', strtotime($skillData[0]->created_at.'+15 days')) }}  <span class="badge rounded-pill bg-black-50 align-text-bottom ms-1" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="{{ __('radio.alexa_sent_deadline_info') }}"><i class="fa fa-question"></i> </span></small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

   @else

    @if(!$siteData->alexa)

        <div class="row">
            <div class="col-md-12">
                <div class="block block-rounded">
                    <div class="block-content">
                        <div class="py-6 text-center">
                            <i class="fa fa-triangle-exclamation fa-3x d-block mb-2"></i>
                            <h4 class="fw-semibold mb-2">{{ __('radio.feature_unavailable_plan') }}</h4>
                            <small class="text-muted">{{ __('radio.feature_unavailable_contact') }}</small></div>
                    </div>
                </div>
            </div>
        </div>
    @else
    <div class="row">
        <div class="col-lg-8 col-md-12">
            <div class="block block-rounded">
                <div class="block-content">

                    <form>
                        <div class="mb-4">
                            <label class="form-label" for="example-text-input">{{ __('radio.alexa_label_name') }}</label>
                            <input type="text" class="form-control" id="name" name="val-name">
                            <div class="bg-danger py-2 text-white ps-3 rounded alert-custom-error-name d-none mt-2"></div>
                            <small class="text-muted">{{ __('radio.alexa_help_name') }}</small>
                        </div>

                        <div class="mb-4">
                            <label class="form-label" for="example-text-input">{{ __('radio.alexa_label_invocation') }}</label>
                            <input type="text" class="form-control" id="invocation" name="val-invocation">
                            <div class="bg-danger py-2 text-white ps-3 rounded alert-custom-error-invocation d-none mt-2"></div>
                            <small class="text-muted">{{ __('radio.alexa_help_invocation') }} <b>Rádio BRASCAST</b></small>
                        </div>



                        <div class="mb-3">
                            <h4>{{ __('radio.alexa_images_title') }}</h4>
                            <div class="block-thumbnailimg mt-3">
                                <h5 class="mb-1">{{ __('radio.alexa_thumbnail') }}</h5>
                                <div class="d-flex w-100 gap-1 flex-column"  style="max-width:760px;">
                                    <div class="">
                                        <span class="btn btn-primary w-100 p-0">
                                           <input type="file" name="file-upload" id="thumbnail-upload" class="clickable fl-upload" accept=".png">
                                            <label for="thumbnail-upload"><span>{{ __('radio.action_choose_file') }} &hellip;</span></label>
                                         </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.label_dimension') }}: <strong class="ms-1 me-1">108 x 108</strong> {{ __('radio.label_pixels') }} | {{ __('radio.label_format') }}: <strong class="ms-1 me-1">PNG</strong>
                                    </div>
                                </div>
                                <input type="hidden" name="thumbnail" id="thumbnail" value="">
                            </div>
                            <div class="bg-danger py-2 text-white ps-3 rounded alert-error-thumbnail d-none mt-2">{{ __('radio.alexa_error_thumbnail') }}</div>
                            <div class="bg-danger py-2 text-white ps-3 rounded alert-custom-error-thumbnailImg d-none mt-2"></div>
                        </div>


                        <div class="mb-3">
                            <h4 class="mb-1">{{ __('radio.alexa_icon') }}</h4>
                            <p class="info mb-1">{{ __('radio.alexa_help_icon') }}</p>
                            <div class="d-flex w-100 gap-2 flex-column"  style="max-width:760px;">
                                <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">
                                                        <label for="icon-upload"><span>{{ __('radio.action_choose_file') }} &hellip;</span></label>
                                        </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.label_dimension') }}: <strong class="ms-1 me-1">512 x 512</strong> {{ __('radio.label_pixels') }} | {{ __('radio.label_format') }}: <strong class="ms-1 me-1">PNG</strong>
                                </div>
                            </div>
                            <input type="hidden" name="icon" id="icon" value="">
                            <div class="bg-danger py-2 text-white ps-3 rounded alert-error-icon d-none mt-2">{{ __('radio.alexa_error_icon') }}</div>
                            <div class="bg-danger py-2 text-white ps-3 rounded alert-custom-error-iconImg d-none mt-2"></div>
                        </div>

                </div>
                <div class="block-content py-2 border-top">
                    <button type="button" class="btn btn-primary subStep">{{ __('radio.alexa_submit') }}</button>
                </div>
                </form>
            </div>
        </div>
        <div class="col-lg-4 d-none d-lg-block">
            <div class="block block-rounded">
                <div class="block-content text-center">
                    <img src="/assets/img/alexa.png" class="img-fluid" />
                </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>




    var inputs = document.querySelectorAll( '.clickable' );
    Array.prototype.forEach.call( inputs, function( input ) {
        var label = input.nextElementSibling,
            labelVal = label.innerHTML;

        input.addEventListener('change', function (e) {
            var fileName = '';
            if (this.files && this.files.length > 1)
                fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
            else
                fileName = e.target.value.split('\\').pop();

            if (fileName)
                label.querySelector('span').innerHTML = fileName;
            else
                label.innerHTML = labelVal;
        });

        // Firefox bug fix
        input.addEventListener('focus', function () {
            input.classList.add('has-focus');
        });
        input.addEventListener('blur', function () {
            input.classList.remove('has-focus');
        });
    });








    $(".subStep").click(function(){

        $('.alert-custom-error-name').addClass('d-none');
        $('.alert-custom-error-invocation').addClass('d-none');
        $('.alert-custom-error-thumbnailImg').addClass('d-none');
        $('.alert-custom-error-iconImg').addClass('d-none');

        $('.subStep').prop("disabled",true).text('Processando...');

        var fd = new FormData();


        var bgFile = $('#thumbnail-upload')[0].files;
        fd.append('thumbnailImg',bgFile[0]);

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

        fd.append('name',$('#name').val());
        fd.append('invocation',$('#invocation').val());

        $.ajax({
            url: '{{ route('radio.alexa.r.do') }}',
            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>'));
                    });
                    $('.subStep').prop("disabled",false).text('Enviar para revisão');
                },
                200: function(data){
                    $('.subStep').prop("disabled",false).text('Enviar para revisão');
                    if(data.status){ location.reload(); }
                }
            }

        });





    });
</script>
</body>
</html>