@extends('layout.user')
@section('page-title', __('robot.ReceiveFree'))
@section('nav-title', __('robot.ReceiveFree'))
@section('page-js-script')
    <script type="text/javascript">
        $(function() {

            $('.btn_submit').click(function(e) {
                e.preventDefault();
                $('.loading').show();
                let formData = new FormData($('#receiver_fm')[0]);
                $.ajax({
                    url: '{{ url('ajax/add_verify_media') }}',
                    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
                });

            });
            $('.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);
            });
        });
    </script>
@endsection
@section('container')
    {{-- SHIPPMENT --}}
    <form id="receiver_fm" enctype="multipart/form-data">
        <div id="div_step3" class="div_step">
            <div class="p-4">
                <h4>{{ __('robot.AddPhotos') }}</h4>
            </div>
            <div class="card">
                <div class="card-haeder border-bottom">
                    <p>{{ __('robot.UploadYourOwnFace') }}</p>
                </div>
                <div class="div_preview card-body" data-key="9_9">
                    <div class="d-flex justify-content-center py-18 rounded border" style="background-color:#E4E4ED;">
                        <span class="txt_preview text-gray" id="txt_id_9_9" data-key="9_9">+ {{ __('robot.AddPhotos') }}</span>
                        <img class="img_preview d-none" id="img_id_9_9" src="" alt="" role="button" style="width: 100%; height: 190px;" data-key="9_9" />
                    </div>
                </div>
                <input class="img_upload d-none" id="upload_id_9_9" name="upload_file[9_9]" type="file" data-key="9_9">
                <input type="hidden" name="event_id" value="mobile">
            </div>
            <button type="button" class="btn_submit btn btn-primary w-100 mt-5">{{ __('basic.Submit') }}</button>

    </form>
@endsection