@extends('backend.layouts.app')
@section('after-styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/plugins/toolbarjs/jquery.toolbar.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/plugins/ace/ace.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/custom.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('css/plugins/selectpicker/selectpicker.css') }}">

    <style type="text/css">
        @charset "UTF-8";

        .animated {
            -webkit-animation-duration: 0.8s;
            -moz-animation-duration: 0.8s;
            -o-animation-duration: 0.8s;
            animation-duration: 0.8s;
            -webkit-animation-fill-mode: both;
            -moz-animation-fill-mode: both;
            -o-animation-fill-mode: both;
            animation-fill-mode: both;
        }

        .animated.fast {
            -webkit-animation-duration: 0.6s;
            -moz-animation-duration: 0.6s;
            -o-animation-duration: 0.6s;
            animation-duration: 0.6s;
        }

        .animated.slow {
            -webkit-animation-duration: 1.0s;
            -moz-animation-duration: 1.0s;
            -o-animation-duration: 1.0s;
            animation-duration: 1.0s;
        }

        .shake {
            -webkit-animation-name: shake;
            -moz-animation-name: shake;
            -o-animation-name: shake;
            animation-name: shake;
        }

        @-webkit-keyframes shake {
            0%, 100% {
                -webkit-transform: translateX(0);
            }
            10%, 30%, 50%, 70%, 90% {
                -webkit-transform: translateX(-10px);
            }
            20%, 40%, 60%, 80% {
                -webkit-transform: translateX(10px);
            }
        }

        @-moz-keyframes shake {
            0%, 100% {
                -moz-transform: translateX(0);
            }
            10%, 30%, 50%, 70%, 90% {
                -moz-transform: translateX(-10px);
            }
            20%, 40%, 60%, 80% {
                -moz-transform: translateX(10px);
            }
        }

        @-o-keyframes shake {
            0%, 100% {
                -o-transform: translateX(0);
            }
            10%, 30%, 50%, 70%, 90% {
                -o-transform: translateX(-10px);
            }
            20%, 40%, 60%, 80% {
                -o-transform: translateX(10px);
            }
        }

        @keyframes shake {
            0%, 100% {
                transform: translateX(0);
            }
            10%, 30%, 50%, 70%, 90% {
                transform: translateX(-10px);
            }
            20%, 40%, 60%, 80% {
                transform: translateX(10px);
            }
        }

        input {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }
    </style>
@endsection

@section('title', 'Announcement')

@section('content')
    <style type="text/css">
        li {
            list-style-type: none;
        }

        .block-group {
            color: #3c763d;
            background-color: #dff0d8; 
            border-color: #d6e9c6;
        }
    </style>

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <h3>Message Builder</h3>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header text-white bg-secondary">
                        <div class="col-12">
                            <h4 class="card-title float-left"><span class="fa fa-cube text-success"></span> Message</h4>
                            <button type="button" class="btn btn-success btn-sm text-center float-right message-button" id="add-message" href="#"><span class="fa fa-plus"></span> ADD MESSAGE</button>
                        </div>
                    </div><!--card-header-->
                    <div class="card-body ">
                        <div class="btn-group-toggle" data-toggle="buttons" id="message_list"></div>
                    </div><!--card-body-->
                </div><!--card-->
            </div><!--col-md-4-->

            <div class="col-md-8">
                <div class="loading-overlay"></div>
                <div class="loadingGIF"><img src="{{ asset('img/loading.gif') }}" /></div>

                <div class="well well-lg card-panel" style="">
                    <div id="block-wrap">
                        <form class="form-horizontal" id="builder_form" novalidate>
                            <div id="form-fields" >
                            </div>
                        </form>
                        <h5 class="col-sm-12">ADD CARD</h5>
                        <div id="add-field" class="btn-group btn-group-justified btn-group-md col-md-12" role="group" aria-label="...">
                            <a type="button" class="btn btn-primary text-center" id="" data-type="text" href="#"><span class="fa fa-file-text"></span><br />Text<br />&nbsp;</a>
                            <a type="button" class="btn btn-primary text-center" id="" data-type="image" href="#"><span class="fa fa-file-image-o"></span><br />Image<br />&nbsp;</a>
                        </div>
                        <input type="submit" value="Preview" id="json_preview" class="btn btn-success" style="display: none;">

                        <form id="myform1" method="post" action="file-upload.php">
                        </form>
                    </div>

                    {{-- BUTTON POPOVER --}}
                    <div id="popover-container"></div>
                    <div id="popover-content" style="display: none">
                        <div>
                            <input type="text" class="input-lg no-border" id="button_text_input" data-target="" placeholder="Enter button name" />
                            <hr />

                        {{-- button_types_radios --}}
                        <div id="button_types_radios" class="btn-group button-types" data-toggle="buttons">
                            <label class="btn btn-primary" id="button_types_label_web_url">
                            <input type="radio" name="button_type" id="button_type_text_web_url" value="web_url" data-button-type="web_url" id="option2" autocomplete="off"> URL
                            </label>
                            <label class="btn btn-primary" id="button_types_label_phone_number">
                            <input type="radio" name="button_type" id="button_type_text_phone_number" value="phone_number" data-button-type="phone_number" id="option3" autocomplete="off"> Phone Call
                            </label>
                        </div>

                        {{-- button types content --}}
                        <div id="button_types_content">
                            <div id="placeholder_web_url" class="button-value-placeholder">
                                <br />
                                <input type="text" id="button_type_value_web_url" class="input-lg no-border button-value" data-button-type="web_url"  name="button_target_url" placeholder="Enter a URL">
                            </div>
                            <div id="placeholder_phone_number" class="button-value-placeholder">
                            <br />
                                <input type="text" id="button_type_value_phone_number" class="input-lg no-border button-value" data-button-type="phone_number" name="button_target_phone" placeholder="Enter phone number">
                                
                            </div>
                            
                        </div>
                    </div>

                    {{-- /BUTTON POPOVER --}}
                </div>
            </div>
        </div>
    </div><!--kt-container-->
@endsection


@section('after-scripts')
    <script src="{{ asset('js/plugins/toolbarjs/jquery.toolbar.min.js') }}"></script>
    <script src="{{ asset('js/announcement/message.js') }}"></script>
    <script src="{{ asset('js/plugins/ace/ace.min.js') }}"></script>
    <script src="{{ asset('js/plugins/ace/ace-elements.min.js') }}"></script>
    <script src="{{ asset('js/plugins/selectpicker/selectpicker.js') }}"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.3/purify.js"></script>
@endsection