@props(['title' => ''])
<style>
    .modal-header .btn-close {
        padding: calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);
        margin-top: calc(-.5 * var(--bs-modal-header-padding-y));
        margin-right: calc(-.5 * var(--bs-modal-header-padding-x));
        margin-bottom: calc(-.5 * var(--bs-modal-header-padding-y));
        margin-left: auto;
    }
</style>
@if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif
 <div class="modal fade" id="myDownloadPopup_4929BDAD-CC9B-4083-A737F8E9F55E7700" tabindex="-1" aria-labelledby="myDownloadPopup_4929BDAD-CC9B-4083-A737F8E9F55E7700Label" style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="myDownloadPopup_4929BDAD-CC9B-4083-A737F8E9F55E7700Label">
                            Hãy điền vào biểu mẫu để tải xuống tệp tin
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="background: none; border: none; font-size: 1.5rem; font-weight: bold; cursor: pointer; color: #000; padding: 0.5rem 1rem; opacity: 0.5;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                    <div class="contact-form-wrapper">
                        @if($title)
                            <h3 class="form-title">{{ $title }}</h3>
                        @endif

                        <form id="myForm" method="POST" action="{{route('lien-he.store')}}" enctype="multipart/form-data">
                            @csrf
                            
                            <div class="grid-container">
                               <div>
                                    <div
                                        id="FieldContainer-ten_38553"
                                        class="FieldContainer"
                                    >
                                        <label for="ten"
                                            >Tên<span class="required">*</span> (<span
                                                class="required"
                                                >*</span
                                            >bắt buộc)</label
                                        >
                                        <input
                                            type="text"
                                            name="ten"
                                            id="ten"
                                            placeholder=""
                                            class=""
                                            value="{{old('ten','')}}"
                                            autocomplete="ten"
                                            required="required"
                                        /><br />
                                        @error('ten')
                                        <div style="color:#B71819">{{$message}}</div>
                                        @enderror 
                                    </div>
                                </div>
                                <div>
                                    <div
                                        id="FieldContainer-ho_38553"
                                        class="FieldContainer"
                                    >
                                        <label for="ho_38553"
                                            >Họ<span class="required">*</span></label
                                        >
                                        <input
                                            type="text"
                                            name="ho"
                                            id="ho_38553"
                                            placeholder=""
                                            class=""
                                            value="{{old('ho','')}}"
                                            autocomplete="ho"
                                            required="required"
                                        /><br />
                                        @error('ho')
                                        <div style="color:#B71819">{{$message}}</div>
                                        @enderror 
                                    </div>
                                </div>
                            </div>

                            <div id="FieldContainer-email_38553" class="FieldContainer">
                                <label for="email_38553"
                                    >Email<span class="required">*</span></label
                                >
                                <input
                                    type="email"
                                    name="email"
                                    id="email_38553"
                                    placeholder=""
                                    class=""
                                    value="{{old('email','')}}"
                                    autocomplete="email"
                                    required=
                                    "required"
                                /><br />
                                @error('email')
                                        <div style="color:#B71819">{{$message}}</div>
                                        @enderror 
                            </div>

                            <div id="FieldContainer-dien_thoai_38553" class="FieldContainer">
                                <label for="dien_thoai_38553"
                                    >Điện thoại<span class="required">*</span></label
                                >
                                <input
                                    type="text"
                                    name="dien_thoai"
                                    id="dien_thoai_38553"
                                    placeholder=""
                                    class=""
                                    value="{{old('dien_thoai')}}"
                                    autocomplete="dien_thoai"
                                    required="required"
                                /><br />
                                @error('dien_thoai')
                                    <div style="color:#B71819">{{$message}}</div>
                                @enderror 
                            </div>

                            <div
                                id="FieldContainer-cong_ty_38553"
                                class="FieldContainer"
                            >
                                <label for="cong_ty_38553"
                                    >Công ty<span class="required">*</span></label
                                >
                                <input
                                    type="text"
                                    name="cong_ty"
                                    id="cong_ty_38553"
                                    placeholder=""
                                    class=""
                                    value="{{old('cong_ty')}}"
                                    autocomplete="on"
                                    required="required"
                                /><br />
                                @error('cong_ty')
                                    <div style="color:#B71819">{{$message}}</div>
                                @enderror 
                            </div>

                            <div id="FieldContainer-dia_chi_38553" class="FieldContainer">
                                <label for="dia_chi_38553"
                                    >Địa chỉ<span class="required"
                                        >*</span
                                    ></label
                                >
                                <input
                                    type="text"
                                    name="dia_chi"
                                    id="dia_chi_38553"
                                    placeholder=""
                                    class=""
                                    value="{{old('dia_chi')}}"
                                    autocomplete="on"
                                    required="required"
                                /><br />
                                @error('dia_chi')
                                    <div style="color:#B71819">{{$message}}</div>
                                @enderror 
                            </div>

                            <x-drop-down-tinh-thanh />

                            <div
                                id="FieldContainer-nguon_khach_hang_38553"
                                class="FieldContainer"
                            >
                                <label for="nguon_khach_hang_38553"
                                    >Bạn biết đến chúng tôi qua đâu?</label
                                >
                                <select
                                    name="nguon_khach_hang"
                                    id="nguon_khach_hang_38553"
                                    class=""
                                    data-type="select"
                                >
                                    <option value="" selected="" disabled="">
                                        Vui lòng chọn
                                    </option>
                                    <option value="Triển lãm thương mại hoặc sự kiện">
                                        Triển lãm thương mại hoặc sự kiện
                                    </option>
                                    <option value="Website">Trang web</option>->later(now()->plus(minutes: 10), new OrderShipped($order));
                                    <option value="Công cụ tìm kiếm">
                                        Công cụ tìm kiếm
                                    </option>
                                    <option value="Mạng xã hội">Mạng xã hội</option>
                                    <option value="Quảng cáo">Quảng cáo</option>
                                    <option value="Khác">Khác</option>
                                </select>
                                @error('nguon_khach_hang')
                                    <div style="color:#B71819">{{$message}}</div>
                                @enderror 
                            </div>

                            <div id="FieldContainer-mo_ta_38553" class="FieldContainer">
                                <label for="mo_ta_38553">Lưu ý</label>
                                <textarea
                                    name="mo_ta"
                                    id="mo_ta_38553"
                                    placeholder=""
                                    class=""
                                    maxlength="500"
                                >{{old('mo_ta','')}}</textarea>
                                <br />
                                @error('mo_ta')
                                    <div style="color:#B71819">{{$message}}</div>
                                @enderror 
                            </div>

                            <div
                                id="FieldContainer-gdprconsent_38553"
                                class="FieldContainer"
                            >
                                <div class="checkbox fieldoptioncontainer">
                                    <label
                                        ><input
                                            type="checkbox"
                                            name="dong_y_dieu_khoan"
                                            id="gdprconsent_38553-1"
                                            value="1"
                                            class=""
                                        /><span
                                            >Bằng cách điền vào biểu mẫu này, tôi đồng ý
                                            với các điều khoản và chính sách bảo
                                            mật.</span
                                        ></label
                                    >
                                </div>
                                @error('dong_y_dieu_khoan')
                                    <div style="color:#B71819">{{$message}}</div>
                                @enderror 
                            </div>

                            <p class="small">
                                <a
                                    href="{{url('about-this-site/legal-notice')}}"
                                    target="_blank"
                                    >Điều khoản và Điều kiện</a
                                >
                                |
                                <a
                                    href="{{url('about-this-site/privacy')}}"
                                    target="_blank"
                                    >Chính sách bảo mật</a
                                >
                            </p>

                            {{-- Then input xac thuc email de nhan biet --}}
                            <input name="form_xac_thuc" value="{{ $formDocument }}" hidden/>
                            
                            <p>
                                <button type="submit" id="form-trial-submit">Gửi</button>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@push('scripts')
        <script src="{{asset('/assets/js/bootstrap.bundle.min.js')}}" crossorigin="anonymous"></script>
        <script src="{{asset('/assets/js/jquery.validate.min.js')}}" crossorigin="anonymous"></script>
        <script>
            $(document).ready(function() {
                $('#myForm').validate({
                    rules: {
                        firstname: { required: true },
                        email: { required: true, email: true }
                    }
                });
            });
        </script>
    @endpush