@extends('layout.user')
@section('page-title', __('robot.ReceiveFree'))
@section('nav-title', __('robot.ReceiveFree'))
@section('page-js-script')
    <script type="text/javascript">
        $(function() {
            const r_v = $("#receiver_fm").validate({
                debug: false,
                ignore: ":disabled",
                rules: {
                    receiver_name: {
                        required: true,
                    },
                    receiver_phone: {
                        required: true,
                    },
                    receiver_store: {
                        required: true
                    },
                    receiver_street: {
                        required: true,
                    },
                },
                messages: {
                    receiver_name: {
                        required: "*請輸入收件人",
                    },
                    receiver_phone: {
                        required: "*請輸入聯絡電話",
                    },
                    receiver_store: {
                        required: "*請輸入門市名稱",
                    },
                    receiver_street: {
                        required: "*請輸入寄送詳細地址",
                    }
                }
            });
            $('.btn_next').click(function(e) {
                e.preventDefault();
                //get this index in btn_next
                var eq = $('.btn_next').index(this);
                console.log(eq);
                if (eq == 1) {
                    if (!checkImgUpload('1_1', '居留證正面') || !checkImgUpload('1_2', '居留證背面')) {
                        console.log('img_upload');
                        $('.loading').hide();
                        return;
                    }
                }
                if (eq == 2) {
                    if (!checkImgUpload('2_1', '第二證件正面') || !checkImgUpload('2_2', '第二證件背面')) {
                        console.log('img_upload');
                        $('.loading').hide();
                        return;
                    }
                }
                if (eq == 0 || eq == 2) {
                    let data_key = $('input[type=radio][name=delivery_type]:checked').attr('data-key');
                    let receiver_name = $('#receiverName_' + data_key).val();
                    let receiver_phone = $('#receiverPhone_' + data_key).val();
                    let receiver_store = $('#receiverStore_' + data_key).val();
                    let receiver_address = $('#receiverStreet_' + data_key).val();
                    let address_img_name = $('#address_img_name_' + data_key).val();
                    let delivery_id = $('#delivery_id_' + data_key).val();
                    let address_photo = '';


                    if (delivery_id == "delivery") {
                        address_photo = $('#address_photo')[0].files[0];
                    } else {
                        address_photo = $('#receiverStore_address_photo')[0].files[0];
                    }
                    if (!r_v.element('#receiverName_' + data_key) || !r_v.element('#receiverPhone_' + data_key)) {
                        $('html, body').animate({
                            scrollTop: $('#receiverPhone_' + data_key).offset().top - 100
                        }, 200);
                        $('.loading').hide();
                        return
                    };

                    if ((delivery_id == "seven" || delivery_id == "family") && (!r_v.element('#receiverStore_' + data_key) && !address_photo)) {
                        Swal.fire({
                            title: '{{ __('basic.Error') }}!',
                            text: '運送地址不完全',
                            // html: resp.msg.replaceAll("\r\n", "<BR>"),
                            icon: 'error',
                            confirmButtonText: '{{ __('basic.OK') }}',
                        })
                        $('.loading').hide();
                        return;
                    } else if (delivery_id == "delivery" && (!r_v.element('#receiverStreet_' + data_key) && !address_photo)) {
                        Swal.fire({
                            title: '{{ __('basic.Error') }}!',
                            text: '運送地址不完全',
                            // html: resp.msg.replaceAll("\r\n", "<BR>"),
                            icon: 'error',
                            confirmButtonText: '{{ __('basic.OK') }}',
                        })
                        $('.loading').hide();
                        return;
                    }
                    if (eq == 2) {

                        $('.loading').show();

                        let formData = new FormData();

                        if (data_key != 'custom') {
                            formData.append('member_address_id', data_key);

                        }
                        formData.append('event_id', 'mobile');
                        formData.append('delivery_id', delivery_id);
                        formData.append('receiver_name', receiver_name);
                        formData.append('receiver_phone', receiver_phone);
                        formData.append('receiver_store', receiver_store);
                        formData.append('receiver_address', receiver_address);
                        formData.append('address_img_name', address_img_name);
                        formData.append('address_photo', address_photo);
                        formData.append('upload_file[1_1]', $('#upload_id_1_1')[0].files[0]);
                        formData.append('upload_file[1_2]', $('#upload_id_1_2')[0].files[0]);
                        formData.append('upload_file[2_1]', $('#upload_id_2_1')[0].files[0]);
                        formData.append('upload_file[2_2]', $('#upload_id_2_2')[0].files[0]);
                        formData.append('frontend_url', '{{ env('APP_URL') }}');

                        $.ajax({
                            url: '{{ url('ajax/add_verify') }}',
                            data: formData,
                            dataType: 'json',
                            contentType: false,
                            processData: false,
                            success: function(resp, textStatus, jqXHR) {
                                console.log(resp);
                                $('.loading').hide();
                                if (resp.status) {
                                    Swal.fire({
                                        title: (resp.msg != '') ? resp.msg : '{{ __('basic.SuccessUpdate') }}',
                                        // text: ,
                                        icon: 'success',
                                        confirmButtonText: '{{ __('basic.OK') }}',
                                    }).then((function() {
                                        location.href = '{{ route('freecardlist') }}';
                                    }))
                                } else {
                                    Swal.fire({
                                        title: '{{ __('basic.Error') }}!',
                                        // text: resp.msg,
                                        html: resp.msg.replaceAll("\r\n", "<BR>"),
                                        icon: 'error',
                                        confirmButtonText: '{{ __('basic.OK') }}',
                                    })

                                }
                            },
                            error: ajaxError
                        });
                    }
                }
                if (eq < 2) {
                    $('.div_step').eq(eq).addClass('d-none');
                    $('.div_step').eq(eq + 1).removeClass('d-none');
                }
            });
            $('#address_delivery_type').change(function() {
                $('#address_fm .home,#address_fm .store').hide()
                $($(this).find('option:selected').data('target')).show();
            });
            $('[name=address_type],[name=store_type]').click(function() {
                $('.address_type').hide();
                // console.log($(this).data('target'));
                $($(this).data('target')).parents('.address_type').show();
            });
            $('[name=store_type]').click(function() {
                $('.store_type').hide();
                // console.log($(this).data('target'));
                $($(this).data('target')).parents('.store_type').show();
            });
            $('.div_preview').click(function(e) {
                e.preventDefault();
                let key = $(this).data('key');
                $('#upload_id_' + key).trigger('click');

            });
            $('.img_upload').change(function(e) {
                e.preventDefault();
                let key = $(this).data('key');
                //顯示縮圖
                let preview = $('#img_id_' + key);
                let file = e.target.files[0];
                let reader = new FileReader();
                reader.onload = function(e) {
                    preview.attr('src', e.target.result);
                    preview.removeClass('d-none');
                    preview.parents().removeClass('py-18');
                    $('#txt_id_' + key).addClass('d-none');

                }
                reader.readAsDataURL(file);
            });
            $('.btn_submit').click(function(e) {
                e.preventDefault();

            });
        });

        function checkImgUpload(data_key, msg = "") {
            if (!$('.img_upload[data-key=' + data_key + ']').val()) {
                Swal.fire({
                    title: '{{ __('basic.Error') }}!',
                    text: '請上傳' + msg + '照片',
                    // html: resp.msg.replaceAll("\r\n", "<BR>"),
                    icon: 'error',
                    confirmButtonText: '{{ __('basic.OK') }}',
                })
                $('.loading').hide();
                console.log(data_key);
                return false;
            }
            return true;
        }
    </script>
@endsection
@section('container')
    {{-- SHIPPMENT --}}
    <form id="receiver_fm" enctype="multipart/form-data">
        <div id="div_shippment" class="card div_step">
            <h4 class="border-bottom">{{ __('basic.ShippingDetail') }}</h4>
            @if (!empty($addressList))
                @foreach ($addressList as $addr)
                    <div class="form-check mb-2 py-4">
                        <input class="form-check-input" id="address_{{ $addr['id'] }}" name="delivery_type" data-key="{{ $addr['id'] }}" data-charge="{{ $addr['delivery']['price'] }}" data-address-type="{{ $addr['address_type'] }}"
                            type="radio">
                        <label class="form-check-label w-100 label_address border p-2" id="label_address_{{ $addr['id'] }}" for="address_{{ $addr['id'] }}">
                            <div class="d-flex align-items-start pb-4">
                                <div class="d-flex flex-column me-auto gap-3">

                                    <div>
                                        <span class="text-secondary">{{ __('basic.DeliveryType') }}</span>
                                        @switch($addr['address_type'])
                                            @case('delivery')
                                                <span>{{ __('basic.HomeDelivery') }}</span>
                                            @break

                                            @case('seven')
                                                <span>{{ __('basic.UniMart') }}</span>
                                            @break

                                            @case('family')
                                                <span>{{ __('basic.FamiMart') }}</span>
                                            @break
                                        @endswitch

                                    </div>
                                    <div>
                                        <span class="text-secondary">{{ __('basic.Name') }}</span>
                                        <span>{{ $addr['recipient_name'] }}</span>
                                    </div>
                                    <div>
                                        <span class="text-secondary">{{ __('basic.Phone') }}</span>
                                        <span>{{ $addr['recipient_mobile'] }}</span>

                                    </div>
                                    <div>
                                        @switch($addr['address_type'])
                                            @case('delivery')
                                                @if (!empty($addr['address']))
                                                    <span class="text-secondary">{{ __('basic.Address') }}</span>
                                                    <span>{{ $addr['address'] }}</span>
                                                @endif
                                            @break

                                            @case('seven')
                                                <span class="text-secondary">{{ __('basic.Store') }}</span>
                                                <span class="tag tag-outline">{{ __('basic.UniMart') }}</span>
                                                <span class="text-primary">{{ $addr['store_name'] }}</span>
                                            @break

                                            @case('family')
                                                <span class="text-secondary">{{ __('basic.Store') }}</span>
                                                <span class="tag tag-outline">{{ __('basic.FamiMart') }}</span>
                                                <span class="text-primary">{{ $addr['store_name'] }}</span>
                                            @break
                                        @endswitch

                                    </div>

                                </div>
                                @if (!empty($addr['img_name']))
                                    <img class="w-25 me-3" src="{{ asset('storage/member/' . $addr['member_id'] . '/address/' . $addr['img_name']) }}" alt="">
                                @endif

                            </div>
                            <input class="form-control receiverName" id="receiverName_{{ $addr['id'] }}" name='receiver_name' type="hidden" value='{{ $addr['recipient_name'] }}' />
                            <input class="form-control" id="receiverPhone_{{ $addr['id'] }}" name='receiver_phone' type="hidden" value='{{ $addr['recipient_mobile'] }}' />
                            <input class="form-control" id="delivery_id_{{ $addr['id'] }}" name='delivery_id' type="hidden" value="{{ $addr['address_type'] }}" />
                            <input class="form-control" id="receiverStore_{{ $addr['id'] }}" name='receiver_store' type="hidden" value='{{ $addr['store_name'] }}' />
                            <input class="form-control" id="receiverStreet_{{ $addr['id'] }}" name='receiver_street' type="hidden" value='{{ $addr['address'] ?? $addr['img_name'] }}' />
                            <input class="form-control" id="address_img_name_{{ $addr['id'] }}" name='address_img' type="hidden" value='{{ $addr['img_name'] }}' />


                        </label>

                    </div>
                @endforeach
            @endif
            <div class="form-check mb-2 py-4">
                <input class="form-check-input" id="custom" name="delivery_type" data-key="custom" type="radio" checked>
                <label class="form-check-label w-100 label_address border p-2" id="label_custom" for="custom">
                    <div class="row">
                        <div class="row col-md-6 mb-4">
                            <label class="col-form-label col-sm-4" for="name">{{ __('basic.Name') }}</label>
                            <div class="col-sm-8">
                                <input class="form-control receiverName" id="receiverName_custom" name='receiver_name' type="text" value='{{ $user['name'] }}' />
                            </div>
                        </div>
                        <div class="row col-md-6 mb-4">
                            <label class="col-form-label col-sm-4" for="mobile">{{ __('basic.Phone') }}</label>
                            <div class="col-sm-8">
                                <input class="form-control" id="receiverPhone_custom" name='receiver_phone' type="phone" value="{{ $user['mobile'] }}" />
                            </div>
                        </div>
                        <div class="row col-md-12 mb-4">
                            <label class="col-form-label col-sm-2" for="email">{{ __('basic.ReceiptMethod') }}</label>
                            <div class="col-sm-3">
                                <select class="form-control form-select" id="delivery_id_custom" name='delivery_id'>
                                    @foreach ($deliveryList as $item)
                                        @php
                                            switch ($item['id']) {
                                                case 'delivery':
                                                    $option_name = __('basic.HomeDelivery');
                                                    break;
                                                case 'seven':
                                                    $option_name = __('basic.UniMart');
                                                    break;
                                                case 'family':
                                                    $option_name = __('basic.FamiMart');
                                                    break;
                                                case 'virtual':
                                                    $option_name = __('robot.Virtual');
                                                    break;
                                            
                                                default:
                                                    $option_name = '';
                                                    break;
                                            }
                                        @endphp

                                        <option data-charge="{{ $item['price'] }}" value='{{ $item['id'] }}'>{{ $option_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            {{-- <a class="btn btn-primary col-sm-2" href="">{{ __('basic.SelectStore') }}</a> --}}
                        </div>
                        <div class="row_store row col-md-12 d-none mb-4">
                            <label class="col-form-label col-sm-2" for="">{{ __('basic.Store') }}</label>
                            <div class="col-sm-10">

                                <div class="col pt-2">
                                    <div class="d-flex flex-md-row flex-column">
                                        <div class="form-check">
                                            <input class="form-check-input" id="address_type_1" name="store_type" data-target='#receiverStore_address_photo' type="radio" checked>
                                            <label class="form-check-label" for="address_type_1">
                                                {{ __('basic.UploadAddressPhoto') }}
                                            </label>
                                        </div>
                                        <div class="form-check ms-md-3 ms-0">
                                            <input class="form-check-input" id="address_type_2" name="store_type" data-target='#receiverStore_custom' type="radio">
                                            <label class="form-check-label" for="address_type_2">
                                                {{ __('robot.ManuallyEnterStoreName') }}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col store_type mb-3">
                                    <label class="col-form-label" for="receiverStore_address_photo">{{ __('basic.UploadAddressPhoto') }}</label>
                                    <input class="form-control" id="receiverStore_address_photo" name='address_photo' type="file" />
                                </div>
                                <div class="col store_type mb-3" style='display:none;'>
                                    <label class="col-form-label" for="receiverStore_custom">{{ __('robot.StoreName') }}</label>
                                    <input class="form-control" id="receiverStore_custom" name='receiver_store' type="text" disabled />
                                </div>

                            </div>
                        </div>
                        <div class="row_address row col-md-12 mb-4">
                            <label class="col-form-label col-sm-2" for="">{{ __('basic.Address') }}</label>
                            <div class="col-sm-10">
                                <div class="col pt-2">
                                    <div class="d-flex flex-md-row flex-column">
                                        <div class="form-check">
                                            <input class="form-check-input" id="address_type_3" name="address_type" data-target='#address_photo' type="radio" checked>
                                            <label class="form-check-label" for="address_type_3">
                                                {{ __('basic.UploadAddressPhoto') }}
                                            </label>
                                        </div>
                                        <div class="form-check ms-md-3 ms-0">
                                            <input class="form-check-input" id="address_type_4" name="address_type" data-target='#receiverStreet_custom' type="radio">
                                            <label class="form-check-label" for="address_type_4">
                                                {{ __('basic.ManualInputAddressInfo') }}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col address_type mb-3">
                                    <label class="col-form-label" for="address_photo">{{ __('basic.UploadAddressPhoto') }}</label>
                                    <input class="form-control" id="address_photo" name='address_photo' type="file" />
                                </div>
                                <div class="col address_type mb-3" style='display:none;'>
                                    <label class="col-form-label" for="address_address">{{ __('basic.Address') }}</label>
                                    <input class="form-control" id="receiverStreet_custom" name='receiver_street' type="text" value="" />
                                </div>
                            </div>
                        </div>

                    </div>

                    <input class="form-control" id="address_img_name_custom" name='address_img' type="hidden" value='' />

                </label>

            </div>

            <button type="button" class="btn btn-primary btn_next">{{ __('robot.NextStep') }}</button>
        </div>
        <div id="div_step2" class="div_step d-none">
            <div class="card">
                <div class="card-haeder border-bottom">
                    <h4>{{ __('robot.ResidentPermit') }} - {{ __('robot.Front') }}</h4>
                </div>
                <div class="div_preview card-body" data-key="1_1">
                    <div class="d-flex justify-content-center py-18 rounded border" style="background-color:#E4E4ED;">
                        <span class="txt_preview text-gray" id="txt_id_1_1" data-key="1_1">+ {{ __('robot.AddPhotos') }}</span>
                        <img class="img_preview d-none" id="img_id_1_1" src="" alt="" role="button" style="width: 100%; height: 190px;" data-key="1_1" />
                    </div>
                </div>
                <input class="img_upload d-none" id="upload_id_1_1" name="upload_file[1_1]" type="file" data-key="1_1">
            </div>
            <div class="card">
                <div class="card-haeder border-bottom">
                    <h4>{{ __('robot.ResidentPermit') }} - {{ __('robot.Opposite') }}</h4>
                </div>
                <div class="div_preview card-body" data-key="1_2">
                    <div class="d-flex justify-content-center py-18 rounded border" style="background-color:#E4E4ED;">
                        <span class="txt_preview text-gray" id="txt_id_1_2" data-key="1_2">+ {{ __('robot.AddPhotos') }}</span>
                        <img class="img_preview d-none" id="img_id_1_2" src="" alt="" role="button" style="width: 100%; height: 190px;" data-key="1_2" />
                    </div>
                </div>
                <input class="img_upload d-none" id="upload_id_1_2" name="upload_file[1_2]" type="file" data-key="1_2">
            </div>
            <button type="button" class="btn_next btn btn-primary w-100 mt-5">{{ __('robot.NextStep') }}</button>
        </div>
        <div id="div_step3" class="div_step d-none">
            <div class="p-4">
                <h4>{{ __('robot.SecondCertificate') }}</h4>
            </div>
            <div class="card">
                <div class="card-haeder border-bottom">
                    <h4>{{ __('robot.Front') }}</h4>
                </div>
                <div class="div_preview card-body" data-key="2_1">
                    <div class="d-flex justify-content-center py-18 rounded border" style="background-color:#E4E4ED;">
                        <span class="txt_preview text-gray" id="txt_id_2_1" data-key="2_1">+ {{ __('robot.AddPhotos') }}</span>
                        <img class="img_preview d-none" id="img_id_2_1" src="" alt="" role="button" style="width: 100%; height: 190px;" data-key="2_1" />
                    </div>
                </div>
                <input class="img_upload d-none" id="upload_id_2_1" name="upload_file[2_1]" type="file" data-key="2_1">
            </div>
            <div class="card">
                <div class="card-haeder border-bottom">
                    <h4>{{ __('robot.Opposite') }}</h4>
                </div>
                <div class="div_preview card-body" data-key="2_2">
                    <div class="d-flex justify-content-center py-18 rounded border" style="background-color:#E4E4ED;">
                        <span class="txt_preview text-gray" id="txt_id_2_2" data-key="2_2">+ {{ __('robot.AddPhotos') }}</span>
                        <img class="img_preview d-none" id="img_id_2_2" src="" alt="" role="button" style="width: 100%; height: 190px;" data-key="2_2" />
                    </div>
                </div>
                <input class="img_upload d-none" id="upload_id_2_2" name="upload_file[2_2]" type="file" data-key="2_2">
            </div>
            <button type="button" class="btn_next btn btn-primary w-100 mt-5">{{ __('basic.Submit') }}</button>
        </div>
    </form>
@endsection