@extends('layouts.app')

@section('content')
    <div class="row">
        <div style="display: flex; justify-content: center; margin: 0 40px;">

            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="work">
                    <a href="https://www.trufit.eu/lv/catalog/product/view/id/" target="_blank"><h1>{{ $project->project->name}}</h1></a>
                    <h2>Nutrition facts edit</h2>
                    <div style="display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;">
                    {!! Form::model($project, array('route' => array('nutrition.update',$project->id), 'method' => 'patch')) !!}
                        <input type="hidden" name="facts_productname" value="{{ $project->project->name}}">
                        <input type="submit" value="Saglabāt un publicēt" style="color: white; background: #1abc9c; border: none; padding: 0.5em 1em;">
                        <br><br>
                        <div style="width: 600px; position:relative; margin-right: 15px;">
                            <div>
                                <label>Attribute (Flavor)</label>
                                <input name="facts_attribute" type="text" value="" ><br />
                                <div style="display: flex">
                                    <div>
                                        <label>1 Serving Size</label>
                                        <input name="facts_servingsize" type="text" value="">
                                    </div>
                                    <div>
                                        <label>Alt. serving size</label>
                                        <input name="facts_alt_servingsize" type="text" value="">
                                    </div>
                                    <div>
                                        <label>Alt. size multiplier</label>
                                        <input name="facts_alt_size_multiplier" type="text" value="">
                                    </div>
                                </div>
                                <label>Dietary Allowance</label>
                                <select name="facts_allowance_label"><option value="DV">%DV</option><option value="NRV">%NRV</option><option value="RI">%RI</option>                                </select>
                            </div>
                        </div>
                        <br>
                        <label>Ingredients</label>
                        <textarea class="ingredients" name="facts_ingredients" width="60" rows="12" style="font-family: monospace;line-height: 2;"></textarea><br />
                        <input type="checkbox" name="remove_alt_column" id="remove_alt_column">
                        <label for="remove_alt_column">Remove Alternative size column form ingredients markup code.</label>
                        <br />
                        <input class="highlight" type="button" value="Highlight">
                        <br /><br /><br />
                        <label>Papild Sastāvs</label>
                        <textarea name="facts_extra_ingr" cols="60" rows="6" ></textarea>
                        <br />
                        <label>Alergēni / Brīdinājumi</label>
                        <textarea name="facts_allergens" cols="60" rows="6" ></textarea>
                        <br />
                        <input type="submit" value="Saglabāt un publicēt" style="color: white; background: #1abc9c; border: none; padding: 0.5em 1em;">
                    {!! Form::close() !!}

                                            <div style="margin: 0 15px;">
                            Speciālo simbolu pielietojums
                            <table style="width: 600px; font-weight: 500">
                                <tr>
                                    <td style="white-space: nowrap">|</td>
                                    <td>Lieto kolonu atdalīšanai</td>
                                </tr>
                                <tr>
                                    <td style="white-space: nowrap">>></td>
                                    <td>Nobīda tekstu pa labi. Lieto tikai rindas sākumā.</td>
                                </tr>
                                <tr>
                                    <td style="white-space: nowrap">===</td>
                                    <td>Trekna līnija</td>
                                </tr>
                                <tr>
                                    <td style="white-space: nowrap">//</td>
                                    <td>Tekstu pārnes jaunā līnijā</td>
                                </tr>
                                <tr>
                                    <td style="white-space: nowrap">{ ... }</td>
                                    <td>Tekststs izliektajās iekavās tiek pataisīts slīps. Darbojas tikai tad, ja rindas sākumā ir kāds no speciālajiem simboliem:  >>, ^ vai + <br>Praktiksi tiek ļoti reti izmantots - pa lielam tikai kā "^+" gariem sastāvdaļas papildinošiem tekstiem , kurus nepieciešams izretināt visas tabulas platumā. Īsajiem sastāvdaļas paskaidrojumiem šī vietā tagad izmantojam nākamo "Sastāvdaļa (...)"</td>
                                </tr>
                                <tr>
                                    <td style="white-space: nowrap">Sastāvdaļa ( ... )</td>
                                    <td>Teksts iekavās, kas nāk uzreiz pēc sastāvdaļas pirmajā kolonā, tiek palikts sem sastāvdaļas nosaukuma, ieslīps. Gari teksti tiek ierobežoti pirmās kolonas platumā. Ja nepieciešams izretināt visas kolonas platumā izmantot izliektās iekavas -  "^+{...garšs.texts...}" jaunā rindā</td>
                                </tr>
                                <tr>
                                    <td style="white-space: nowrap">[ ... ]</td>
                                    <td>Tekststs kvadrātiekavās tiek pataisīts treknāks (bold / strong)</td>
                                </tr>
                                <tr>
                                    <td style="white-space: nowrap">^</td>
                                    <td>Noņem augšējo sadalošo rindas līniju, tekstu padara ieslīpu. Gari teksti tiek ierobežoti pirmās kolonas platumā. Kombinācijā ar + (piem, ^+Texts..) var panākt, ka teksts tiek izretināts pa visu tabulas platumu. Lieto tikai rindas sākumā.</td>
                                </tr>
                                <tr>
                                    <td style="white-space: nowrap">+</td>
                                    <td>Teksts tiek izretināts pa visu tabulas platumu (colspan all). Pēc + imantojot >> var panākt bloka nobīdi pa labi, bet tādā gadījumā teksts tiek samazināts, noņemts bold. </td>
                                </tr>
                                <tr>
                                    <td style="white-space: nowrap">!!</td>
                                    <td>Pieliekot rindas sākumā, neatkarīgi no citiem speciālajiem simboliem, viss rindas teksts tiks pateisīts treknāks (Bold / Strong)</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <link rel="stylesheet" href="{{ asset('css/trufacts/style.css') }}">
        <link rel="stylesheet" href="{{ asset('css/trufacts/jquery.highlighttextarea.css') }}">
        <script src="{{ asset('js/trufacts/jquery.highlighttextarea.js') }}"></script>

        <script>
            $('.highlight').click(function() {
                $('.ingredients').highlightTextarea({
                    words: [{
                        color: '#e74c3c',
                        words: ['\\|']
                    }
                        , {
                            color: '#f39c12',
                            words: ['\\>>']
                        }, {
                            color: 'grey',
                            words: ['\\===']
                        }, {
                            color: '#9b59b6',
                            words: ['\\{','\\}']
                        }, {
                            color: '#2ecc71',
                            words: ['\\[','\\]']
                        }, {
                            color: '#f1c40f',
                            words: ['\\+']
                        }, {
                            color: 'lightblue',
                            words: ['\\^']
                        }, {
                            color: 'coral',
                            words: ['\\//']
                        }, {
                            color: 'red',
                            words: ['\\!!']
                        }
                    ]
                });

            });


            $('textarea.ingredients').on('paste', function() {
                var $el = $(this);
                setTimeout(function() {
                    $el.val(function(i, val) {
                        return val.replace(/[\[\]]/g, '')
                    })
                })
            });
        </script>

    </div>
@endsection