@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">
            <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_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="row">
                    <div class="col-sm-12">
                        <input type="text" class="" id="txt_phone" name="txt_phone" maxlength="15"/>
                        <label for="txt_phone">เบอร์โทรติดต่อ <span style="color:red;">*</span></label>
                    </div>
                </div>
                <p id="error-phone" style="color: red;"></p>
            </div>
            <a id="nextButton-1" class="button-dark" href="javascript: lastvalidate(6);">ตรวจสอบ</a>
        </div>
        <div class="box" id="box-2">
            <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>
            <hr>
            <div id="res-state">
            </div>
        </div>
    </div>
</form>

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


@section('script')
<script>
    $(document).ready(function () {
        $('.loader-blackdrop').hide();
    });

    function check() {
        $('.loader-blackdrop').show();
        setTimeout(function() {
            var uploadForm = new FormData($('#upload_form')[0]);
            $.ajax({
                type: 'POST',
                url: "{{ route('check_state') }}",
                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);
                    $("#res-state").html('');
                    $("#res-state").append(data.detail);
                    setTimeout(function() {
                        $('.loader-blackdrop').hide();
                    }, 100);
                },
                error: function (xhr, type) {
                    setTimeout(function() {
                        $('.loader-blackdrop').hide();
                    }, 100);
                }
            });
        }, 100);
    }

    function done(repair_id) {
        $('.loader-blackdrop').show();
        setTimeout(function() {
            var uploadForm = new FormData($('#upload_form')[0]);
            uploadForm.append('repair_id', repair_id);
            $.ajax({
                type: 'POST',
                url: "{{ route('done') }}",
                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);
                    $("#res-state").html('');
                    $("#res-state").append(data.detail);
                    setTimeout(function() {
                        $('.loader-blackdrop').hide();
                    }, 100);
                },
                error: function (xhr, type) {
                    setTimeout(function() {
                        $('.loader-blackdrop').hide();
                    }, 100);
                }
            });
        }, 100);
    }
</script>
@endsection