@extends('layouts.main_layout')
@section('title', $label)
@section('icon-breadcrumbs',$icon)

@section('content')
{{ Breadcrumbs::render($breadcrumbs, $user->id) }}
<form enctype="multipart/form-data">
<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-md-6 col-12">
                {{ Form::defImageUpload('image',"Foto", $user->images)}}

                {{ Form::defName('card_member', "Nomor Member", $user->card_member, ['required']) }}
                <button type="button" id="btn-generate" class="btn btn-primary">Generate Kartu</button>
            </div>

            <div class="col-md-6 col-12">

                <x-initial-image-attachment :attachment="$user->cardMember" :id="'kta-image'"/><br />

            </div>
        </div>

    </div>
</div>
</form>

@endsection

@push('scripts')
<script type="text/javascript">
    $(document).ready(function(){
        $('#btn-generate').on('click', function () {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                // Your server script to process the upload
                url: '{{$generate}}',
                type: 'POST',

                // Form data
                data: new FormData($('form')[0]),

                // Tell jQuery not to process data or worry about content-type
                // You *must* include these options!
                cache: false,
                contentType: false,
                processData: false,
                success: function(res){
                    location.reload();

                },
                error: function (xhr, ajaxOptions, thrownError) {
                ajaxError(xhr.status, xhr.statusText)
                }

            })
        });
    });
</script>
@endpush