@extends('layouts.customerDashboard')
@section('style')
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" rel="stylesheet" />
@endsection
@section('sub_content')
<div class="dashboard_common_table">
    <h3>Edit Profile</h3>
    <div class="profile_update_form">
        <form action="{{route('users.updateAgentProfile')}}" id="profile_form_area" enctype="multipart/form-data"  method="POST">
            @csrf
            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name" placeholder="Enter Name" value="{{ $user->name ?? '' }}"  name="name">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="conatct">Contact No.</label>
                        <input type="text" class="form-control" id="contact" placeholder="Enter Contact" value="{{ $user->contact_no ?? '' }}"  name="contact">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="address">Address</label>
                        <input type="text" class="form-control" id="address" value="{{ $user->address ?? '' }}"  name="address" placeholder="Enter Address">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="pin_code">Pin Code</label>
                        <input type="text" class="form-control" id="pin_code" value="{{ $user->pin_code ?? '' }}"  name="pin_code" placeholder="Enter Pin Code">
                    </div>
                </div>
                <div class="col-lg-6">
                    {{-- <div class="form-group">
                        <label for="image">image</label>
                        <input type="file" class="form-control" id="image"  name="image">
                    </div> --}}

                    <label class="required" for="agent_logo">Image</label>
                    <div class="needsclick dropzone {{ $errors->has('agent_logo') ? 'is-invalid' : '' }}" id="agent-logo-dropzone">
                    </div>

                    <span class="help-block"></span>
                </div>
                <div class="col-md-12 mt-2">
                    <button class="btn btn-primary w-100">Update</button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>
<script>
        var uploadedImagesMap = {}
    Dropzone.options.agentLogoDropzone = {
        url: '{{ route('users.storeMedia') }}',
        maxFilesize: 1, // MB
        acceptedFiles: '.jpeg,.jpg,.png,.gif',
        addRemoveLinks: true,
        headers: {
        'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        params: {
        size: 2,
        width: 4096,
        height: 4096
        },
        success: function (file, response) {
        $('form').append('<input type="hidden" name="image" value="' + response.name + '">')
        uploadedImagesMap[file.name] = response.name
        },
        removedfile: function (file) {
        file.previewElement.remove()
        var name = ''
        if (typeof file.file_name !== 'undefined') {
            name = file.file_name
        } else {
            name = uploadedImagesMap[file.name]
        }
        $('form').find('input[name="image"][value="' + name + '"]').remove()
        },
        init: function () {
        @if(isset($user) && $user->image)
        var file = {!! json_encode($user->image) !!}

            this.options.addedfile.call(this, file)
            this.options.thumbnail.call(this, file, file.preview ?? file.preview_url)
            file.previewElement.classList.add('dz-complete')
            $('form').append('<input type="hidden" name="image" value="' + file.file_name + '">')

        @endif
        },
        error: function (file, response) {
            if ($.type(response) === 'string') {
                var message = response //dropzone sends it's own error messages in string
            } else {
                var message = response.errors.file
            }
            file.previewElement.classList.add('dz-error')
            _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]')
            _results = []
            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                node = _ref[_i]
                _results.push(node.textContent = message)
            }

            return _results
        }
    }
</script>
@endsection