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

@section('style')
    <!-- Notifications js -->
    <link href="{{ URL::asset('assets/plugins/notify-growl/css/jquery.growl.css') }}" rel="stylesheet" />
    <link href="{{ URL::asset('assets/plugins/notify-growl/css/notifIt.css') }}" rel="stylesheet" />

    <style>
        span.select2.select2-container.select2-container--default {
            display: none;
        }
    </style>
@endsection

@section('content')

    <main>
        <div class="default-bg-cover relative py-8 lg:py-16"
            style="background-image:url({{ !empty($data['register']['image']) && CheckFileInServer($data['register']['image']) ? $data['register']['image'] : Module::asset('frontend:img/register-bg.jpg') }})">
            <div class="container">
                <div class="flex -mx-4 flex-wrap">
                    <div class="p-3 w-full lg:w-1/2 flex flex-col ">
                        <div class="text-base-5xl text-whiten font-medium text-shadow">
                            {!! !empty($data['register']['name']) ? $data['register']['name'] : '' !!}</div>
                    </div>
                    <div class="p-3 lg:w-1/2">
                        <form class="form-wrapper line-form bg-whiten px-6 py-12 rounded-xl shadow-lg"
                            onsubmit="setRegister();return false;" id="register_frm" name="register_frm" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-lg-12 mb-3 mx-0">
                                    <label>@lang('frontend::lang.full_name')</label>
                                    <input type="text"name="name"id="name"
                                        class="form-style font-weight-semibold px-1 py-3" placeholder="* @lang('frontend::lang.full_name')"
                                        data-msg-required="This field is required." required />
                                </div>
                                <div class="col-md-6 mx-0 mb-3">
                                    <label>@lang('frontend::lang.email')</label>
                                    <input type="email" name="email" id="email"
                                        class="form-style font-weight-semibold px-1 py-3" placeholder="* @lang('frontend::lang.email')"
                                        data-msg-required="This field is required." required />
                                </div>
                                <div class="col-md-6  mb-3 mx-0">
                                    <label>@lang('frontend::lang.telephone')</label><input type="text"name="tel"id="tel"
                                        class="form-style font-weight-semibold px-1 py-3" placeholder="* @lang('frontend::lang.telephone')"
                                        data-msg-required="This field is required." required />
                                </div>
                                <div class="form-group col-12 mx-0 mb-3">
                                    <label class="form-label">@lang('frontend::lang.date_birth')</label>
                                    <input type="date" name="birthday"
                                        id="birthday"class="form-style font-weight-semibold px-1 py-3"
                                        placeholder="* @lang('frontend::lang.date_birth')" data-msg-required="This field is required."
                                        required />
                                </div>
                                <div class="form-group col-12 mx-0 mb-3">
                                    <label class="form-label">@lang('frontend::lang.address')</label>
                                    <input type="text" name="address" id="address" placeholder="* @lang('frontend::lang.address')"
                                        class="form-style font-weight-semibold px-1 py-3"
                                        data-msg-required="This field is required." required />
                                </div>
                                <div class="form-group col-12 col-sm-6 mx-0 mb-3">
                                    <label class="form-label">@lang('frontend::lang.zipcode')</label>
                                    <input type="text" name="zipcode" placeholder="* @lang('frontend::lang.zipcode')"
                                        class="form-style font-weight-semibold px-1 py-3 h-auto mwz-zipcode" maxlength="5"
                                        size="5" data-msg-required="This field is required." required />
                                </div>
                                <div class="form-group col-12 col-sm-6 mx-0 mb-3">
                                    <label class="form-label">@lang('frontend::lang.province')</label>
                                    <select class="form-select form-style px-1 py-3 h-auto mwz-province"name="province_id"
                                        data-placeholder="@lang('frontend::lang.province')" required>
                                        <option value="" selected="selected">
                                            @lang('frontend::lang.province')</option>
                                    </select>
                                </div>
                                <div class="form-group col-12 col-sm-6  mx-0 mb-3">
                                    <label class="form-label">@lang('frontend::lang.city')</label>
                                    <select class="form-select form-style px-1 py-3 h-auto mwz-city" name="city_id"
                                        data-placeholder="@lang('frontend::lang.city')" required>
                                        <option value="" selected="selected">
                                            @lang('frontend::lang.city')</option>
                                    </select>
                                </div>
                                <div class="form-group col-12 col-sm-6 mx-0 mb-3">
                                    <label class="form-label">@lang('frontend::lang.district')</label>
                                    <select class="form-select form-style px-1 py-3 h-auto mwz-district" name="district_id"
                                        data-placeholder="@lang('frontend::lang.district')" required>
                                        <option value="" selected="selected">
                                            @lang('frontend::lang.district')
                                        </option>
                                    </select>
                                </div>
                                <div class="form-group col-12 mx-0 mb-3">
                                    <label>@lang('frontend::lang.message')</label>
                                    <textarea name="message" id="message" rows="4" required
                                        class="form-style form-style font-weight-semibold text-color-light px-1" placeholder="* @lang('frontend::lang.message')"></textarea>
                                </div>
                                <div class="col-12 py-6 flex">
                                    <input type="checkbox" class="mr-2" id="accept" name="accept" value="1">
                                    <label for="accept" of="policy">@lang('frontend::lang.pdpa_00')
                                        <a class="text-1st"
                                            href="{{ !empty($page_init['pdpa']['url']) ? $page_init['pdpa']['url'] : '#' }}">
                                            <u>@lang('frontend::lang.pdpa_01')</u></a>
                                    </label>
                                </div>
                                <div class="col-12">
                                    <div class="g-recaptcha" data-callback="makeaction"
                                        data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI">
                                    </div>
                                </div>
                                <div class="col-12 pt-6">
                                    <button type="submit" id="submit" disabled
                                        class="butn w-full bg-linear-green text-base rounded-none font-bold text-white px-5 py-3">
                                        <div class="flex items-center space-x-2 justify-center">
                                            <p>@lang('frontend::lang.register')</p><i class="fa fa-chevron-right"></i>
                                        </div>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@section('script')

    <script src="{{ URL::asset('assets/plugins/bootbox/bootbox.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/notify-growl/js/rainbow.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/notify-growl/js/jquery.growl.js') }}"></script>

    <link rel="stylesheet" href="{{ mix('css/front.css') }}">
    <script src="{{ mix('js/front.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/select2/select2.full.min.js') }}"></script>

    <script src='https://www.google.com/recaptcha/api.js?hl={{ app()->getLocale() }}'></script>

    <script>
        makeaction = function() {
            document.getElementById('submit').disabled = false;
        }

        setRegister = function() {
            var frm_data = new FormData($("#register_frm")[0]);
            $.ajax({
                url: "{{ mwz_route('api.register_save') }}",
                type: "POST",
                contentType: false,
                data: frm_data,
                processData: false,
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                success: function(resp) {
                    if (resp.success) {
                        window.location.reload();
                    } else {
                        mwz_noti("error", resp.msg);
                    }
                },
            });
        }
    </script>
@endsection