@section('title', __('site.menu_item_6_sub_4'))
@section('head')
    <link href="/assets/css/thumb.css" media="screen" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/assets/js/plugins/dropzone/min/dropzone.post.min.css">
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
    <style>
        .bg-position-selection {
            background-color: #d2d6de;
            border: 5px solid #d2d6de;
            border-radius: 3px;
            width: 100%;
            max-width: 380px;
        }
        .bg-position-selection .bg-page-top {
            overflow: hidden;
        }
        .bg-position-selection .bg-page-top .page-button {
            background-color: #ecf0f5;
            height: 10px;
            width: 10px;
            float: left;
            border-radius: 5px;
            margin: 3px 0px 5px 3px;
        }

        .bg-position-selection .bg-content {
            background-color: #ecf0f5;
            overflow: hidden;
            padding: 2px;
        }
        .bg-position-selection .bg-content .bg-position {
            width: 33.333%;
            padding: 2px;
            height: 70px;
            float: left;
            cursor: pointer;
        }
        .bg-position-selection .bg-content .bg-position .bg-postion-content {
            background-color: #d2d6de;
            height: 100%;
        }
        .bg-position-selection .bg-content .bg-position .bg-postion-content:hover {
            background-color: #c8ccd4;
        }
        .bg-position-selection .bg-content .bg-position.selected .bg-postion-content,
        .bg-position-selection .bg-content .bg-position.selected .bg-postion-content:hover {
            background-color: #239e76;
        }
		.mod {
			width: 100%;
			height: 110px;
			margin-bottom:10px;
			cursor: pointer;
			background-size: cover !important;
		}
    </style>
@endsection
@include('includes/header')
@include('includes/topSite')
<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">
                        {{ __('site.menu_item_6_sub_4') }}
                    </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('site.home.r') }}">{{ __('general.top_menu_item_site') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0)">{{ __('site.menu_item_6') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('site.menu_item_6_sub_4') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    @if (\Session::has('success'))
        <div class="alert alert-primary alert-icon alert-dismissible fade show" role="alert">
            <b>{!! \Session::get('success') !!}</b>
        </div>
        @php Session::forget('success'); @endphp
    @endif

    <div class="row">
        <div class="col-md-7">
            <div class="block block-rounded">
                <div class="block-content">
					<div class="col-lg-8">
                    <form action="{{ route('site.theme.bg.u.do') }}" method="POST">
                    <input type="hidden" name="bg_img" id="bg_img" value="{{ $siteData->bg_img }}" />
                    <input type="hidden" name="bg_rmv" id="bg_rmv" value="" />

					@if($siteData->id == '10443')
						<div class="mb-3 h-width">
							<label class="form-label">{{ __('site.page_bg_type') }}</label>
							<select name="bg_type" class="form-select bgType">
							<option value="0" {{ ($siteData->bg_type == '0' ? 'selected' : '') }}>{{ __('site.page_bg_type_0') }}</option>
							<option value="1" {{ ($siteData->bg_type == '1' ? 'selected' : '') }}>{{ __('site.page_bg_type_1') }}</option>
							</select>
						</div>
						
						
						<div class="row allBgPred {{ ($siteData->bg_type == '0' ? 'd-none' : '') }}">
						  <div class="col-md-4">
							<div class="mod" style="background:url(https://minhawebradio.com/assets/backgrounds/bg-01-min.jpg)"></div>
						  </div>
						  <div class="col-md-4">
							<div class="mod" style="background:url(https://minhawebradio.com/assets/backgrounds/bg-02-min.jpg)"></div>
						  </div>
						  <div class="col-md-4">
							<div class="mod" style="background:url(https://minhawebradio.com/assets/backgrounds/bg-03-min.jpg)"></div>
						  </div>
						  <div class="col-md-4">
							<div class="mod" style="background:url(https://minhawebradio.com/assets/backgrounds/bg-04-min.jpg)"></div>
						  </div>
						  <div class="col-md-4">
							<div class="mod" style="background:url(https://minhawebradio.com/assets/backgrounds/bg-05-min.jpg)"></div>
						  </div>
						  <div class="col-md-4">
							<div class="mod" style="background:url(https://minhawebradio.com/assets/backgrounds/bg-06-min.jpg)"></div>
						  </div>
						  <div class="col-md-4">
							<div class="mod" style="background:url(https://minhawebradio.com/assets/backgrounds/bg-07-min.jpg)"></div>
						  </div>
						  <div class="col-md-4">
							<div class="mod" style="background:url(https://minhawebradio.com/assets/backgrounds/bg-08-min.jpg)"></div>
						  </div>
						  <div class="col-md-4">
							<div class="mod" style="background:url(https://minhawebradio.com/assets/backgrounds/bg-09-min.jpg)"></div>
						  </div>
						  <div class="col-md-4">
							<div class="mod" style="background:url(https://minhawebradio.com/assets/backgrounds/bg-10-min.jpg)"></div>
						  </div>
						  <div class="col-md-4">
							<div class="mod" style="background:url(https://minhawebradio.com/assets/backgrounds/bg-11-min.jpg)"></div>
						  </div>
						  <div class="col-md-4">
							<div class="mod" style="background:url(https://minhawebradio.com/assets/backgrounds/bg-12-min.jpg)"></div>
						  </div>
						  <div class="col-md-4">
							<div class="mod" style="background:url(https://minhawebradio.com/assets/backgrounds/bg-13-min.jpg)"></div>
						  </div>
					</div>
					@endif
                    <div class="mb-3 h-width">
                        <label class="form-label">{{ __('site.page_bg_opacity') }}</label>
                        <select name="opacity" class="form-select">
                            <option value="100" {{ ($siteData->bg_opacity == '100' ? 'selected="selected"' : '') }}>100%</option>
                            <option value="90" {{ ($siteData->bg_opacity == '90' ? 'selected="selected"' : '') }}>90%</option>
                            <option value="80" {{ ($siteData->bg_opacity == '80' ? 'selected="selected"' : '') }}>80%</option>
                            <option value="70" {{ ($siteData->bg_opacity == '70' ? 'selected="selected"' : '') }}>70%</option>
                            <option value="60" {{ ($siteData->bg_opacity == '60' ? 'selected="selected"' : '') }}>60%</option>
                            <option value="50" {{ ($siteData->bg_opacity == '50' ? 'selected="selected"' : '') }}>50%</option>
                            <option value="40" {{ ($siteData->bg_opacity == '40' ? 'selected="selected"' : '') }}>40%</option>
                            <option value="30" {{ ($siteData->bg_opacity == '30' ? 'selected="selected"' : '') }}>30%</option>
                            <option value="20" {{ ($siteData->bg_opacity == '20' ? 'selected="selected"' : '') }}>20%</option>
                            <option value="10" {{ ($siteData->bg_opacity == '10' ? 'selected="selected"' : '') }}>10%</option>
                            <option value="0" {{ ($siteData->bg_opacity == '0' ? 'selected="selected"' : '') }}>0%</option>
                        </select>
                    </div>

                    <div class="mb-3 h-width">
                        <label class="form-label">{{ __('site.page_bg_repeat') }}</label>
                        <select name="repeat" class="form-select">
                            <option value="no-repeat" {{ ($siteData->bg_repeat == 'no-repeat' ? 'selected="selected"' : '') }}>{{ __('site.page_bg_repeat_0') }}</option>
                            <option value="repeat-x" {{ ($siteData->bg_repeat == 'repeat-x' ? 'selected="selected"' : '') }}>{{ __('site.page_bg_repeat_x') }}</option>
                            <option value="repeat-y" {{ ($siteData->bg_repeat == 'repeat-y' ? 'selected="selected"' : '') }}>{{ __('site.page_bg_repeat_y') }}</option>
                            <option value="repeat" {{ ($siteData->bg_repeat == 'repeat' ? 'selected="selected"' : '') }}>{{ __('site.page_bg_repeat_xy') }}</option>
                        </select>
                    </div>
					
					@if($siteData->bg_img)
					<div class="mb-3 h-width">
                        <label class="form-label">{{ __('site.page_bg_size') }}</label>
                        <select name="size" class="form-select">
                            <option value="0" {{ ($siteData->bg_size == '0' ? 'selected="selected"' : '') }}>{{ __('site.action_no') }}</option>
                            <option value="1" {{ ($siteData->bg_size == '1' ? 'selected="selected"' : '') }}>{{ __('site.page_bg_size_1') }}</option>
                        </select>
                    </div>
					@endif

                    <div class="mb-3">
                        <input type="hidden" name="position" value="{{ $siteData->bg_pos }}">
                        <label class="form-label">{{ __('site.page_bg_position') }}</label>
                        <div class="bg-position-selection">
                            <div class="bg-page-top">
                                <div class="page-button"></div>
                                <div class="page-button"></div>
                                <div class="page-button"></div>
                            </div>
                            <div class="bg-content">
                                <div class="bg-position {{ ($siteData->bg_pos == 'left top' ? 'selected' : '') }}" data-position="left top">
                                    <div class="bg-postion-content"></div>
                                </div>
                                <div class="bg-position {{ ($siteData->bg_pos == 'center top' ? 'selected' : '') }}" data-position="center top">
                                    <div class="bg-postion-content"></div>
                                </div>
                                <div class="bg-position {{ ($siteData->bg_pos == 'right top' ? 'selected' : '') }}" data-position="right top">
                                    <div class="bg-postion-content"></div>
                                </div>
                                <div class="bg-position {{ ($siteData->bg_pos == 'left center' ? 'selected' : '') }}" data-position="left center">
                                    <div class="bg-postion-content"></div>
                                </div>
                                <div class="bg-position {{ ($siteData->bg_pos == 'center center' ? 'selected' : '') }}" data-position="center center">
                                    <div class="bg-postion-content"></div>
                                </div>
                                <div class="bg-position {{ ($siteData->bg_pos == 'right center' ? 'selected' : '') }}" data-position="right center">
                                    <div class="bg-postion-content"></div>
                                </div>
                                <div class="bg-position {{ ($siteData->bg_pos == 'left bottom' ? 'selected' : '') }}" data-position="left bottom">
                                    <div class="bg-postion-content"></div>
                                </div>
                                <div class="bg-position {{ ($siteData->bg_pos == 'center bottom' ? 'selected' : '') }}" data-position="center bottom">
                                    <div class="bg-postion-content"></div>
                                </div>
                                <div class="bg-position {{ ($siteData->bg_pos == 'right center' ? 'selected' : '') }}" data-position="right bottom">
                                    <div class="bg-postion-content"></div>
                                </div>
                            </div>
                        </div>
                    </div>

					</div>

                </div>
                <div class="block-content d-flex align-items-center py-2 border-top">
                    <button type="submit" class="btn btn-primary">{{ __('site.action_save') }}</button>
                    <div class="ml-auto">
                       @if($siteData->bg_img)<button type="button" class="btn btn-sm btn-alt-secondary @if(!$siteData->bg_img)d-none @endif rmBg">{{ __('site.page_bg_remove') }}</button>@endif
                    </div>
                    </form>
                </div>
            </div>
        </div>


        <div class="col-md-5 col-sm-12">
            <div class="block block-rounded">
                <div class="block-content p-0">
                    <p class="mb-0 ps-3 pe-3 pt-2">{{ __('site.page_bg_block_title') }}</p>
                    <hr class="mt-1 mb-0">
                    <div class="ps-3 pe-3 pt-2 pb-2">

                        <div class="imagedDrag {{ ($siteData->bg_img ? '' : 'd-none') }}">
                        <div class="mb-2 mt-1 {{ ($siteData->bg_img ? '' : 'd-none') }}" style="margin: 0 auto; box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.1); ">
                                <div class="unavailable-message {{ (old('type') ? '' : 'd-none') }}">{{ __('site.page_ads_new_block_not') }}</div>
                                <img src="{{ 'https://'.$serverData->name.'/contents/'.session('siteID').'/background/'.$siteData->bg_img }}" class="imgratio" style="max-width:100%">
                        </div>
                        <button type="button" class="btn btn-sm d-block m-auto rounded-pill changeDrag btn-outline-dark mt-3 mb-0">
                            <i class="fa fa-fw fa-edit me-1"></i> {{ __('site.page_post_edit__side_grid3_btn_2') }}
                        </button>
                        </div>

                        <div class="dragDrop {{ ($siteData->bg_img ? 'd-none' : '') }}">
                        <div class="dropzone mt-2 mb-2" action=""></div>

                            <button type="button" class="btn btn-sm rounded-pill d-block m-auto {{ ($siteData->bg_img ? '' : 'd-none') }} xchangeDrag btn-outline-dark mt-3 mb-0">
                                <i class="fa fa-fw fa-xmark me-1"></i> {{ __('site.page_post_edit__side_grid3_btn_1') }}
                            </button>
                        </div>

                    </div>
                </div>
                <div class="block-content border-top ps-2 pe-2 pt-2 pb-2 lar2 {{ ($siteData->bg_img  ? 'd-none' : '') }}">

                    <div class="d-flex align-items-center justify-content-center">
                        <div class="d-flex align-items-center justify-content-between me-4">
                            <div class="me-2">
                                <i class="fa fa-file-image fa-2xl"></i>
                            </div>
                            <div>
                                <div class="fs-sm text-muted mb-2" style="line-height: 1.1;margin-top:-8px;">{{ __('site.site_file_permit') }}</div>
                                <div class="fw-semibold mb-0 fa-sm">{{ __('site.files_jpg_png_webp') }}</div>
                            </div>
                        </div>

                        <div class="d-flex align-items-center justify-content-between me-4">
                            <div class="me-2">
                                <i class="fa fa-floppy-disk fa-2xl"></i>
                            </div>
                            <div>
                                <div class="fs-sm text-muted mb-0" style="line-height: 1.1;">{{ __('site.site_file_size') }}</div>
                                <div class="fw-semibold mb-0">2 MB</div>
                            </div>
                        </div>

                        <div class="d-flex align-items-center justify-content-between">
                            <div class="me-2">
                                <i class="fa fa-arrows-up-down-left-right fa-2xl"></i>
                            </div>
                            <div>
                                <div class="fs-sm text-muted mb-0" style="line-height: 1.1;">{{ __('site.site_file_pixels') }}</div>
                                <div class="fw-semibold mb-0">1920x1080 <small>({{ __('site.page_bg_recommended') }})</small></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>


    </div>

</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 src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script>
    var LNG = '{{ Config::get('app.locale') }}';
    var LNG_DROPHERE = '{{ __('site.site_file_upload') }}</br><small>({{ __('site.site_file_upload_2') }})</small>';
    var LNG_CANCELUP = '{{ __('site.site_file_cancel') }}';
    var LNG_CANCELEDUP = '{{ __('site.site_file_canceled') }}';
    var LNG_REMOVE = '{{ __('site.btn_remove') }}';

    $(document).ready(function() {
        $('.bg-position-selection .bg-content .bg-position').click(function(){
            var $this = $(this);

            $('input[name="position"]').val($this.data('position'));
            $('.bg-position-selection .bg-content .bg-position').removeClass('selected');
            $this.addClass('selected');
        });
    });

    $('body').on('click','.rmBg',function(){
        Sweetalert2.fire({
            title: 'Deseja realmente remover a imagem de fundo?',
            showDenyButton: false,
            showCancelButton: true,
            confirmButtonText: 'Remover',
            cancelButtonText: 'Cancelar',
        }).then((result) => {
            if (result.isConfirmed) {
                $.post( "{{ route('site.theme.u.bg.rm') }}", function( data ) { if(data){location.reload();} });
            }
        });
    });
	
	$('body').on('change','.bgType',function(){
		$('.allBgPred').removeClass('d-none');
	});

</script>
<script src="/assets/js/plugins/dropzone/min/dropzone.min.js"></script>
<script>
    Dropzone.autoDiscover = false;
    $(".dropzone").dropzone({
        url: "{{ route('site.posts.c.uploadAsset') }}",
        addRemoveLinks: true,
        uploadMultiple: false,
        parallelUploads: 1,
        acceptedFiles: 'image/jpeg,image/png,image/gif,image/bmp,image/webp',
        params: {
            type: 'background'
        },
        maxFiles:1,
        init: function() {
            this.on("maxfilesexceeded", function(file) {
                file.previewElement.remove();
            });
        },
        removedfile: function(file) {
            $.post("{{ route('site.posts.c.uploadCanc') }}", { fl: file.xhr.response, type: 'background' }).done(function( data ) { $('#bg_img').val(''); });
            file.previewElement.remove();
            $('.ratio-box').addClass('d-none');
            $('.dropzone').css({
                "min-height": "150px",
                "padding": "20px 20px"
            }).addClass('dz-clickable');
            $('.prevBG').remove();
            this.setupEventListeners();
        },
        success: function (file, response) {
            $('.dz-success-mark').css({
                "top": "-400%",
            });
            var imgName = response;
            $('#bg_img').val(imgName);
            file.previewElement.classList.add("dz-success");
            $('.ratio-box').removeClass('d-none');
            $('<img src="{{ 'https://'.$serverData->name.'/contents/'.session('siteID').'/background/' }}'+imgName+'" style="max-width:100%" class="prevBG">').insertAfter('.imagedDrag');
            $('.dz-image').remove(); $('.dz-details').remove();
            $('.dropzone').css({
                "min-height": "35px",
                "padding": "0px"
            }).removeClass('dz-clickable');
            $('.dz-preview').css({
                "margin": "0px",
            });
            $('.dz-remove').css({
                "margin": "auto",
                "padding": "7px"
            });
            location.reload();
            this.removeEventListeners();
        },
        error: function (file, response) {
            if (file.type !== "image/*") {
                this.removeFile(file);
            }
        }
    });

    $('select[name="type"]').on('change', function () {
        if(this.value == 1){
            if($('#bg_img').val()){
                Dropzone.forElement("div.dropzone").removeAllFiles(true);
            }
            $('.ratio-box').removeClass('d-none');
            $('.dropzone').addClass('d-none');
            $('.lar2').addClass('d-none');
            $('.imgT').addClass('d-none');
            $('.codT').removeClass('d-none');
            $('.unavailable-message').removeClass('d-none');
            $('.saveBtn').prop("disabled",false);
        }else{
            $('.ratio-box').addClass('d-none');
            $('.dropzone').removeClass('d-none');
            $('.lar2').removeClass('d-none');
            $('.imgT').removeClass('d-none');
            $('.unavailable-message').addClass('d-none');
            $('.codT').addClass('d-none');
        }
    });

    $('#name').on('input', function(){
        if($('#name').hasClass('is-invalid')){
            $('#name').removeClass('is-invalid');
            $('#msgerror_name').addClass('d-none');
            $('.nameLab').removeClass('erro-inp');
        }
    });


    $(".changeDrag").click(function() {
        $('.imagedDrag').addClass('d-none');
        $('.dragDrop').removeClass('d-none');
        $('.lar2').removeClass('d-none');
    });
    $(".xchangeDrag").click(function() {
        $('.imagedDrag').removeClass('d-none');
        $('.dragDrop').addClass('d-none');
        $('#bg_img').val('');
        $('.lar2').addClass('d-none');
        $.post(UPLC_URL, { fl: $('#bg_rmv').val(), type: 'background' }).done(function( data ) { $('#bg_rmv').val(''); });
    });

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