@extends('layouts.master')
@section('content')

    <div class="container">
        @php
            $website_request = \App\Models\Website_Request::first();
        @endphp
        @include('website._website_sidebar', compact('website_request'))
        <div id="button">
            <div class="row">
                <h1>Buttons</h1>
                <div style="display: none;">
                    {{ $title_actual = 'button_actual'}}
                    {{ $title_ex = 'button_ex'}}
                    {{ $title_link = 'button_link'}}
                    {{ $title_right = 'button_right'}}
                    {{ $on_click = "alert('Hooray!');" }}
                    {{ $id = null }}
                    {{ $size = \App\Helpers\FormComponentHelper::SIZE_EXLARGE }}
                    {{ $col_size = null }}
                    {{ $offset = null  }}
                    {{ $href = 'https://www.youtube.com/watch?v=1qN72LEQnaU'  }}
                </div>
                There are several different types of buttons. The text on the buttons all gets changed to uppercase.
                <ul>
                    <li>button_actual: when you need to create an actual button object (vs. input or href)</li>
                    <li>button_cancel: takes you back a page</li>
                    <li>button_ex: when you need to assign the onclick event</li>
                    <li>button_link: when clicking the button takes you to a URL</li>
                    <li>button_right: is basically button_ex, but right aligned. If you have multiple right buttons,
                        you'll need to put them in reverse order in the row
                    </li>
                    <li>button_save: calls submit for your form</li>
                </ul>
            </div>
            <div class="row bt-button-row">
                {{--
                    Form::component('button_actual','shared.forms._button_ex', ['title', 'on_click', 'id', 'size'=>FormComponentHelper::SIZE_MEDIUM, 'type'=>'actual'] );
                    Form::component('button_cancel','shared.forms._button_ex', ['size'=>FormComponentHelper::SIZE_MEDIUM, 'title'=>'Cancel', 'type'=>'cancel'] );
                    Form::component('button_ex','shared.forms._button_ex', ['title', 'on_click', 'id', 'size'=>FormComponentHelper::SIZE_MEDIUM, 'type'=>'input'] );
                    Form::component('button_link','shared.forms._button_ex', ['title', 'href', 'id'=>null, 'size'=>FormComponentHelper::SIZE_MEDIUM, 'type'=>'href'] );
                    Form::component('button_right','shared.forms._button_ex', ['title', 'on_click', 'id', 'size'=>FormComponentHelper::SIZE_MEDIUM, 'type'=>'input', 'class'=>'pull-right bt-pull-right'] );
                    Form::component('button_save','shared.forms._button_ex', ['size'=>FormComponentHelper::SIZE_MEDIUM, 'title'=>'Save', 'name'=>null, "id"=>null, 'type'=>'save'] );
                --}}
                {{ Form::button_actual($title_actual, $on_click) }}
                {{ Form::button_cancel() }}
                {{ Form::button_ex($title_ex, $on_click, $id, $size) }}
                {{ Form::button_link($title_link, $href) }}
                {{ Form::button_right($title_right, $on_click) }}
                {{ Form::button_save() }}
            </div>
            {{ Form::separator_row() }}
        </div>

        <div id="checkbox">
            <div class="row">
                <h1>Checkboxes</h1>
                <div style="display: none;">
                    {{ $name = 'checkbox_name'}}
                    {{ $value = 1 }}
                    {{ $title01 = 'checkbox_basic1' }}
                    {{ $title02 = 'checkbox_basic2' }}
                    {{ $title1 = 'checkbox_ex' }}
                    {{ $title2 = 'checkbox_row' }}
                    {{ $title3 = 'row_checkbox_line' }}
                    {{ $on_change = null }}
                    {{ $col_size = 2 }}
                    {{ $offset = 1 }}
                    {{ $id = 'checkbox_id' }}
                </div>
                {{--
                    Form::component('checkbox_basic','shared.forms._checkbox_ex', ['name', 'value', 'title', 'on_change'=>null, 'id'=>null, 'col_size'=>null, 'offset'=>null ] );
                    Form::component('checkbox_ex','shared.forms._checkbox_ex', ['name', 'value', 'title', 'on_change'=>null, 'id'=>null, 'col_size'=>9, 'offset'=>3 ] );
                    Form::component('checkbox_row','shared.forms._checkbox_ex', ['name', 'value', 'title', 'on_change'=>null, 'id'=>null, 'col_size'=>12, 'offset'=>null  ] );
                    Form::component('row_checkbox_inline', 'shared.forms._row_label_control_inline', ['name', 'title', 'value', 'label_col_size', 'col_size', 'size'=>FormComponentHelper::SIZE_SMALL, 'type'=>'checkbox'] );
                --}}
                Checkboxes are styled so that you can pass the label in as well as the value
                <ul>
                    <li>checkbox_basic: basic checkbox.</li>
                    <div class="row">
                        {{ Form::checkbox_basic($name, $value, $title01, null, null, 2) }}
                        {{ Form::checkbox_basic($name, $value, $title02, null, null, 2) }}
                    </div>
                    <li>checkbox_ex: basic checkbox with default column size = 9 and offset = 3</li>
                    <div class="row">
                        {{ Form::checkbox_ex($name, $value, $title1) }}
                    </div>
                    <li>checkbox_row: this is used when a whole row in a form is going to be the checkox</li>
                    <div class="row">
                        {{ Form::checkbox_row($name, $value, $title2) }}
                    </div>
                    <li>row_checkbox_inline: this is used when you have a label column and then the checkbox as another
                        column.
                        It will automatically add the row for you. In this case, label_col_size is the offset
                    </li>
                    {{ Form::row_checkbox_inline($name, $title3, $value, 3, 9) }}
                </ul>
            </div>
            {{ Form::separator_row() }}
        </div>

        <div id="date">
            <div class="row">
                <h1>Date Controls</h1>
                <div style="display: none;">
                    {{ $name = 'date_name'}}
                    {{ $value = \Carbon\Carbon::today() }}
                    {{ $col_size = 2 }}
                    {{ $id1 = 'date_id_1' }}
                    {{ $id2 = 'date_id_2' }}
                </div>
                <h4 style="color: red;"> In order to get the date control working, you must add these items:</h4>
                <ul>
                    <li>init_daterangepicker('date_id'); or init_daterangepicker_with_null_support('date_id'); to the
                        document.ready function
                    </li>
                    <li>Html::script('/js/moment.min.js') && Html::script('/js/daterangepicker.js') in the script
                        section of the file
                    </li>
                    <li>Html::style('/css/daterangepicker.css') && Html::style('/css/daterangepicker_custom.css') in the
                        style section
                    </li>
                </ul>
                The second example supports a NULL date
            </div>
            {{--Form::component('date_ex','shared.forms._date_ex', ['name', 'value', 'col_size'=>null, 'id'=>null, 'placeholder'=>null] );--}}
            <div class="row">
                {{ Form::date_ex($name, $value, $col_size, $id1) }}
            </div>
            <div class="row">
                {{ Form::date_ex($name, null, $col_size, $id2) }}
            </div>
            {{ Form::separator_row() }}
        </div>

        <div id="dollar">
            <div class="row">
                <h1>Dollar inputs</h1>
                <div style="display: none;">
                    {{ $name = 'dollar_name'}}
                    {{ $value = 147.50 }}
                    {{ $on_change = null }}
                    {{ $col_size = 2 }}
                    {{ $id = 'dollar_id' }}
                </div>
            </div>
            The dollar_ex component shows the dollar sign imbeded in the text field.
            {{--Form::component('dollar_ex','shared.forms._text_prefix_ex', ['name', 'value', 'on_change'=>null, 'col_size'=>3, 'offset'=>3, 'size'=>FormComponentHelper::SIZE_SMALL, 'other_text'=>'$'] );--}}
            <div class="row">
                {{ Form::dollar_ex($name, $value, $on_change, $col_size, $id) }}
            </div>
            {{ Form::separator_row() }}
        </div>

        <div id="image_show">
            <div class="row">
                <h1>Images</h1>
                <div style="display: none;">
                    {{ $id = 'dollar_id' }}
                    {{ $title = 'image_show' }}
                    {{ $size = \App\Helpers\FormComponentHelper::SIZE_MEDIUM }}
                    {{ $image = 'https://lh3.ggpht.com/jLfjcX9o3JdOGf5ytzP9PRQOV7fmulUqgw0iAeI02HQdeDQCDJaOoCA11P5r21Se1vU6=w300' }}
                </div>
            </div>
            Show an image by sending the lable for description and URL of the image
            {{--Form::component('image_show', 'shared.forms._image_show', ['id', 'title', 'size', 'image', 'class'=>null, 'thumbnail'=>null]);--}}
            <div class="row">
                {{ Form::image_show($id, $title, $size, $image) }}
            </div>
            {{ Form::separator_row() }}
        </div>

        <div id="labels">
            <div class="row">
                <h1>Labels</h1>
                <div style="display: none;">
                    {{ $title_ex = 'label_ex'}}
                    {{ $title_inline = 'label_inline'}}
                    {{ $title_grey = 'label_grey'}}
                    {{ $title_styled = 'label_styled'}}
                    {{ $title_title = 'label_title'}}
                    {{ $title_info = 'label_info'}}
                    {{ $title_info2 = 'Here is a bunch of useful information for you!'}}
                    {{ $title_inline = 'row_label_inline'}}
                    {{ $title_inline2 = 'This is the field value'}}
                    {{ $id = null }}
                    {{ $size = null }}
                    {{ $on_click = null }}
                    {{ $col_size = 6 }}
                    {{ $label_col_size = 3 }}
                    {{ $class = 'link-label' }}
                    {{ $class2 = 'label-grey bt-label-medium' }}
                </div>
                {{--
                    Form::component('label_ex','shared.forms._label_ex', ['title', 'size'=>FormComponentHelper::SIZE_LARGE, 'id'=>null, 'col_size'=>null, 'on_click'=>null] );
                    Form::component('label_inline','shared.forms._label_ex', ['title', 'id'=>null, 'col_size'=>3, 'size'=>FormComponentHelper::SIZE_SMALL, 'on_click'=>null] );
                    Form::component('label_grey','shared.forms._label_ex', ['title', 'col_size'=>null, 'offset'=>null, 'size'=>FormComponentHelper::SIZE_SMALL, 'class'=>'label-grey',  'id'=>null] );
                    Form::component('label_styled','shared.forms._label_ex', ['title', 'class', 'size', 'col_size'=>null, 'offset'=>null, 'id'=>null, 'div_class'=>null] );
                    Form::component('label_title','shared.forms._label_ex', ['title', 'size'=>FormComponentHelper::SIZE_EXLARGE, 'id'=>null, 'col_size'=>12, 'on_click'=>null] );
                    Form::component('row_label_inline', 'shared.forms._row_label_control_inline', ['title', 'title2', 'class', 'label_col_size', 'col_size', 'size'=>FormComponentHelper::SIZE_SMALL, 'name'=>null, 'type'=>'label'] );
                --}}
                There are several label types already created to fit different needs:
                <ul>
                    <li>label_ex: basic label, default size large</li>
                    <div class="row">
                        {{ Form::label_ex($title_ex) }}
                    </div>
                    <li>label_info: this is a label that has an information circle next to it.
                        <span style="color:red"> Please note that there is some code that
                            has to go in the document initialization to make this work:</span>
                        $(function() { $('[data-toggle="tooltip"]').tooltip(); });
                    </li>
                    <div class="row">
                        {{ Form::label_info($title_info, $title_info2) }}
                    </div>
                    <li>label_inline: this is generally used as the label for a control. It would be used when you can't
                        use one of the row_xx_inline snippets
                    </li>
                    <div class="row">
                        {{ Form::label_inline($title_inline) }}
                    </div>
                    <li>label_grey: small grey label, usually used for description</li>
                    <div class="row">
                        {{ Form::label_grey($title_grey, $col_size) }}
                    </div>
                    <li>label_styled: used when you need to add extra styling to a field. In this case, we are using the
                        styling for a link label
                    </li>
                    <div class="row">
                        {{ Form::label_styled($title_styled, $class, \App\Helpers\FormComponentHelper::SIZE_TINY) }}
                    </div>
                    <li>label_title: large black label. Ususally used as field or form titles</li>
                    <div class="row">
                        {{ Form::label_title($title_title) }}
                    </div>
                    <li>row_inline_label: large black label + styled second label. Used for rows where you have the
                        label and the read-only value
                    </li>
                    {{ Form::row_label_inline($title_inline, $title_inline2, $class2, $label_col_size, $col_size, \App\Helpers\FormComponentHelper::SIZE_LARGE) }}

                </ul>
            </div>

            {{ Form::separator_row() }}
        </div>

        <div id="page_header">
            <div class="row">
                <h1>Page Header</h1>
                Page header is used at the top of most pages in fuse2. It can take 2 arguments, a title and the name of
                an icon whose filename looks like
                "img/icon_$icon.png" or it can take an extra argument to give the relative path to the icon.
            </div>
            {{ Form::page_header("Business Recordings", "paper_stack") }}
            {{ Form::page_header("Word of Mouth Intake", null, "img/u241.png") }}
            {{ Form::separator_row() }}
        </div>

        <div id="percent">
            <div class="row">
                <h1>Percent inputs</h1>
                <div style="display: none;">
                    {{ $name = 'percent_name'}}
                    {{ $title = 'row_percent_inline'}}
                    {{ $value = 75.44 }}
                    {{ $col_size = 2 }}
                </div>
                {{--
                    Form::component('percent_ex','shared.forms._text_suffix_ex', ['name', 'value', 'col_size', 'size'=>FormComponentHelper::SIZE_SMALL, 'id'=>null, 'other_text'=>'%' ] );
                    Form::component('row_percent_inline', 'shared.forms._row_label_control_inline', ['name', 'title', 'value', 'label_col_size', 'col_size', 'size'=>FormComponentHelper::SIZE_SMALL, 'type'=>'percent'] );
                --}}
                The percent_ex component shows the percent sign imbeded at the end of a text field.
                <ul>
                    <li>percent_ex: basic percent text control</li>
                    <div class="row">
                        {{ Form::percent_ex($name, $value, $col_size) }}
                    </div>
                    <li>row_percent_inline: use when you have a label and a field. This snippet includes the row as
                        well
                    </li>
                    {{ Form::row_percent_inline($name, $title, $value, 3, $col_size) }}
                </ul>
            </div>
            {{ Form::separator_row() }}
        </div>

        <div id="radio">
            <div class="row">
                <h1>Radio buttons/Radio groups</h1>
                <div style="display: none;">
                    {{ $name = 'radio_name_1'}}
                    {{ $value = '1' }}
                    {{ $checked_value = '1' }}
                    {{ $title = 'Radio Text Checked' }}
                    {{ $col_size = 4 }}
                    {{ $on_change = null }}
                    {{ $id = 'radio_id' }}

                    {{ $name2 = 'radio_name_2'}}
                    {{ $value2 = '2' }}
                    {{ $title2 = 'Radio Text Unchecked' }}
                    {{ $id2 = 'radio_id_2' }}
                </div>
                {{--Form::component('radio_ex','shared.forms._radio_ex', ['name', 'value', 'title', 'col_size'=>null, 'on_change'=>null, 'id'=>null, 'class'=>null] );--}}
                radio_ex shows radio buttons. They are grouped by the name attribute.
                <ul>
                    <li>Radio Text Checked is checked initially. It is linked to Radio Text Unchecked by the name
                        parameter
                    </li>
                    <div class="row">
                        {{ Form::radio_ex($name, $value, $checked_value, $title, $col_size) }}
                    </div>
                    <div class="row">
                        {{ Form::radio_ex($name, $value2, $checked_value, $title2, $col_size ) }}
                    </div>
                    <li>Radio Text Unchecked 2 is separate because of the name on the control</li>
                    <div class="row">
                        {{ Form::radio_ex($name2, $value2, $checked_value, $title2.' 2', $col_size) }}
                    </div>
                </ul>
            </div>

            {{ Form::separator_row() }}
        </div>

        <div id="select">
            <div class="row">
                <h1>Select/drop down boxes</h1>
                <div style="display: none;">
                    {{ $name = 'select_name'}}
                    {{ $value = '1' }}
                    {{ $col_size = 3 }}
                    {{ $on_change = null }}
                    {{ $offset = null }}
                    {{ $id = 'select_id' }}
                    {{ $class = null }}
                    {{ $div_class = 'select-div-class' }}
                </div>
                {{--
                    Form::component('select_ex','shared.forms._select_ex', ['name', 'value', 'list', 'col_size'=>null, 'offset'=>null, 'on_change'=>null, 'id'=>null, 'placeholder'=>null ] );
                    Form::component('select_styled','shared.forms._select_ex', ['name', 'value', 'list', 'col_size'=>null, 'offset'=>null, 'class'=>null, 'div_class'=>null ] );
                    Form::component('select_with_label','shared.forms._select_with_label', ['name', 'value', 'list', 'col_size', 'offset', 'other_text', 'other_col_size', 'on_change'=>null, 'id'=>null, 'other_size'=>FormComponentHelper::SIZE_LARGE ] );
                    Form::component('row_select_inline', 'shared.forms._row_label_control_inline', ['name', 'title', 'value', 'list', 'label_col_size', 'col_size', 'size'=>FormComponentHelper::SIZE_SMALL, 'type'=>'select'] );
                --}}
                These select controls show drop downs on forms. The styling on different browsers will be different and
                currently that's how it works
                <ul>
                    <li>select_ex: basic. in this case, it has no col_size so it takes the whole row</li>
                    <div class="row">
                        {{ Form::select_ex($name, $value, \App\Models\Service_Cat::$tax_type) }}
                    </div>
                    <li>select_styled: if you have to add extra styling to the select or the div that holds the select
                    </li>
                    <div class="row">
                        {{ Form::select_styled($name, $value, \App\Models\Service_Cat::$tax_type, $col_size, $offset, $class, $div_class) }}
                    </div>
                    <li>select_with_label: this is basically row_select_inline but with more options exposed</li>
                    <div class="row">
                        {{ Form::select_with_label($name, $value, \App\Models\Service_Cat::$tax_type, $col_size, $offset, 'Label text', 3) }}
                    </div>
                    <li>row_select_inline: a row with a label and a drop down control. The padding also works better
                    </li>
                    {{ Form::row_select_inline($name, 'row_select_inline', 1, \App\Models\Service_Cat::$tax_type, 3, 6) }}
                </ul>
            </div>

            {{ Form::separator_row() }}
        </div>

        <div id="text">
            <div class="row">
                <h1>Text inputs</h1>
                <div style="display: none;">
                    {{ $name = "field_name" }}
                    {{ $value = 'text_ex' }}
                    {{ $title_row = 'row_text_inline' }}
                    {{ $col_size = null }}
                    {{ $id = 'text_id' }}
                    {{ $class = 'bt-text-direction' }}
                </div>
                {{--
                    Form::component('text_ex','shared.forms._text_ex', ['name', 'value', 'col_size'=>null, 'id'=>null, 'on_change'=>null] );
                    Form::component('text_styled','shared.forms._text_ex', ['name', 'value', 'class', 'disabled'=>null, 'col_size'=>null, 'id'=>null, 'on_change'=>null] );
                    Form::component('text_placeholder','shared.forms._text_ex', ['name', 'placeholder', 'col_size', 'value'=>null, 'id'=>null, 'on_change'=>null] );
                    Form::component('row_text_inline', 'shared.forms._row_label_control_inline', ['name', 'title', 'value', 'label_col_size', 'col_size', 'size'=>FormComponentHelper::SIZE_SMALL, 'type'=>'text'] );
                --}}
                Text controls are the basic inputs used on most forms.
                <ul>
                    <li>text_ex: basic text control</li>
                    <div class="row">
                        {{ Form::text_ex($name, $value) }}
                    </div>
                    <li>text_styled: text control with additional styling.</li>
                    <div class="row">
                        {{ Form::text_styled($name, $value, $class, $col_size, $id) }}
                    </div>
                    <li>text_styled: text control with additional styling. However, it is disabled</li>
                    <div class="row">
                        {{ Form::text_styled($name, $value, $class, true) }}
                    </div>
                    <li>text_placeholder: text field with a placeholder value</li>
                    <div class="row">
                        {{ Form::text_placeholder($name, $value, $col_size, $id) }}
                    </div>
                    <li>row_text_inline: a row with a label and text control</li>
                    {{ Form::row_text_inline($name, $title_row, $value, 3, 6) }}
                </ul>
            </div>

            {{ Form::separator_row('grey-divider thin-divider') }}
        </div>

        <div id="text_suffix">
            <div class="row">
                <h1>Text inputs with trailing text</h1>
                <div style="display: none;">
                    {{ $name = "processing_time" }}
                    {{ $value = '10050' }}
                    {{ $col_size = 2 }}
                    {{ $other_text = 'minutes' }}
                    {{ $id = 'text_suffix_id' }}
                    {{ $on_change = null }}
                </div>
                Use text_suffix when you have a control with text directly following.
            </div>
            {{--Form::component('text_suffix','shared.forms._text_suffix_ex', ['name', 'value', 'col_size', 'other_text', 'id'=>null, 'on_change'=>null ] );--}}
            <div class="row">
                {{ Form::text_suffix($name, $value, $col_size, $other_text, $id, $on_change ) }}
            </div>
            {{ Form::separator_row() }}
        </div>

        <div id="textarea">
            <div class="row">
                <h1>Text areas</h1>
                <div style="display: none;">
                    {{ $name = 'textarea_name'}}
                    {{ $value = 'TextArea value' }}
                    {{ $title = 'row_textarea_inline' }}
                    {{ $label_col_size = 2 }}
                    {{ $col_size = 4 }}
                    {{ $id = 'textarea_id' }}
                </div>
                {{--
                    Form::component('textarea_ex','shared.forms._textarea_ex', ['name', 'value', 'col_size'=>null, 'offset'=>null, 'id'=>null] );
                    Form::component('row_textarea_inline', 'shared.forms._row_label_control_inline', ['name', 'title', 'value', 'label_col_size', 'col_size', 'size'=>FormComponentHelper::SIZE_SMALL, 'type'=>'textarea'] );
                --}}
                Textarea controls for larger descriptions
                <ul>
                    <li>textarea_ex: basic textarea field</li>
                    <div class="row">
                        {{ Form::textarea_ex($name, $value) }}
                    </div>
                    <li>row_textarea_inline: a row with a text area field and label</li>
                    {{ Form::row_textarea_inline($name, $title, $value, $label_col_size, $col_size) }}
                </ul>
            </div>
            {{ Form::separator_row() }}
        </div>
        @endsection

        @section('page_script')
            {{ Html::script('/js/moment.min.js') }}
            {{ Html::script('/js/daterangepicker.js') }}


            <script>
                $(document).ready(function () {
                    init_daterangepicker('date_id_1');
                    init_daterangepicker_with_null_support('date_id_2');

                    $(function () {
                        $('[data-toggle="tooltip"]').tooltip();
                    });
                });
            </script>
        @endsection

        @section('page_style')
            {{ Html::style('/css/daterangepicker.css') }}
            {{ Html::style('/css/daterangepicker_custom.css') }}

            <style>
                .select-div-class {
                    background-color: aqua;
                }
            </style>
@endsection