@extends('library.layout')

@section('title')
    ซ่อมโลโก้ Kånken แบรนด์ Fjällräven
@endsection

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

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

@section('content')
<form method="post" enctype="multipart/form-data" id="upload_form">
    @csrf
    <div class="register-form">
        <div class="box active" id="box-1">
            @if($active == 'no_event')
                <h3 class="title" style="text-align: center;">พบกันใหม่ในการชำระเงินสำหรับลงทะเบียนรอบต่อไปเร็วๆนี้</h3>
                <div class="inputgroup">
                    <p>ขอบคุณครับ</p>
                </div>
            @else 
                <h3 class="title" style="text-align: center;">ยืนยันการชำระเงินสำหรับการลงทะเบียนการซ่อมโลโก้ <span style="font-family: arctic_foxregular !important;font-size: 24px;">Kånken</span> แบรนด์ <span style="font-family: arctic_foxregular !important;font-size: 24px;">Fjällräven</span></h3>
                <br>
                <div class="inputgroup">
                    <div class="row">
                        <div class="col-sm-12">
                            <input type="text" class="" id="txt_repairid" name="txt_repairid" maxlength="120"/>
                            <label for="txt_repairid">เลขที่ลงทะเบียนส่งซ่อม <span style="color:red;">*</span></label>
                        </div>
                    </div>
                    <p id="error-repairid" style="color: red;"></p>
                </div>
                <a id="nextButton-1" class="button-dark" href="javascript: lastvalidate(4);">ตรวจสอบ</a>
            @endif
        </div>
        <div class="box" id="box-2">
        </div>
        <div class="box" id="box-3">
        </div>
    </div>
</form>

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

<div id="item-template-sup" class="item-template">
    <div class="inputgroup">
        <div class="row">
            <div class="col-sm-12">
                <label for="file_image_${num}">แนบรูปสลิปหลักฐานการชำระเงิน <span style="color:red;">*</span></label>
            </div>
        </div>
    </div>
    <div class="inputgroup">
        <div class="row">
            <div class="col-sm-12">                        
                <p id="error-image-${num}" style="color: red;"></p>
                <div id="imagePreview_${num}"></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_${num}" name="file_image_${num}" style="padding-top: 6px;" accept=".jpg, .jpeg, .png" onchange="return fileValidation('${num}')" />
            </div>
        </div>
    </div>
</div>

<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>
@endsection


@section('script')
<script>
    let currentCheck = false;

    $(document).ready(function() {
        $('.loader-blackdrop').show();
        setTimeout(function() {
            var queryString = window.location.search;
            var params = new URLSearchParams(queryString);
            if (params.has('rid') && !currentCheck) {
                var ridValue = params.get('rid');
                checkPayment(ridValue,false);
            }
            else{
                setTimeout(function() {
                    $('.loader-blackdrop').hide();
                }, 100);
            }
        }, 100);
    });

    function checkPayment(ridValue,willCall) {
        $('.loader-blackdrop').show();
        setTimeout(function() {
            let checkHasParam = false;
            if (ridValue != ""){
                checkHasParam = true;
                $('#txt_repairid').val(ridValue);
            }

            if (willCall || checkHasParam){
                var uploadForm = new FormData($('#upload_form')[0]);
                $.ajax({
                    type: 'POST',
                    url: "{{ route('check_payment') }}",
                    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(2);
                        $("#box-2").html('');
                        let dupItem = $("#item-template").html();
                        let dupItemSup = $("#item-template-sup").html();
                        dupItem = dupItem.replaceAll('${title}', data.title).replaceAll('${desc}', data.desc); 
                        dupItemSup = dupItemSup.replaceAll('${num}', "1"); 
                        if(data.status){
                            dupItem = dupItem.replaceAll('${upload_image}', dupItemSup).replaceAll('${link}', 'javascript: lastvalidate(5);').replaceAll('${btn}', "ยืนยันการชำระเงิน");
                        } else {
                            dupItem = dupItem.replaceAll('${upload_image}', "").replaceAll('${link}', 'javascript: prevStep(1);').replaceAll('${btn}', "ย้อนกลับ");
                        }
                        $("#box-2").append(dupItem);
                        setTimeout(function() {
                            $('.loader-blackdrop').hide();
                        }, 100);
                    },
                    error: function (xhr, type) {
                        setTimeout(function() {
                            $('.loader-blackdrop').hide();
                        }, 100);
                    }
                });
            }
            else{
                setTimeout(function() {
                    $('.loader-blackdrop').hide();
                }, 100);
            }
        }, 100);
    }

    function save() {
        $('.loader-blackdrop').show();
        setTimeout(function() {
            var uploadForm = new FormData($('#upload_form')[0]);
            $.ajax({
                type: 'POST',
                url: "{{ route('save_payment') }}",
                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(3);
                    $("#box-3").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('payment') }}").replaceAll('${btn}', "ตกลง");
                    } else {
                        dupItem = dupItem.replaceAll('${link}', 'javascript: prevStep(2);').replaceAll('${btn}', "ย้อนกลับ");
                    }
                    $("#box-3").append(dupItem);
                    setTimeout(function() {
                        $('.loader-blackdrop').hide();
                    }, 100);
                },
                error: function (xhr, type) {
                    setTimeout(function() {
                        $('.loader-blackdrop').hide();
                    }, 100);
                }
            });
        }, 100);
    }
</script>
@endsection