@extends('layouts.app')
@section('content')
<div class="register-box" style="width: 500px">
    <div class="login-logo">
        <div class="login-logo">
            <a href="{{ route('admin.home') }}">
                {{ trans('panel.site_title') }}
            </a>
        </div>
    </div>
    <div class="card">
        <div class="card-header">{{ __('Register') }}</div>

        <div class="card-body">
            <form method="POST" action="{{ route('register-store') }}">
                @csrf

                <div class="row mb-3">
                    <label for="name" class="col-md-4 col-form-label text-md-end">{{ __('Name') }}</label>

                    <div class="col-md-6">
                        <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>

                        @error('name')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>

                <div class="row mb-3">
                    <label for="email" class="col-md-4 col-form-label text-md-end">{{ __('E-Mail Address') }}</label>

                    <div class="col-md-6">
                        <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">

                        @error('email')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>

                <div class="row mb-3">
                    <label for="password" class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>

                    <div class="col-md-6">
                        <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">

                        @error('password')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>

                <div class="row mb-3">
                    <label for="password-confirm" class="col-md-4 col-form-label text-md-end">{{ __('Confirm Password') }}</label>

                    <div class="col-md-6">
                        <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                    </div>
                </div>

                <div class="row mb-3">
                    <label for="company_name" class="col-md-4 col-form-label text-md-end">Company Name</label>

                    <div class="col-md-6">
                        <input id="company_name" type="text" class="form-control" name="company_name" required autocomplete="new-password">
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="pan_card" class="col-md-4 col-form-label text-md-end">Pan Card</label>

                    <div class="col-md-6">
                        <input id="pan_card" type="text" class="form-control" name="pan_card" required autocomplete="new-password">
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="address" class="col-md-4 col-form-label text-md-end">Address</label>

                    <div class="col-md-6">
                        <input id="address" type="text" class="form-control" name="address" required autocomplete="new-password">
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="contact_no" class="col-md-4 col-form-label text-md-end">Mobile No.</label>

                    <div class="col-md-6">
                        <input id="contact_no" type="text" class="form-control" name="contact_no" required autocomplete="new-password">
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="state" class="col-md-4 col-form-label text-md-end">State</label>

                    <div class="col-md-6">
                        <select name="state" id="state" class="form-control">
                            @foreach (\DB::table('states')->get() as $item)
                                <option value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row mb-3">
                    <label for="city" class="col-md-4 col-form-label text-md-end">City</label>

                    <div class="col-md-6">
                        <select name="city" id="city" class="form-control">
                            @foreach (\DB::table('cities')->get() as $item)
                                <option value="{{$item->id}}">{{$item->city}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="required" for="agent_logo">Your Logo</label>
                    <div class="needsclick dropzone {{ $errors->has('agent_logo') ? 'is-invalid' : '' }}" id="agent-logo-dropzone">
                    </div>
                    @if($errors->has('agent_logo'))
                        <span class="text-danger">{{ $errors->first('agent_logo') }}</span>
                    @endif
                    <span class="help-block"></span>
                </div>
                <div class="row mb-0">
                    <div class="col-md-6 offset-md-4">
                        <button type="submit" class="btn btn-primary">
                            {{ __('Register') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<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($package) && $package->images)
        var files = {!! json_encode($package->images) !!}
            for (var i in files) {
            var file = files[i]
            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