@extends('layouts.app')
@section('title', 'Marketing Popup | Website')

@section('extrastyles')
    <link href="{{ asset('/plugins/colorpicker/css/colorpicker.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('plugins/select2/select2.css') }}">
    <style>
        .select2-container {
            z-index: 99999;
        }
        #popup-editor {
            width: 700px;
            margin: 0 auto 75px;
        }
        .upload-tooltip {
            padding: 15px 30px;
            text-align: center;
            background: #000;
            color: white;
            font-size: 18px;
            opacity: 0.7;
            font-weight: 600;
            border-radius: 25px;
            position: absolute;
            top: 35%;
            right: 37%;
        }
        #popup-editor #popup-image {
            border: 2px solid #ddd;
            margin-bottom: 5px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #popup-editor #popup-body {
            border: 2px solid #ddd;
            text-align: center;
            padding: 15px;
            margin-bottom: 5px;
        }
        #popup-editor #popup-body #popup-title {
            font-size: 28px;
            margin-bottom: 15px;
            text-align: center;
            border: none;
            resize: none;
        }
        #popup-editor #popup-body #popup-text {
            font-size: 16px;
            text-align: center;
            border: none;
            resize: none;
        }
        #popup-editor #popup-form {
            border: 2px solid #ddd;
            padding: 15px;
            height: 150px;
            position: relative;
        }
        #popup-editor #popup-form #popup-fields {
            text-align: center;
            margin-top: 20px;
            font-size: 16px;
        }
        #popup-editor #popup-form #submit-color {
            position: absolute;
            border-radius: 100px;
            background-color: #72CEE0;
            width: 100px;
            height: 100px;
            bottom: -50px;
            left: 300px;
            text-align: center;
            padding-top: 25px;
            color: white;
            z-index: 1;
            border: 2px solid #ddd;
        }
        #popup-editor #popup-form #popup-fields .popup-field-left {
            margin-right: 10px;
            padding-top: 7px;
            height: 34px;
            width: 40%;
            display: inline-block;
            background-color: #ddd;
            color: white;
        }
        #popup-editor #popup-form #popup-fields .popup-field-right {
            margin-left: 10px;
            padding-top: 7px;
            height: 34px;
            width: 40%;
            display: inline-block;
            background-color: #ddd;
            color: white;
        }
        #settings-editor {
            width: 700px;
            margin: 0 auto;
        }
        #settings-editor #coupon-image {
            border: 2px solid #ddd;
            margin-top: 15px;
            margin-bottom: 15px;
            position: relative;
        }
        #popup-editor img {
            max-width: 100%;
        }
        #coupon-image img {
            max-width: 100%;
        }

    </style>
@endsection

@section('content')
    <div class="studio98_websters">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title2">
                        <div class="row">
                            <div class="col-md-4">
                                <h5>Website Pop Up</h5>
                            </div>

                            <div class="col-md-3">
                                @if( optional($popup)->active == 0 )
                                    <a class="btn btn-primary" href="{{ website_url('marketing-popup/enable') }}">Popup is Disabled, enable it now.</a>
                                @else
                                    <a class="btn btn-warning" href="{{ website_url('marketing-popup/disable') }}">Popup is Enabled, disable it now.</a>
                                @endif
                            </div>
                            @if($totalAvailableRegions > 1 )
                                <div class="col-md-5">
                                    <div style="width: 220px; padding: 0 20px; float: left">
                                        {!! Form::open(['id' => 'regionFilterFrm', 'method' => 'get']) !!}
                                        {!! Form::select('region', $filterRegions, request()->input('region'),['class' => 'form-control region_selector']) !!}
                                        {!! Form::close() !!}
                                    </div>
                                    @if( !empty(request()->input('region')) and request()->input('region') != 'all' )
                                        <a href="javascript:void(0);" class="btn btn-primary delete_item_region">Delete</a>
                                    @endif
                                    @if(count($regions) > 0)
                                        <a class="btn btn-primary" href="javascript:void(0);" data-toggle="modal" data-target="#add_item_region">Add Region</a>
                                    @endif
                                </div>
                            @endif
                        </div>
                    </div>
                    <div class="ibox-content p-md">
                        @include('flash::message')

                        {!! Form::open() !!}
                        <input type="hidden" name="popup_id" value="{{ $popup->id }}">
                        <div id="popup-editor">
                            <div id="popup-image">
                                <a href="javascript:void(0)">
                                    <img class="img-responsive" src="{{ isset($media->id) ? create_media_url($media) : '/images/remarketing-default-popup.jpg' }}">
                                    <input type="hidden" name="popup[media_id]" id="popup_media_id" value="{{ isset($popup->media_id) ? $popup->media_id : '' }}">
                                    <span class="upload-tooltip">700x200px <i class="fa fa-upload"></i></span>
                                </a>
                            </div>
                            <div id="popup-body">
                                {!! Form::textarea('popup[title]', isset($popup->title) ? $popup->title : '', ['class' => 'form-control', 'id' => 'popup-title', 'placeholder' => 'Your Title Goes Here...', 'rows' => 2, 'data-autosize-on' => true, 'style' => 'overflow: hidden; overflow-wrap: break-word; height: 92px;' ]) !!}
                                {!! Form::textarea('popup[content]', isset($popup->content) ? $popup->content : '', ['class' => 'form-control', 'id' => 'popup-text', 'placeholder' => 'Your Text Goes Here...', 'rows' => 6, 'data-autosize-on' => true, 'style' => 'overflow: hidden; overflow-wrap: break-word; height: 146px;' ]) !!}
                            </div>
{{--                            <div id="popup-form">--}}
{{--                                <div id="popup-fields">--}}
{{--                                    <div class="popup-field-left">Name</div>--}}
{{--                                    <div class="popup-field-right">Email</div>--}}
{{--                                </div>--}}
{{--                                <a id="submit-color" href="javascript:void(0)" style="background-color: {{ isset($popup->submit_color) ? $popup->submit_color : '' }};">--}}
{{--                                    edit color--}}
{{--                                    <span id="selected-color">{{ isset($popup->submit_color) ? $popup->submit_color : '' }}</span>--}}
{{--                                    <input type="hidden" name="popup[submit_color]" id="popup-submit-color" value="{{ isset($popup->submit_color) ? $popup->submit_color : '' }}">--}}
{{--                                </a>--}}
{{--                            </div>--}}
                            <div class="clearfix"></div>
{{--                            <div id="settings-editor" style="margin-top: 50px">--}}
{{--                                <div class="row">--}}
{{--                                    <div class="col-lg-12">--}}
{{--                                        <div class="form-group">--}}
{{--                                            <label>Body </label>--}}
{{--                                            {!! Form::textarea('popup[body]', isset($popup->body) ? $popup->body : '', ['class' => 'form-control', 'placeholder' => 'Body', 'rows' => 3]) !!}--}}
{{--                                        </div>--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <div class="row">--}}
{{--                                    <div class="col-lg-6">--}}
{{--                                        {!! Form::select('popup[idle_seconds]', \App\SiteSetting::idleSeconds(), isset($popup->idle_seconds) ? $popup->idle_seconds : '', ['class' => 'form-control'] ) !!}--}}
{{--                                    </div>--}}
{{--                                    <div class="col-lg-6">--}}
{{--                                        {!! Form::text('popup[notification_email]', isset($popup->notification_email) ? $popup->notification_email : '', ['class' => 'form-control', 'placeholder' => 'Notification email']) !!}--}}
{{--                                    </div>--}}
{{--                                </div>--}}
{{--                                <div class="clearfix"></div>--}}
{{--                                <div id="coupon-image">--}}
{{--                                    <a href="javascript:void(0)">--}}
{{--                                        <img class="img-responsive" src="{{ isset($couponMedia->id) ? create_media_url($couponMedia) : '/images/remarketing-default-coupon.jpg' }}">--}}
{{--                                        <input type="hidden" name="popup[coupon_media_id]" id="coupon_media_id" value="{{ isset($popup->coupon_media_id) ? $popup->coupon_media_id : '' }}">--}}
{{--                                        <span class="upload-tooltip" style="right: 33%;">Upload Coupon <i class="fa fa-upload"></i></span>--}}
{{--                                    </a>--}}
{{--                                    <a href="javascript:void(0)" id="delete-coupon" style="display: none;"><i class="fa fa-trash-o"></i></a>--}}
{{--                                </div>--}}
{{--                            </div>--}}
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary pull-right"><i class="fa fa-save text-white"></i> Save</button>
                            </div>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('Website::layout._gallery_popup')
        <div class="modal inmodal fade" id="add_item_region" tabindex="" role="dialog"  aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                {!! Form::open(['novalidate' => 'novalidate', 'onsubmit' => 'return saveItemRegion(this);', 'files' => true]) !!}
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Add Region</h4>
                </div>
                <div class="modal-body">
                    {!! Form::label('region', 'Region') !!}
                    {!! Form::select('region_id[]', $regionList, [], ['class' => 'form-control item_region_select', 'multiple', 'style' => 'width: 100%;']) !!}
                    <input type="hidden" name="popup_id" value="{{ !empty($popup->parent_id) ? $popup->parent_id : $popup->id }}">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
@endsection

@section('footer')
    <script src="{{ asset('/plugins/colorpicker/js/colorpicker.min.js') }}"></script>
    <script src="{{ asset('/plugins/select2/select2.js') }}"></script>
    <script>
        var $activeObject = null;
        $(document).ready(function() {
            $('.item_region_select').select2({
                placeholder: 'Select Regions'
            });
            $('#gallery_manager').on('shown.bs.modal', function (e) {
                $('#gallery_manager .other_file_image,#gallery_manager li#slider_tab').remove();
                if( $('#gallery_manager .use_gallery_image').length < 1 ) {
                    $('#gallery_manager').find('.modal-footer').append('<button type="button" class="btn btn-primary use_gallery_image">Insert Image</button>');
                }
            });
            $('#popup-image').find('a').on('click', function () {
                $activeObject = $(this).closest('div');
                $('#media_type').val('website');
                openGallery();
            });
            $('#coupon-image').find('a').on('click', function () {
                $activeObject = $(this).closest('div');
                $('#media_type').val('website');
                openGallery();
            });

            var divStyle = $('#submit-color')[0].style;
            $('#submit-color').colorpicker({
                color: divStyle.backgroundColor
            }).on('changeColor', function(ev) {
                var hexColor = ev.color.toHex();
                divStyle.backgroundColor = hexColor;
                $('#submit-color').find('#selected-color').html(hexColor);
                $('#submit-color').find('input[type=hidden]').val(hexColor);
            });
        });

        $(document).on("change", '.region_selector', function () {
            $("#regionFilterFrm").submit();
        });

        $(document).on('click', '.delete_item_region', function () {
            if( confirm('Are you sure you want to delete it ?') ) {
                $.ajax({
                    method: 'POST',
                    url: '{{ website_url('marketing-popup/delete-region') }}',
                    data: 'popup_id={{ $popup->id }}&_token='+csrf_token,
                    dataType: 'json',
                }).done(function(response) {
                    location.reload();
                });
            }
        });

        function saveItemRegion(object) {
            const btn = $(object).find('button[type="submit"]');
            const btnText = $(btn).html();
            processBtnDisable(btn);
            var data = $(object).closest('.modal-content').find('form').serialize();
            $.ajax({
                method: 'POST',
                url: '{{ website_url('marketing-popup/regions')}}',
                data: data,
                dataTye: 'json',
            }).done(function(response) {
                $('.modal').modal('hide');
                revertProcessBtnDisable(btn, btnText);
                location.reload();
            });
            return false;
        }

        $(document).on('click', '#gallery_manager .use_gallery_image', function() {
            var amazon_url  = $(this).find('img').attr('src');
            if( $('#gallery_manager li.selected').length > 0 ) {
                var media_id = $('#gallery_manager li.selected a').data('id');
                var media_url = $('#gallery_manager li.selected a').data('src');
                $($activeObject).find('input[type=hidden]').val(media_id);
                $($activeObject).find('img').attr('src', media_url);
                $('#gallery_manager').modal('hide');
            }
        });

    </script>
@endsection