@extends('layouts.app')
@section('title', ($popup->id > 0 ? 'Edit Popup' : 'Add Popup').' | Popup')

@section('extrastyles')
    <link rel="stylesheet" href="{{ asset('plugins/summernote/summernote.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/summernote/summernote-bs3.css') }}">
    <link rel="stylesheet" href="{{ asset('/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}" />
    <link href="{{ asset('/plugins/select2/select2.css') }}" rel="stylesheet">
    <style>
        .arrow{
            left : 13px !important;
            top : 37px;
        }
    </style>
@endsection

@section('content')
    <div id="popupUpdate">
        {!! Form::open(['novalidate' => 'novalidate', 'onsubmit' => 'return savePopup(this);']) !!}
        <input type="hidden" name="popup_id" value="{{$popup->id > 0 ? $popup->id : ''}}" />
        <div class="clearfix"></div>
        <div class="studio98_websters">
            <div class="row">
                <div class="col-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title2">
                            <h5>{{ $popup->id > 0 ? 'Edit Popup' : 'Add Popup' }}</h5>
{{--                            <div class="ibox-tools">--}}
{{--                                <a class="collapse-link" href="">--}}
{{--                                    <i class="fa fa-angle-up"></i>--}}
{{--                                </a>--}}
{{--                            </div>--}}
                        </div>
                        <div class="ibox-content p-md">
                            @include('flash::message')
                            <div class="col-lg-12">
                                <div class="clearfix"></div>
                                @if(isset($popup->id))
                                    {!! Form::label('shop_referral_link','Trigger URL') !!}
                                    <div class="input-group mb-3">
                                        {!! Form::text('custom_popup_link' , '/custom-popup/'.$popup->id , ['class' => 'form-control custom_popup_url' ,'readonly' => true]) !!}
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary copy_btn_click" type="button">Copy</button>
                                        </div>
                                    </div>
                                @endif
                                <div class="form-group">
                                    {!! Form::label('title','Title') !!}
                                    {!! Form::text('title' , $popup->title , ['class' => 'form-control','placeholder' => 'Title','required'=>'true']) !!}
                                </div>
                                <div class="form-group">
                                    {!! Form::label('description','Description') !!}
                                    {!! RTEForm::rte('content', $popup->content) !!}
                                </div>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            {!! Form::label('pop_up_show_time', 'Popup Show Time') !!}
                                            {!! Form::select('pop_up_show_time', ['Select Time Popup','immediately'=>'Immediately','x_number'=>'After X number of seconds'], isset($extras->pop_up_show_time) ? $extras->pop_up_show_time : 'immediately' , ['class' => 'form-control automatic', 'style' => 'width:100%;']) !!}
                                        </div>
                                        {!! Form::number('number_of_second' , isset($extras->number_of_second) ? $extras->number_of_second : '' , ['class' => 'form-control number_of_second','placeholder' => 'No Of Seconds', 'style' => 'display:none;']) !!}
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            {!! Form::label('role', 'Role') !!}
                                            {!! Form::select('role[]', $bRoles, isset($extras->roles) ? $extras->roles : ['all'] , ['class' => 'form-control select_roles', 'id' => 'select_roles', 'multiple', 'style' => 'width:100%;']) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            {!! Form::label('country', 'Country') !!}
                                            {!! Form::select('country[]', $bCountries, isset($extras->countries) ? $extras->countries : ['all'] , ['class' => 'form-control select_select2', 'id' => 'select_select2', 'multiple', 'style' => 'width:100%;']) !!}
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            {!! Form::label('language', 'Language') !!}
                                            {!! Form::select('language[]', $bLanguages, isset($extras->languages) ? $extras->languages : ['all'], ['class' => 'form-control select_language', 'multiple', 'style' => 'width:100%;']) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            {!! Form::label('show_popup', 'Show PopUp') !!}
                                            {!! Form::select('show_popup', ['Select Show popup','main'=>'Main Site','replicated'=>'Replicated','both' => 'Both'], isset($extras->show_popup) ? $extras->show_popup : 'both' , ['class' => 'form-control automatic', 'style' => 'width:100%;']) !!}
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            {!! Form::label('pages', 'Page') !!}
                                            {!! Form::select('pages[]', $pages, isset($bPages) != '' ? $bPages : ['all'], ['class' => 'form-control select_page', 'multiple', 'style' => 'width:100%;']) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>Start Date</label>
                                            <div class="input-group">
                                                <span class="input-group-addon">
                                                    <i class="fa fa-calendar"></i>
                                                </span>
                                                <input type="text" name="start_date" class="form-control date_n_time" value="{{ isset($extras->start_date) ? $extras->start_date : '' }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group">
                                            <label>End Date</label>
                                            <div class="input-group">
                                                <span class="input-group-addon">
                                                    <i class="fa fa-calendar"></i>
                                                </span>
                                                <input type="text" name="end_date" class="form-control date_n_time" value="{{ isset($extras->end_date) ? $extras->end_date : '' }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row text-right">
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-primary pull-right">{{ isset($popup->id) ? 'Update' : 'Submit' }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {!! Form::close() !!}
    </div>
@endsection

@section('footer')
    <script src="{{ asset('/plugins/summernote/summernote.min.js') }}"></script>
    <script src="{{ asset('/plugins/dateRangePicker/moment.js') }}" ></script>
    <script src="{{ asset('/plugins/select2/select2.js') }}"></script>
    <script src="{{ asset('/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js') }}" ></script>
    <script>
        $(document).ready(function () {
            initializeSummerNote();
            $(".copy_btn_click").popover({
                trigger: "click",
                placement: 'top',
                content: function content() {
                    return 'Copied';
                }
            }).click(function (e) {
                setTimeout(function () {
                    $('.copy_btn_click').popover('hide');
                }, 2000);
            });

            $('.copy_btn_click').click(function () {
                var $tempInput =  $("<textarea>");
                $("body").append($tempInput);
                $tempInput.val($('.custom_popup_url').val()).select();
                document.execCommand("copy");
                $tempInput.remove();
            });
        });

        $('.select_select2').select2({
            placeholder: 'Select Countries'
        });

        $('.select_language').select2({
            placeholder: 'Select Language'
        });

        $('.select_roles').select2({
            placeholder: 'Select Roles'
        });

        $('.select_page').select2({
            placeholder: 'Select Pages'
        });

        $(document).on('keyup', '.select2-search__field', function (e) {
            if (e.which === 13) {
                var page = $(e.currentTarget).val();
                var data = {
                    id: page,
                    text: page
                };
                var newOption = new Option(data.text, data.id, true, true);
                $('.select_page').append(newOption).trigger('change');
                $('.select_page').select2();
            }
        });

        dateTimePicker('#popupUpdate .date_n_time', 'YYYY-MM-DD HH:mm:ss');
        $(document).ready(function (){
            if($('#pop_up_show_time').val() ==  'x_number'){
                $('.number_of_second').show();
            }
            else{
                $('.number_of_second').hide();
            }

        });

        $('.automatic').on('change', function (){
            if($(this).val() == 'x_number'){
                $('.number_of_second').show();
            }
            else{
                $('.number_of_second').hide();
            }
        });

        function savePopup(object) {
            return reloadAjaxSubmit('popupUpdate',"{{ website_url('custom-popup/add')}}",'title','Submit');
        }
    </script>
@endsection