<?php

$id = Str::random(5);
$route = route('frontend.estimate.search');
$style = 'form-inline';
$buttonStyle = 'btn-primary';
$buttonText = 'Search';

$line1Placeholder = setting('package::estimate.line1_placeholder', 'e.g. 48, common rd');
$postcodePlaceholder = setting('package::estimate.postcode_placeholder', 'e.g B78 0AB');

$moduleHtml = '
    <form
        id="{id}"
        class="estimate-form has-captcha {style}"
        action="{route}"
        method="POST"

    >
        <div class="validation" style="display: none;"></div>

        <div class="form-group">
            <input
                class="form-control"
                name="line_1"
                type="text"
                maxlength="50"
                placeholder="{line1_placeholder}"
                autocomplete="line-1"
                required
            >
        </div>

        <div class="form-group">
            <input
                class="form-control"
                name="postcode"
                type="text"
                maxlength="10"
                placeholder="{postcode_placeholder}"
                autocomplete="postal-code"
                required
            >
        </div>

        <div class="form-group">
            <button
                class="form-submit btn {button_style} font-weight-bold text-uppercase"
                type="submit"
            >
                {button_text}
            </button>
        </div>
    </form>
';

$moduleHtml .= '
    <script>
        var docReady{id} = function (fn) {
            var stateCheck = setInterval(function () {
                if (document.readyState !== "complete") return;
                clearInterval(stateCheck);
                try {fn()} catch (e) {}
            }, 1000);
        };
        docReady{id}(function () {
            let validationRequest{id} = new ValidationRequest("{id}", "estimate_search");
            validationRequest{id}.init();
        });
    </script>
';

$moduleHtml = str_replace('{id}', $id, $moduleHtml);
$moduleHtml = str_replace('{route}', $route, $moduleHtml);
$moduleHtml = str_replace('{style}', $style, $moduleHtml);
$moduleHtml = str_replace('{button_style}', $buttonStyle, $moduleHtml);
$moduleHtml = str_replace('{button_text}', $buttonText, $moduleHtml);


$moduleHtml = str_replace('{line1_placeholder}', $line1Placeholder, $moduleHtml);
$moduleHtml = str_replace('{postcode_placeholder}', $postcodePlaceholder, $moduleHtml);

$moduleSettings = '
    {
        "style": "form-inline",
        "button_style": "btn-primary"
    }
';
?>

<div class="row clearfix border-0">
    <div class="col-12"
         data-noedit
         data-module="estimate"
         data-dialog-width="500px"
         data-module-desc="Estimate"
         data-html="{{ encode_uri_component($moduleHtml) }}"
         data-settings="{{ encode_uri_component($moduleSettings) }}"
    >
    </div>
</div>
