@extends('layouts.app')

@section('title', 'Procesos de Selección')
@section('pagename', 'Editar Proceso de Selección')

@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.jobs', [], 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.jobs.update', $job->id, false) }}">
            @csrf
            @method('PUT')

            <div class="form-group row">
                <div class="col-sm-3">
                    <label for="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">
                    <select class="form-control mb-3" name="business_id" id="business_id">
                        <option value="">--</option>
                        @foreach ($businesses as $bz)
                        <option value="{{ $bz->id }}"
                            {{ old('business_id', $job->business_id) == $bz->id ? 'selected' : ''  }}>
                            {{ $bz->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <hr>
            <div class="form-group row">
                <div class="col-sm-3">
                    <label for="company" class="col-form-label">Puesto de trabajo</label><br>
                    <small class="text-muted">Detalles y descripción del nuevo puesto de trabajo</small>
                </div>
                <div class="col-sm-9">
                    <label for="title" class="col-form-label">Nombre del puesto</label><br>
                    <input type="text" class="form-control" id="title" name="title"
                        value="{{ old('title', $job->title) }}"
                        placeholder="Ej. Ingeniero químico especializado en mina">
                </div>
                <div class="col-sm-6 offset-3">
                    <label for="url" class="col-form-label text-muted">Slug</label><br>
                    <input type="text" class="form-control" id="url" name="url" value="{{ old('url', $job->url) }}" disabled>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-6 offset-3">
                    <label for="area_id" class="col-form-label">Área</label><br>
                    <select class="form-control" name="area_id" id="area_id">
                        <option disabled selected readonly>Selecciona un área</option>
                        @foreach ($areas as $area)
                        <option value="{{ $area->id }}"
                            {{ old('area_id', $job->area_id) == $area->id ? 'selected' : ''  }}>
                            {{ $area->name }}
                        </option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-6 offset-3">
                    <label for="sub_area" class="col-form-label">Sub área</label><br>
                    <input type="text" class="form-control" id="sub_area" name="sub_area"
                        value="{{ old('sub_area', $job->sub_area) }}">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-6 offset-3">
                    <label for="level" class="col-form-label">Nivel de experiencia requerido</label><br>
                    <select class="form-control" name="level" id="level">
                        <option disabled selected readonly>Selecciona un nivel</option>
                        @foreach ($levels as $key => $value)
                        <option value="{{ $key }}" {{ old('level', $job->level) == $key ? 'selected' : ''  }}>
                            {{ $value }}
                        </option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-6 offset-3">
                    <label for="location_id" class="col-form-label">Ubicación del empleo</label><br>
                    <select class="form-control" name="location_id" id="location_id" value="{{ old('location_id') }}">
                        <option disabled selected readonly>Selecciona una ubicación</option>
                        @foreach ($locations as $l)
                        <option value="{{ $l->id }}"
                            {{ old('location_id', $job->location_id) == $l->id ? 'selected' : ''  }}>
                            {{ $l->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-6 offset-3">
                    <label for="city" class="col-form-label">Ciudad</label><br>
                    <input type="text" class="form-control" id="city" name="city" value="{{ old('city', $job->city) }}">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-9 offset-3">
                    <label for="currency" class="col-form-label">Rango salarial</label><br>
                </div>
                <div class="col-sm-2 offset-3">
                    <select class="form-control" name="currency" id="currency"
                        value="{{ old('currency', $job->currency) }}">
                        <option value readonly disabled selected>Moneda</option>
                        @foreach ($currencies as $key => $value)
                        <option value="{{ $key }}" {{ old('currency', $job->currency) == $key ? 'selected' : ''  }}>
                            {{ $value }}
                        </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="min" name="min" value="{{ old('min', $job->min) }}"
                        placeholder="Min.">
                </div>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="max" name="max" value="{{ old('max', $job->max) }}"
                        placeholder="Max.">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-6 offset-3">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="hide_salary" name="hide_salary" value="1"
                            {{ old('hide_salary', $job->hide_salary) ? 'checked' : '' }}>
                        <label class="form-check-label" for="hide_salary">Ocultar rango salarial</label>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-6 offset-3">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="hide_business" name="hide_business"
                            value="1" {{ old('hide_business') ? 'checked' : '' }}>
                        <label class="form-check-label" for="hide_business">Ocultar nombre de empresa</label>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-6 offset-3">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="highlighted" name="highlighted" value="1"
                            {{ old('highlighted', $job->highlighted) ? 'checked' : '' }}>
                        <label class="form-check-label" for="highlighted">Destacar en home</label>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-12">
                    <label for="Scope" class="col-form-label">Descripción del puesto</label><br>
                    <div id="toolbar-container"></div>
                    <div id="editor-container" style="height: 400px">{!! old('description', $job->description) !!}</div>
                    <input type="hidden" name="description" id="description"
                        value="{{ old('description', $job->description) }}">
                </div>
            </div>

            <button type="submit" class="btn btn-primary">Actualizar</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