<div class="modal fade" id="text-description-modal"  tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" id="text-description-body" >
        <div class="modal-content" id="text-description-content">
            <div class="modal-header">
                <h3 class="modal-title">Create Text Area</h3>
            </div>
            <div id="copy-html" class="modal-body">
                <input type="hidden" id="text-description_id" name="text-description_id" value="">
                <div class="form-group">
                    <label id="text_description_header_label" class="textDescriptionHeaderLabel" for="text_description_header">Header:</label>
                    <input type="text" id="text_description_header" class='form-control' name="text_description_header" value="">
                </div>
                <div>
                    <input type="checkbox" class="form-check-input" id="include_button" checked>
                    <label class="include-button-label" for="include-button">Include Button with Link</label>
                </div>
                <div id="button_options" class="form-group">
                    <label id="button_text_label" class="buttonTextLabel" for="button_text">Button Text:</label>
                    <input type="text" id="button_text" class='form-control' name="button_text" value="">
                    <label id="button_link_label" class="buttonLinkLabel" for="button_link">Button Link:</label>
                    <input type="text" id="button_link" class='form-control' name="button_link" value="">
                    <label id="button_location_label" class="buttonLocation">Button Location:</label>
                    <label class="radio-inline"><input id="radio_header" type="radio" name="buttonLocation" value="header">Header</label>
                    <label class="radio-inline"><input id="radio_footer" type="radio" name="buttonLocation" value="footer" checked>Footer</label>
                </div>
                <div class="form-group">
                    <label id="text_description_body_label" class="textDescriptionBody" for="text_description_body">Body:</label>
                    <textarea id="text_description_body" class='form-control' name="text_description_body" rows="3" style="resize:vertical;"></textarea>
                </div>
                <div class="form-group overlay-options" style="display:none;">
                    <label id="overlay_location_label" class="overlayLocation">Overlay Location:</label>
                    <label class="radio-inline"><input id="radio_left" type="radio" name="textAreaLocation" value="left">Left</label>
                    <label class="radio-inline"><input id="radio_center" type="radio" name="textAreaLocation" value="center" checked>Center</label>
                    <label class="radio-inline"><input id="radio_right" type="radio" name="textAreaLocation" value="right">Right</label>
                </div>
                <div>
                    <button id="text_description_submit" class="btn btn-md btn-primary">Submit</button>
                    <button id="text_description_cancel" class="btn btn-md btn-default">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        $('body').on('click', '#text_description_cancel', function (e){
            $("#text-description-modal").modal('hide');
        }).on('change', '#include_button', function (e){
            if ($(this).is(':checked')) {
                $("#button_options").show();
            }else{
                $("#button_options").hide();
            }
        });
    </script>
@endpush