@extends('layouts.app')

@php
    $asignFire = '';
    $asignHigh = '';
    $asignMed = '';
    $asignLow = '';

    if (isset($asignedkeys) && is_array($asignedkeys) && count($asignedkeys) > 0) {
        $singleAsign = [];
        foreach ($asignedkeys as $key => $kval) {
            $singleAsign[$kval['asignkeys']['keyword_id']][] = $kval['asignkeys']['keyword_value'];
        }
        $asignFire =
            isset($singleAsign[1]) && !empty($singleAsign[1]) ? implode(',', array_unique($singleAsign[1])) : '';
        $asignHigh =
            isset($singleAsign[2]) && !empty($singleAsign[2]) ? implode(',', array_unique($singleAsign[2])) : '';
        $asignMed =
            isset($singleAsign[3]) && !empty($singleAsign[3]) ? implode(',', array_unique($singleAsign[3])) : '';
        $asignLow =
            isset($singleAsign[4]) && !empty($singleAsign[4]) ? implode(',', array_unique($singleAsign[4])) : '';
    }

    $fire = '';
    $high = '';
    $med = '';
    $low = '';

    if (isset($totalData) && is_array($totalData) && count($totalData) > 0) {
        $fire =
            isset($totalData[1]['keyval']) && !empty($totalData[1]['keyval'])
                ? implode(',', $totalData[1]['keyval'])
                : '';
        $high =
            isset($totalData[2]['keyval']) && !empty($totalData[2]['keyval'])
                ? implode(',', $totalData[2]['keyval'])
                : '';
        $med =
            isset($totalData[3]['keyval']) && !empty($totalData[3]['keyval'])
                ? implode(',', $totalData[3]['keyval'])
                : '';
        $low =
            isset($totalData[4]['keyval']) && !empty($totalData[4]['keyval'])
                ? implode(',', $totalData[4]['keyval'])
                : '';
    }
@endphp
@section('page-title')
@endsection

@push('head-script')
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/tagify-master/dist/tagify.css') }}">
    <style>
        .addrow {
            margin-top: 25px;
            padding: 0 84px 0 18px;
        }

        .submitbtn {
            margin-bottom: 25px;
        }
    </style>
@endpush

@section('content')
    <div class="container" style="border:1px solid #ccc; max-width:1000px;">
        <div class="row addrow">
            <div class="col-md-8">
                <h4>Add/Edit Keywords</h4>
            </div>
            <div class="col-md-2">
                <a href="{{ route('keywords.assign') }}" class='btn btn-primary'>+Keyword Assign</a>
            </div>
            <div class="col-md-2">
                <a href="{{ route('keywords.assignlist') }}" class='btn btn-primary'>Listing Assign Keywords</a>
            </div>

        </div>
        <form id="createkeyword" class="ajax-form" method="POST">
            <!--/span-->
            @csrf
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label>Fire</label>
                        <input name='fire' placeholder='Add Keyword' value='{{ $fire }}'>
                        <p>Assigned Fire Keywords:<b> {{ $asignFire ?? '' }} </b></p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label>High</label>
                        <input name='high' placeholder='Add Keyword' value='{{ $high }}'>
                        <p>Assigned High Keywords:<b> {{ $asignHigh ?? '' }} </b></p>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label>Medium</label>
                        <input name='medium' placeholder='Add Keyword' value='{{ $med }}'>
                        <p>Assigned Med Keywords: <b> {{ $asignMed ?? '' }} </b> </p>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label>Low</label>
                        <input name='low' placeholder='Add Keyword' value='{{ $low }}'>
                        <p>Assigned Low Keywords: <b> {{ $asignLow ?? '' }} </b> </p>

                    </div>
                </div>
            </div>
            <div class="row submitbtn">
                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <button class="btn btn-block btn-success p-4" type="submit" id="save-form" class="btn btn-success"><i
                            class="fa fa-check"></i> @lang('app.save')</button>
                </div>
            </div>
        </form>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div> <!-- .row -->
@endsection

@push('footer-script')
    <script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
    <script src="{{ asset('plugins/tagify-master/dist/tagify.js') }}"></script>
    <script data-name="basic">
        (function() {
            $("#department").select2({
                formatNoMatches: function() {
                    return "{{ __('messages.noRecordFound') }}";
                }
            });
            $("#designation").select2({
                formatNoMatches: function() {
                    return "{{ __('messages.noRecordFound') }}";
                }
            });
            $(".select2").select2({
                formatNoMatches: function() {
                    return "{{ __('messages.noRecordFound') }}";
                }
            });

            var input = document.querySelector('input[name=fire]'),
                // init Tagify script on the above inputs
                tagify = new Tagify(input, {
                    whitelist: {!! json_encode($skills) !!},
                    //  blacklist : [".NET", "PHP"] // <-- passed as an attribute in this demo
                });
            var input = document.querySelector('input[name=high]'),
                // init Tagify script on the above inputs
                tagify = new Tagify(input, {
                    whitelist: {!! json_encode($skills) !!},
                    //  blacklist : [".NET", "PHP"] // <-- passed as an attribute in this demo
                });
            var input = document.querySelector('input[name=medium]'),
                // init Tagify script on the above inputs
                tagify = new Tagify(input, {
                    whitelist: {!! json_encode($skills) !!},
                    //  blacklist : [".NET", "PHP"] // <-- passed as an attribute in this demo
                });
            var input = document.querySelector('input[name=low]'),
                // init Tagify script on the above inputs
                tagify = new Tagify(input, {
                    whitelist: {!! json_encode($skills) !!},
                    //  blacklist : [".NET", "PHP"] // <-- passed as an attribute in this demo
                });

            // Chainable event listeners
            tagify.on('add', onAddTag)
                .on('remove', onRemoveTag)
                .on('input', onInput)
                .on('invalid', onInvalidTag)
                .on('click', onTagClick);

            // tag added callback
            function onAddTag(e) {
                tagify.off('add', onAddTag) // exmaple of removing a custom Tagify event
            }

            // tag remvoed callback
            function onRemoveTag(e) {}

            // on character(s) added/removed (user is typing/deleting)
            function onInput(e) {}

            // invalid tag added callback
            function onInvalidTag(e) {}

            // invalid tag added callback
            function onTagClick(e) {}

        })()
    </script>

    <script>
        $('#save-form').click(function() {

            $.easyAjax({
                url: '{{ route('keywordstore') }}',
                container: '#createkeyword',
                type: "POST",
                redirect: true,
                //file: (document.getElementById("image").files.length == 0) ? false : true,
                data: $('#createkeyword').serialize()
            })
        });
    </script>
@endpush