@extends('frontend::layouts.master')

@push('styles')
    <script type="text/javascript">
        var onloadCallback = function() {
            grecaptcha.render('get_recaptcha', {
                'sitekey': "{{ $page_init['setting']['recapcha'] ?? '' }}",
                'callback': function() {
                    $('#submit').removeAttr('disabled');
                }
            });
        };
    </script>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
    <link type="text/css" href="{{ asset('assets/libs/toastr/build/toastr.min.css') }}" rel="stylesheet">
    <style>
        .form-invalid-message {
            color: rgb(239 68 68) !important;
            font-size: 11px !important;
            margin-top: 3px !important;
            padding-bottom: 0.25rem !important;
        }
    </style>
@endpush

@section('content')
    @php
        $breadcrumbArray = [['name' => $link_index['name'] ?? '', 'url' => $link_index['url'] ?? ''], ['name' => $link_gas_detector['name'] ?? '', 'url' => $link_gas_detector['url'] ?? 'javascript:void(0);'], ['name' => $article['name'] ?? '', 'url' => 'javascript:void(0);']];
    @endphp
    <x-frontend::section.banner name="{{ $link_gas_detector['name'] ?? '' }}" image="{{ $link_gas_detector['image'] ?? '' }}" :breadcrumbArray=$breadcrumbArray />

    <section class="section sect-calibration">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 center mb-4">
                    <div class="contact-box calibration-box p-4">
                        <h4 class="htitle border-bottom m-b-20">
                            {{ __('frontend::lang.page.calibration_request.title_form') }}
                            <span class="text-red" style="float: right; font-size: 15px;">
                                {{ __('frontend::lang.page.calibration_request.title_description') }}
                            </span>
                        </h4>
                        <form class="form-calibration" id="calibration_frm" method="POST" onsubmit="send_calibration();">
                            <div class="recruitment-form-grid">
                                <div class="recruitment-form-row recruitment-form-row-top">
                                    <label class="recruitment-label" for="company_name">{{ __('frontend::lang.page.calibration_request.form.company') }}
                                        &nbsp;<span class="text-danger">*</span>
                                    </label>
                                    <div class="recruitment-field">
                                        <input class="recruitment-input" id="company_name" name="company_name" data-max="{{ __('frontend::lang.page.calibration_request.form.placeholder.max', ['label' => __('frontend::lang.page.calibration_request.form.company'), 'max' => 255]) }}" type="text" placeholder="{{ __('frontend::lang.page.calibration_request.form.placeholder.input', ['label' => __('frontend::lang.page.calibration_request.form.company')]) }}">
                                    </div>
                                </div>
                                <div class="recruitment-form-row">
                                    <label class="recruitment-label" for="contact_person">{{ __('frontend::lang.page.calibration_request.form.person') }}
                                        &nbsp;<span class="text-danger">*</span>
                                    </label>
                                    <div class="recruitment-field">
                                        <input class="recruitment-input" id="contact_person" name="person" data-max="{{ __('frontend::lang.page.calibration_request.form.placeholder.max', ['label' => __('frontend::lang.page.calibration_request.form.person'), 'max' => 255]) }}" type="text" placeholder="{{ __('frontend::lang.page.calibration_request.form.placeholder.input', ['label' => __('frontend::lang.page.calibration_request.form.person')]) }}">
                                    </div>
                                </div>
                                <div class="recruitment-form-row recruitment-form-row-top">
                                    <label class="recruitment-label" for="address">{{ __('frontend::lang.page.calibration_request.form.address') }}
                                        &nbsp;<span class="text-danger">*</span>
                                    </label>
                                    <div class="recruitment-field">
                                        <textarea class="recruitment-input recruitment-textarea" id="address" name="address" data-max="{{ __('frontend::lang.page.calibration_request.form.placeholder.max', ['label' => __('frontend::lang.page.calibration_request.form.address'), 'max' => 255]) }}" rows="4" placeholder="{{ __('frontend::lang.page.calibration_request.form.placeholder.input', ['label' => __('frontend::lang.page.calibration_request.form.address')]) }}"></textarea>
                                    </div>
                                </div>
                                <div class="recruitment-form-row">
                                    <label class="recruitment-label" for="tel">{{ __('frontend::lang.page.calibration_request.form.tel') }}
                                        &nbsp;<span class="text-danger">*</span>
                                    </label>
                                    <div class="recruitment-field">
                                        <input class="recruitment-input tel-number" id="tel" name="tel" data-max="{{ __('frontend::lang.page.calibration_request.form.placeholder.max', ['label' => __('frontend::lang.page.calibration_request.form.tel'), 'max' => 20]) }}" type="text" placeholder="{{ __('frontend::lang.page.calibration_request.form.placeholder.input', ['label' => __('frontend::lang.page.calibration_request.form.tel')]) }}">
                                    </div>
                                </div>
                                <div class="recruitment-form-row">
                                    <label class="recruitment-label" for="email">{{ __('frontend::lang.page.calibration_request.form.email') }}
                                        &nbsp;<span class="text-danger">*</span>
                                    </label>
                                    <div class="recruitment-field">
                                        <input class="recruitment-input" id="email" name="email" data-max="{{ __('frontend::lang.page.calibration_request.form.placeholder.max', ['label' => __('frontend::lang.page.calibration_request.form.email'), 'max' => 255]) }}" type="email" placeholder="{{ __('frontend::lang.page.calibration_request.form.placeholder.input', ['label' => __('frontend::lang.page.calibration_request.form.email')]) }}">
                                    </div>
                                </div>
                                <div class="recruitment-form-row">
                                    <label class="recruitment-label" for="gas_measurement">{{ __('frontend::lang.page.calibration_request.form.gas_measurement') }}</label>
                                    <div class="recruitment-field">
                                        <input class="recruitment-input" id="gas_measurement" name="gas" data-max="{{ __('frontend::lang.page.calibration_request.form.placeholder.max', ['label' => __('frontend::lang.page.calibration_request.form.gas_measurement'), 'max' => 255]) }}" type="text" placeholder="{{ __('frontend::lang.page.calibration_request.form.placeholder.input', ['label' => __('frontend::lang.page.calibration_request.form.gas_measurement')]) }}">
                                    </div>
                                </div>
                                <div class="recruitment-form-row">
                                    <label class="recruitment-label" for="range_measurement">{{ __('frontend::lang.page.calibration_request.form.range_measurement') }}</label>
                                    <div class="recruitment-field">
                                        <input class="recruitment-input" id="range_measurement" name="range" data-max="{{ __('frontend::lang.page.calibration_request.form.placeholder.max', ['label' => __('frontend::lang.page.calibration_request.form.range_measurement'), 'max' => 255]) }}" type="text" placeholder="{{ __('frontend::lang.page.calibration_request.form.placeholder.input', ['label' => __('frontend::lang.page.calibration_request.form.range_measurement')]) }}">
                                    </div>
                                </div>
                                <div class="recruitment-form-row">
                                    <label class="recruitment-label" for="quantity_measurement">{{ __('frontend::lang.page.calibration_request.form.quantity_measurement') }}</label>
                                    <div class="recruitment-field">
                                        <input class="recruitment-input recruitment-input--short" id="quantity_measurement" name="number" data-max="{{ __('frontend::lang.page.calibration_request.form.placeholder.max', ['label' => __('frontend::lang.page.calibration_request.form.quantity_measurement'), 'max' => 255]) }}" type="number" min="1" placeholder="{{ __('frontend::lang.page.calibration_request.form.placeholder.input', ['label' => __('frontend::lang.page.calibration_request.form.quantity_measurement')]) }}">
                                    </div>
                                </div>
                                <div class="recruitment-form-row">
                                    <label class="recruitment-label" for="model_device">{{ __('frontend::lang.page.calibration_request.form.model_device') }}</label>
                                    <div class="recruitment-field">
                                        <input class="recruitment-input" id="model_device" name="model" data-max="{{ __('frontend::lang.page.calibration_request.form.placeholder.max', ['label' => __('frontend::lang.page.calibration_request.form.model_device'), 'max' => 255]) }}" type="text" placeholder="{{ __('frontend::lang.page.calibration_request.form.placeholder.input', ['label' => __('frontend::lang.page.calibration_request.form.model_device')]) }}">
                                    </div>
                                </div>
                                <div class="recruitment-form-row recruitment-form-row-top">
                                    <label class="recruitment-label" for="comment">{{ __('frontend::lang.page.calibration_request.form.comment') }}</label>
                                    <div class="recruitment-field">
                                        <textarea class="recruitment-input recruitment-textarea" id="comment" name="comment" data-max="{{ __('frontend::lang.page.calibration_request.form.placeholder.max', ['label' => __('frontend::lang.page.calibration_request.form.comment'), 'max' => 255]) }}" rows="5" placeholder="{{ __('frontend::lang.page.calibration_request.form.placeholder.input', ['label' => __('frontend::lang.page.calibration_request.form.comment')]) }}"></textarea>
                                    </div>
                                </div>
                                <div class="form-check mb-4 m-t-20">
                                    <input class="form-check-input" id="policy" name="policy" type="checkbox" placeholder="{{ __('frontend::lang.page.calibration_request.form.placeholder.input', ['label' => __('frontend::lang.page.calibration_request.form.policy')]) }}">
                                    <label class="form-check-label" for="policy">
                                        {{ __('frontend::lang.page.calibration_request.form.policy') }}
                                        <a class="m-l-5" href="{{ $page_init['policy']['url'] ?? 'javascript:void(0)' }}" target="_blank">
                                            {{ $page_init['policy']['name'] ?? '' }}
                                        </a>
                                    </label>
                                </div>
                                <div class="mb-4" id="get_recaptcha"></div>
                                <div class="recruitment-submit-wrap m-t-30">
                                    <button class="btn btn-primary" id="submit" type="submit" disabled>
                                        {{ __('frontend::lang.btn.send_form') }}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
    </section>
@endsection

@push('scripts')
    <script src="{{ asset('assets/libs/validator/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/libs/toastr/build/toastr.min.js') }}"></script>

    {{ module_vite('build-frontend', 'resources/assets/js/calibration.js') }}
@endpush