@extends('layouts.app')

@section('title', 'Clientes')
@section('pagename', 'Registrar Nuevo Cliente')

@section('content')
<div class="card">
    <div class="card-body">

        @if (session('status'))
        <div class="alert alert-success" role="alert">
            {{ session('status') }} <a href="{{ route('admin.clients', [], false) }}">Volver al listado.</a>
        </div>
        @endif
        @if (session('CLIENT_EXIST'))
            <div class="alert alert-danger" role="alert">
                {{ session('CLIENT_EXIST') }} <a href="{{ route('admin.clients', [], false) }}">Volver al listado.</a>
            </div>
        @endif
        @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        <form method="POST" action="{{ route('admin.clients.store', [], false) }}">
            @csrf

            <div class="form-group row">
                <div class="col-sm-3">
                    <label for="business_id" class="col-form-label">Empresa</label><br>
                    <small class="text-muted">
                        Empresa a la que pertenece este nuevo puesto.
                    </small>
                </div>
                <div class="col-sm-9">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Nueva Empresa</h5>
                            <h6 class="card-subtitle mb-2 text-muted">
                                *Si no has seleccionado una empresa se creará una con la descripción que uses aquí
                            </h6>
                            <div class="form-group">
                                <label for="name">Razón social</label>
                                <input type="text" class="form-control" id="name" name="name"
                                    value="{{ old('name') }}">
                            </div>
                            <div class="form-group">
                                <label for="account">Correo</label>
                                <input type="text" class="form-control" id="account" name="account"
                                    value="{{ old('account') }}">
                            </div>
                            <div class="form-group">
                                <label for="password_text">Contraseña</label>
                                <input type="text" class="form-control" id="password_text" name="password_text"
                                    value="{{ old('password_text') }}">
                            </div>
                            <div class="form-group">
                                <label for="heading">Rubro</label>
                                <select class="form-control" id="heading" name="heading">
                                    <option disabled selected readonly>Selecciona un rubro</option>
                                    @foreach ($headings as $h)
                                    <option value="{{ $h->id }}"
                                        {{ old('heading') == $h->id ? 'selected' : ''  }}>
                                        {{ $h->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="description">¿A qué se dedica la empresa?</label>
                                <textarea class="form-control" id="description" name="description"
                                    rows="3">{{ old('description') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Registrar</button>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script>
    function slugify(string) {
        const a = 'àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;'
        const b = 'aaaaaaaaaacccddeeeeeeeegghiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------'
        const p = new RegExp(a.split('').join('|'), 'g')

        return string.toString().toLowerCase()
            .replace(/\s+/g, '-') // Replace spaces with -
            .replace(p, c => b.charAt(a.indexOf(c))) // Replace special characters
            .replace(/&/g, '-and-') // Replace & with 'and'
            .replace(/[^\w\-]+/g, '') // Remove all non-word characters
            .replace(/\-\-+/g, '-') // Replace multiple - with single -
            .replace(/^-+/, '') // Trim - from start of text
            .replace(/-+$/, '') // Trim - from end of text
    }
    this.$inputField = $("#title");
    this.$inputField.on('keyup', function (event) {
        $("#url").val(slugify($(event.target).val()));
    });


    var toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'], // toggled buttons
        ['blockquote', 'code-block'],

        [{
            'header': 1
        }, {
            'header': 2
        }], // custom button values
        [{
            'list': 'ordered'
        }, {
            'list': 'bullet'
        }],
        [{
            'script': 'sub'
        }, {
            'script': 'super'
        }], // superscript/subscript
        [{
            'indent': '-1'
        }, {
            'indent': '+1'
        }], // outdent/indent
        [{
            'direction': 'rtl'
        }], // text direction

        [{
            'size': ['small', false, 'large', 'huge']
        }], // custom dropdown
        [{
            'header': [1, 2, 3, 4, 5, 6, false]
        }],

        [{
            'color': []
        }, {
            'background': []
        }], // dropdown with defaults from theme
        [{
            'font': []
        }],
        [{
            'align': []
        }],

        ['clean'] // remove formatting button
    ];

    class QuillWrapper {

        /**
         * @param targetDivId { string } The id of the div the editor will be in.
         * @param targetInputId { string } The id of the hidden input
         * @param quillOptions { any } The options for quill
         */
        constructor(targetDivId, targetInputId, quillOptions) {

            //Validate target div existence
            this.targetDiv = document.getElementById(targetDivId);
            if (!this.targetDiv) throw "Target div id was invalid";

            //Validate target input existence
            this.targetInput = document.getElementById(targetInputId);
            if (!this.targetInput) throw "Target input id was invalid";

            //Init Quill
            this.quill = new Quill("#" + targetDivId, quillOptions);

            //Bind the two containers together by listening to the on-change event
            this.quill.on('text-change',
                () => {
                    this.targetInput.value = this.targetDiv.children[0].innerHTML;
                });
        }
    }
    var quill = new QuillWrapper('editor-container', 'description', {
        modules: {
            toolbar: toolbarOptions
        },
        placeholder: 'Importante empresa minera requiere incorporar a su equipo de especialistas...',
        theme: 'snow'
    });

    function changeCompany($cbox) {
        let value = $cbox.val();
        $card = $('#card-new-company');

        if (value == 0) {
            $card.removeClass('d-none');
        }
        else {
            $card.addClass('d-none');
        }
    }

    $(document).ready(function() {
        $('#business_id').change(function() {
            changeCompany($(this));
        });
    });
</script>
@endpush