@extends('layouts.admin')
@section('content')
    <div class="card">
        <div class="card-header">
            {{ trans('global.create') }} {{ trans('cruds.setting.title_singular') }}
        </div>

        <div class="card-body">
            <form method="POST" action="{{ route('admin.settings.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="form-group">
                    <label for="box_booking_time">{{ trans('cruds.setting.fields.box_booking_time') }}</label>
                    <input class="form-control {{ $errors->has('box_booking_time') ? 'is-invalid' : '' }}" type="text"
                        name="box_booking_time" id="box_booking_time" value="{{ old('box_booking_time', '') }}">
                    @if ($errors->has('box_booking_time'))
                        <span class="text-danger">{{ $errors->first('box_booking_time') }}</span>
                    @endif
                    <span class="help-block">{{ trans('cruds.setting.fields.box_booking_time_helper') }}</span>
                </div>
                <div class="form-group">
                    <label for="contract_number">{{ trans('cruds.setting.fields.contract_number') }}</label>
                    <input class="form-control {{ $errors->has('contract_number') ? 'is-invalid' : '' }}" type="text"
                        name="contract_number" id="contract_number" value="{{ old('contract_number', '') }}">
                    @if ($errors->has('contract_number'))
                        <span class="text-danger">{{ $errors->first('contract_number') }}</span>
                    @endif
                    <span class="help-block">{{ trans('cruds.setting.fields.contract_number_helper') }}</span>
                </div>
                <div class="form-group">
                    <label for="contract_email">{{ trans('cruds.setting.fields.contract_email') }}</label>
                    <input class="form-control {{ $errors->has('contract_email') ? 'is-invalid' : '' }}" type="text"
                        name="contract_email" id="contract_email" value="{{ old('contract_email', '') }}">
                    @if ($errors->has('contract_email'))
                        <span class="text-danger">{{ $errors->first('contract_email') }}</span>
                    @endif
                    <span class="help-block">{{ trans('cruds.setting.fields.contract_email_helper') }}</span>
                </div>
                <div class="form-group">
                    <label for="banner">{{ trans('cruds.setting.fields.banner') }}</label>
                    <div class="needsclick dropzone {{ $errors->has('banner') ? 'is-invalid' : '' }}" id="banner-dropzone">
                    </div>
                    @if ($errors->has('banner'))
                        <span class="text-danger">{{ $errors->first('banner') }}</span>
                    @endif
                    <span class="help-block">{{ trans('cruds.setting.fields.banner_helper') }}</span>
                </div>
                <div class="form-group">
                    <label for="logo">Logo</label>
                    <div class="needsclick dropzone {{ $errors->has('logo') ? 'is-invalid' : '' }}" id="logo-dropzone">
                    </div>
                    @if ($errors->has('logo'))
                        <span class="text-danger">{{ $errors->first('logo') }}</span>
                    @endif
                </div>
                <div class="form-group">
                    <button class="btn btn-danger" type="submit">
                        {{ trans('global.save') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        Dropzone.options.bannerDropzone = {
            url: '{{ route('admin.settings.storeMedia') }}',
            maxFilesize: 2, // MB
            acceptedFiles: '.jpeg,.jpg,.png,.gif',
            maxFiles: 1,
            addRemoveLinks: true,
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            params: {
                size: 2,
                width: 4096,
                height: 4096
            },
            success: function(file, response) {
                $('form').find('input[name="banner"]').remove()
                $('form').append('<input type="hidden" name="banner" value="' + response.name + '">')
            },
            removedfile: function(file) {
                file.previewElement.remove()
                if (file.status !== 'error') {
                    $('form').find('input[name="banner"]').remove()
                    this.options.maxFiles = this.options.maxFiles + 1
                }
            },
            init: function() {
                @if (isset($setting) && $setting->banner)
                    var file = {!! json_encode($setting->banner) !!}
                    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="banner" value="' + file.file_name + '">')
                    this.options.maxFiles = this.options.maxFiles - 1
                @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>
    <script>
        Dropzone.options.logoDropzone = {
            url: '{{ route('admin.settings.storeMedia') }}',
            maxFilesize: 4, // MB
            acceptedFiles: '.jpeg,.jpg,.png,.gif',
            maxFiles: 1,
            addRemoveLinks: true,
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            params: {
                size: 2,
            },
            success: function(file, response) {
                $('form').find('input[name="logo"]').remove()
                $('form').append('<input type="hidden" name="logo" value="' + response.name + '">')
            },
            removedfile: function(file) {
                file.previewElement.remove()
                if (file.status !== 'error') {
                    $('form').find('input[name="logo"]').remove()
                    this.options.maxFiles = this.options.maxFiles + 1
                }
            },
            init: function() {
                @if (isset($setting) && $setting->logo)
                    var file = {!! json_encode($setting->logo) !!}
                    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="logo" value="' + file.file_name + '">')
                    this.options.maxFiles = this.options.maxFiles - 1
                @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