@extends('library.layout')

@section('title')
    ลงทะเบียนรับประกันสินค้าแบรนด์ Fjällräven 1 ปี
@endsection

@section('include_script')
<script src="{{ asset('/js/warranty.js') }}"></script>
@endsection

@section('include_style')
<link rel="stylesheet" type="text/css" href="{{ asset('/css/warranty.css') }}">
@endsection

@section('content')
<form method="post" enctype="multipart/form-data" id="upload_form">
    @csrf
    <div class="warranty-form">
        <div class="box active" id="box-1">
            <img src="{{ asset('/assets/images/logo_fj.png') }}" alt="" style="width: 50%;display: block;margin: 0 auto;">
            <h1 class="title" style="font-family: arctic_foxregular !important;text-align: center;">Fjällräven Thailand</h1>
            <br>
            <h3 class="title" style="text-align: center;">ลงทะเบียนออนไลน์เพืิ่อรับสิทธิประกันสินค้านาน 1 ปี<br>Online Form 1 Year Product Warranty Registration</h3>
            <div class="inputgroup">
                <div class="row">
                    <div class="col-sm-12">
                        <input type="text" class="" id="txt_email" name="txt_email" maxlength="120"/>
                        <label for="txt_email">Email / อีเมล <span style="color:red;">*</span></label>
                    </div>
                </div>
                <p id="error-email" style="color: red;"></p>
            </div>
            <div class="inputgroup">
                <div class="txt_login" style="text-align: left;">
                    <p id="error-consent-1" style="color: red;"></p>
                    <p class="additional">
                        <input type="checkbox" class="" id="consent_1" name="consent_1" style="cursor: pointer;"/>
                        <span class="content" onclick="spanCheckedBox(1);" style="cursor: pointer;">
                            ข้อมูลของท่านจะถูกนำไปใช้ เพื่อวัตถุประสงค์ในการดำเนินงานของบริษัทเท่านั้น ทางบริษัทดำเนินมาตรการที่เข้มงวดในการรักษาความปลอดภัยข้อมูลลูกค้า ตลอดจนป้องกันมิให้มีการนำข้อมูลของท่านไปใช้โดยมิได้รับอนุญาต 
                        </span>
                        <span class="content">
                            <a href="https://the-adjective.com/pages/สร้างบัญชีสมาชิก-pdpa" target="_blank" class="policy">สามารถดูรายละเอียดข้อมูลความเป็นส่วนตัวเพิ่มเติม</a>
                        </span>
                    </p>
                </div>
            </div>
            <a id="nextButton-1" class="button-dark" href="javascript: lastvalidate(1);">ถัดไป</a>
        </div>
        <div class="box" id="box-2">
            <img src="{{ asset('/assets/images/logo_fj.png') }}" alt="" style="width: 50%;display: block;margin: 0 auto;">
            <h1 class="title" style="font-family: arctic_foxregular !important;text-align: center;">Fjällräven Thailand</h1>
            <br>
            <h3 class="title" style="text-align: center;">ลงทะเบียนออนไลน์เพืิ่อรับสิทธิประกันสินค้านาน 1 ปี</h3>
            <p>เเด่ ลูกค้าทุกท่าน ขอบคุณเป็นอย่างสูงที่เลือกซื้อสินค้าของ <span style="font-family: arctic_foxregular !important;font-size: 14px;">Fjällräven Thailand</span> !!</p>
            <br>
            <h3 class="title">เงื่อนไขการรับประกัน</h3>
            <div class="inputgroup">
                <div class="txt_login" style="text-align: left;">
                    <p class="additional">
                        <span class="content">
                            1) การรับประกันสินค้าจะครอบคลุมเมื่อลูกค้าทำการซื้อจากทางเรา <span style="font-family: arctic_foxregular !important;font-size: 14px;">Fjällräven Thailand</span> ร้าน The Adjective และคู่ค้าของเราในราชอาณาจักรไทยเท่านั้น
                        </span>
                    </p>
                    <p class="additional">
                        <span class="content">
                            2) หากสินค้ามีปัญหาต้องการเปลี่ยนใบใหม่ สามารถเปลี่ยนได้ภายใน 7 วัน
                        </span>
                    </p>
                    <p class="additional">
                        <span class="content">
                            3) การการันตี 1 ปีนั้นครอบคลุมในส่วน กระดุม, ห่วงปรับกระเป๋า และ ซิป ไม่ครอบคลุมถึง การฉีกขาดของกระเป๋า
                        </span>
                    </p>
                </div>
            </div>
            <br>
            <h3 class="title" style="text-align: center;">Online Form 1 Year Product Warranty Registration</h3>
            <p>Dear All Customers,<br>Thank you for visiting us and making your purchase at <span style="font-family: arctic_foxregular !important;font-size: 14px;">Fjällräven</span> Thailand !!</p>
            <br>
            <h3 class="title">Warranty terms & conditions</h3>
            <div class="inputgroup">
                <div class="txt_login" style="text-align: left;">
                    <p class="additional">
                        <span class="content">
                            1) This warranty will cover only the products purchased directly from <span style="font-family: arctic_foxregular !important;font-size: 14px;">Fjällräven</span> Thailand, The Adjective and <span style="font-family: arctic_foxregular !important;font-size: 14px;">Fjällräven</span> Thailand’s official retailers within the Kingdom of Thailand ONLY.
                        </span>
                    </p>
                    <p class="additional">
                        <span class="content">
                            2) If the product has a problem, the product can only be exchanged within 7 days of purchase.
                        </span>
                    </p>
                    <p class="additional">
                        <span class="content">
                            3) The one-year product warranty will cover ONLY buttons, saddlebag loops, and zippers. This warranty does not cover fabric damage.
                        </span>
                    </p>
                </div>
            </div>

            <div class="inputgroup">
                <div class="txt_login" style="text-align: left;">
                    <p id="error-consent-2" style="color: red;"></p>
                    <p class="additional">
                        <input type="checkbox" style="cursor: pointer;" class="" id="consent_2" name="consent_2" />
                        <span class="content" onclick="spanCheckedBox(2);" style="cursor: pointer;">
                            ท่านยอมรับในข้อตกลง รายละเอียดและ เงื่อนไขในการรับสิทธิประกันสินค้า /<br>Please acknowledge the terms, details, and conditions for receiving product warranty rights.
                        </span>
                    </p>
                </div>
            </div>

            <a class="button-dark-muti" href="javascript: prevStep(1)">ย้อนกลับ</a>
            <a class="button-dark-muti" href="javascript: lastvalidate(2);">ถัดไป</a>
        </div>
        <div class="box" id="box-3">
            <img src="{{ asset('/assets/images/logo_fj.png') }}" alt="" style="width: 50%;display: block;margin: 0 auto;">
            <h1 class="title" style="font-family: arctic_foxregular !important;text-align: center;">Fjällräven Thailand</h1>
            <br>
            <h3 class="title" style="text-align: center;">ลงทะเบียนออนไลน์เพืิ่อรับสิทธิประกันสินค้านาน 1 ปี<br>Online Form 1 Year Product Warranty Registration</h3>
            <div class="inputgroup">
                <div class="row">
                    <div class="col-sm-12">
                        <label>กรุณากรอกแบบฟอร์มนี้ พร้อมรายละเอียดการซื้อของคุณ เพื่อลงทะเบียนสินค้าของคุณสำหรับการรับประกัน 1 ปีนับจากวันที่ซื้อ</label>
                    </div>
                </div>
            </div>
            <div class="inputgroup">
                <div class="row">
                    <div class="col-sm-12">
                        <label>Please fill out this form about your purchase’s details in order to get one-year product warranty from the date of purchase</label>
                    </div>
                </div>
            </div>
            <div class="inputgroup">
                <div class="row">
                    <div class="col-sm-12">
                        <input type="text" class="" id="txt_name" name="txt_name" maxlength="120" />
                        <label for="txt_name">Name-Surname / ชื่อ-นามสกุล <span style="color:red;">*</span></label>
                    </div>
                </div>
                <p id="error-name" style="color: red;"></p>
            </div>
            <div class="inputgroup">
                <div class="row">
                    <div class="col-sm-12">
                        <input type="text" class="" id="txt_phone" name="txt_phone" maxlength="15" />
                        <label for="txt_phone">Phone Number / เบอร์โทรติดต่อ <span style="color:red;">*</span></label>
                    </div>
                </div>
                <p id="error-phone" style="color: red;"></p>
            </div>
            <div class="inputgroup">
                <div class="row">
                    <div class="col-sm-12">
                        <input type="text" class="" id="txt_date_of_birth" name="txt_date_of_birth" />
                        <label for="txt_date_of_birth">Date of birth / วัน-เดือน-ปีเกิด <span style="color:red;">*</span></label>
                    </div>
                </div>
                <p id="error-date_of_birth" style="color: red;"></p>
            </div>
            <div class="inputgroup">
                <div class="row">
                    <div class="col-sm-12">
                        <input type="text" class="" id="txt_product" name="txt_product" />
                        <label for="txt_product">Your Product / สินค้าของคุณ <span style="color:red;">*</span></label>
                    </div>
                    <div class="col-sm-12">
                        <br>
                        <label style="color: #ccc;">Version type and color / ชื่อรุ่น และสี</label>
                    </div>
                </div>
                <p id="error-product" style="color: red;"></p>
            </div>

            <div class="inputgroup">
                <div class="row">
                    <div class="col-sm-12">
                        <input type="text" class="" id="txt_date_of_purchase" name="txt_date_of_purchase" />
                        <label for="txt_date_of_purchase">Date of purchase / วันที่ทำการซื้อ<span style="color:red;">*</span></label>
                    </div>

                    <div class="col-sm-12">
                        <br>
                        <label style="color: #ccc;">Please refer to the proof of purchase / กรุณาอ้างอิงตามหลักฐานการซื้อ</label>
                    </div>
                </div>
                <p id="error-date_of_purchase" style="color: red;"></p>
            </div>
            <div class="inputgroup">
                <div class="row">
                    <div class="col-sm-12">
                        <label id="label-gender-ontop" style="background-color: #fff;line-height: 1;" for="ddl_gender">Where did you buy? / ซื้อสินค้าจากร้านค้าใด <span style="color:red;">*</span></label>
                        <select name="ddl_location" class="" id="ddl_location">
                            <option id="opt-location" value="">Where did you buy? / ซื้อสินค้าจากร้านค้าใด</option>
                            <option value="adj_ctw">The Adjective @ CentralWorld</option>
                            <option value="adj_mega_bangna">The Adjective @ Mega Bangna Shopping Center</option>
                            <option value="adj_cen_ladprao">The Adjective @ Central Ladprao</option>
                            <option value="adj_cen_korat">The Adjective @ Central Plaza Korat</option>
                            <option value="adj_paragon">The Adjective shop @ Siam Paragon Department Store</option>
                            <option value="adj_emporium">The Adjective @ The Emporium</option>
                            <option value="fj_icon">Fjällräven @ Icon siam, Siam Takashimaya zone</option>
                            <option value="fj_siamdis">Fjällräven @ Siam Discovery</option>
                            <option value="fj_themall_bangkapi">Fjällräven @ The Mall Bangkapi</option>
                            <option value="fj_online">Fjällräven Online Store (FB,IG,Line)</option>
                            <option value="adj_online">The Adjective Online Store (FB,IG,Line)</option>
                            <option value="fj_marketp">Marketplaces Fjällräven Official Store (Shopee,Lazada,JD Central, This Shop)</option>
                            <option value="adj_marketp">Marketplaces The Adjective Official Store (Shopee,Lazada,Central Online)</option>
                            <!-- <option value="fj_shopee">Fjällräven Kånken Shopee Mall</option> -->
                            <!-- <option value="fj_jd_cental">Fjällräven Kånken JD Central</option> -->
                            <option value="puffin">The Puffin House</option>
                            <option value="hippo">HIPPO</option>
                            <!-- <option value="swimming">Swimming Kids Chonburi</option> -->
                            <option value="zeenzone">Zeenzone ในห้าง Central</option>
                            <!-- <option value="loft">Loft</option> -->
                            <!-- <option value="momkids">Mom & Kids ห้าง Central</option> -->
                            <option value="missy_shop">The Missy Shop, Premium Outlet</option>
                            <option value="maze">A'Maze</option>
                            <option value="cazh_icon">Cazh , Icon Siam, 2F</option>
                            <!-- <option value="banana">Banana IT</option> -->
                            <!-- <option value="thisshop">ThisShop</option> -->
                            <option value="pop_up">Pop up store</option>
                            <option value="monday_camping">Monday Camping</option>
                            <option value="anvil_camp">Anvil Camp</option>
                            <option value="full_camp">Full Camp</option>
                            <option value="caveman">Caveman</option>
                            <option value="firster_shop_online">Firster Shop & Online</option>
                            <option value="siam_moon">Siam Moon.</option>
                        </select>
                        <label id="label-location" for="ddl_location" style="top: 8px;font-size: 14px;z-index:999;">Where did you buy? / ซื้อสินค้าจากร้านค้าใด <span style="color:red;">*</span></label>
                    </div>
                    <p id="error-location" style="color: red;"></p>
                </div>
            </div>
            <div class="inputgroup">
                <div class="row">
                    <div class="col-sm-12">
                        <label for="file_image_1">แนบรูปหลักฐานการซื้อสินค้า / Proof of purchase <span style="color:red;">*</span></label>
                    </div>
                </div>
            </div>
            <div class="inputgroup">
                <div class="row">
                    <div class="col-sm-12">
                        <label for="file_image_1" style="color: #ccc;">(รูปถ่ายใบเสร็จจากร้านค้า หรือ รูปสกรีนช็อตการสั่งซื้อออนไลน์)</label>
                    </div>
                </div>
            </div>
            <div class="inputgroup">
                <div class="row">
                    <div class="col-sm-12">
                        <label for="file_image_1" style="color: #ccc;">(Photos of receipts from stores or screenshots of online orders)</label>
                    </div>
                </div>
            </div>
            <div class="inputgroup">
                <div class="row">
                    <div class="col-sm-12">                        
                        <p id="error-image-1" style="color: red;"></p>
                        <div id="imagePreview_1"></div>
                    </div>
                </div>
            </div>
            <div class="inputgroup">
                <div class="row">
                    <div class="col-sm-12 file-input-container">
                        <input type="file" class="" id="file_image_1" name="file_image_1" style="padding-top: 6px;" accept=".jpg, .jpeg, .png" onchange="return fileValidation('1')" />
                    </div>
                </div>
            </div>
            <a class="button-dark-muti" href="javascript: prevStep(2)">ย้อนกลับ</a>
            <a class="button-dark-muti" href="javascript: lastvalidate(3);">ลงทะเบียน</a>
        </div>

        <div class="box" id="box-4">  
        </div>
    </div>
</form>

<div id="item-template-2" class="item-template">
    <h3 class="title" style="text-align: center;">${title}</h3>
    <div class="inputgroup">
        ${desc}
        <a class="button-dark" href="${link}">${btn}</a>
    </div>
</div>

<div class="loader-blackdrop">
    <div class="loader-wapper">
        <div class="loader"></div>
    </div>
</div>

<!-- <div id="test_state"></div> -->
@endsection


@section('script')
<script>

    $('#txt_date_of_purchase').datepicker({
        format: "dd-mm-yyyy",
        language: "th",
        autoclose: true,
        todayHighlight: true
    }).on("changeDate", function(e) {    
        $(this).focus();
    });

    $('#txt_date_of_birth').datepicker({
        format: "dd-mm-yyyy",
        language: "th",
        autoclose: true,
        todayHighlight: true
    }).on("changeDate", function(e) {    
        $(this).focus();
    });
    

    $(document).ready(function () {
        $('.loader-blackdrop').hide();
        $('#label-location').hide();
        $('#ddl_location').change(function() {
            var selectedValue = $(this).val();
            if (selectedValue != '') {
                $('#label-location').show();
                $('#label-gender-ontop').hide();
            } else {
                $('#label-gender-ontop').show();
                $('#label-location').hide();
            }
        });
    });
    
    function updateBrDisplay() {
        var breakTag = document.getElementById('break');
        if (window.innerWidth <= 479) {
            breakTag.style.display = 'block';
        } else {
            breakTag.style.display = 'none';
        }
    }

    // Call the function on page load
    updateBrDisplay();

    // Update the display when the window is resized
    window.addEventListener('resize', updateBrDisplay);

    function save() {
        $('.loader-blackdrop').show();
        setTimeout(function() {
            var uploadForm = new FormData($('#upload_form')[0]);
            $.ajax({
                type: 'POST',
                url: "{{ route('warranty_save') }}",
                data: uploadForm,
                dataType: 'json',
                processData: false,  // tell jQuery not to process the data
                contentType: false,   // tell jQuery not to set contentType
                success: function (data) {
                    nextStep(4);
                    $("#box-4").html('');
                    let dupItem = $("#item-template-2").html();
                    dupItem = dupItem.replaceAll('${title}', data.title).replaceAll('${desc}', data.desc); 
                    if(data.status){
                        dupItem = dupItem.replaceAll('${link}', "{{route('warranty')}}").replaceAll('${btn}', "ตกลง");
                    } else {
                        dupItem = dupItem.replaceAll('${link}', 'javascript: nextStep(3);').replaceAll('${btn}', "ย้อนกลับ");
                    }
                    $("#box-4").append(dupItem);
                    setTimeout(function() {
                        $('.loader-blackdrop').hide();
                    }, 100);
                },
                error: function (xhr, type) {
                    setTimeout(function() {
                        $('.loader-blackdrop').hide();
                    }, 100);
                }
            });
        }, 100);
    }
</script>
@endsection