@extends('layouts.admin.app')
@section('title') Update Run Sheet @stop
@section('style')
    <style>
        .datepicker td, .datepicker th {
            width:auto !important;
        }
    </style>
@endsection
@section('main')
    <div id="app">
        <div class="container text-right" style="margin-bottom:5px;">
            <a class="btn btn-success" href="{{route('admin.kitchen.run-sheets.index')}}">Manage Run Sheets</a>
        </div>

        {!! Form::open(['method'=>'POST','action' => 'AdminRunSheetsController@store']) !!}

        <div class="box box-primary">
            <div class="box-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('product_id', 'Product') !!}
                            <select v-select2 name="product_id" id="product_id" class="form-control select2"
                                    placeholder="Search for a product">
                                <option value="">Search a product</option>
                                <option v-for="product in products" v-bind:value="product.id">@{{ product.name }} (@{{
                                    product.sku }})
                                </option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-1">
                        <button class="btn btn-info" style=margin-top:25px;">Load</button>
                    </div>

                    <div class="col-md-3">
                        {!! Form::label('bath', 'Batch') !!}
                        <p class="small">Batch # will be generated on add</p>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('date', 'Date') !!}

                            <div class="input-group date">
                                <div class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                {!! Form::text('date', null, ['class'=>'form-control pull-right datepicker']) !!}
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>

        <div class="box box-primary">
            <div class="box-body">

                <div class="row" v-for="(ingredient, index) in ingredients">
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('ingredient', 'Ingredient') !!}
                            {!! Form::text('ingredients[name][]', null, ['class'=>'form-control','placeholder'=>'Ingredient','v-model'=>'ingredient.name']) !!}
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('quantity', 'Quantity') !!}
                            {!! Form::text('ingredients[quantity][]', null, ['class'=>'form-control','placeholder'=>'Quantity','v-model'=>'ingredient.quantity']) !!}
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            {!! Form::label('measurement', 'Measurement') !!}
                            {!! Form::select('ingredients[measurement][]', $measurements, null , ['class'=>'form-control','v-model'=>'ingredient.measurement']) !!}
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('ponumber', 'PO Number') !!}
                            {!! Form::text('ingredients[ponumber][]', null, ['class'=>'form-control','placeholder'=>'PO Number','v-model'=>'ingredient.ponumber']) !!}
                        </div>
                    </div>

                    <div class="col-md-1">
                        <div class="form-group">
                            {!! Form::label('actions', 'Actions') !!}
                            <button class="btn btn-danger btn-block" v-on:click.prevent="removeIngredient(index)">
                                Delete
                            </button>
                        </div>
                    </div>
                </div>

                <button class="btn btn-info btn-block" v-on:click.prevent="addNewIngredient">Add Ingredient</button>

            </div>
        </div>

        <div class="box box-primary">
            <div class="box-body">
                <div class="row" v-for="(record, index) in records">
                    <div class="col-md-2">
                        <div class="form-group">
                            {!! Form::label('date', 'Date') !!}
                            {!! Form::text('records[date][]', null, ['class'=>'form-control','placeholder'=>'Date','v-model'=>'record.date']) !!}
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            {!! Form::label('temperature,', 'Temperature') !!}
                            {!! Form::text('records[temperature][]', null, ['class'=>'form-control','placeholder'=>'Temperature','v-model'=>'record.temperature']) !!}
                        </div>
                    </div>

                    <div class="col-md-1">
                        <div class="form-group">
                            {!! Form::label('oven', 'Oven') !!}
                            {!! Form::text('records[oven][]', null, ['class'=>'form-control','placeholder'=>'Oven','v-model'=>'record.oven']) !!}
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            {!! Form::label('timein', 'Time in') !!}
                            {!! Form::text('records[timein][]', null, ['class'=>'form-control','placeholder'=>'Time in','v-model'=>'record.timein']) !!}
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            {!! Form::label('timeout', 'Time out') !!}
                            {!! Form::text('records[timeout][]', null, ['class'=>'form-control','placeholder'=>'Time out','v-model'=>'record.timeout']) !!}
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            {!! Form::label('cook_time', 'Cook Time') !!}
                            <p>@{{ cookTime }}</p>
                        </div>
                    </div>


                    <div class="col-md-1">
                        <div class="form-group">
                            {!! Form::label('actions', 'Actions') !!}
                            <button class="btn btn-danger btn-block" v-on:click.prevent="removeRecord(index)">Delete
                            </button>
                        </div>
                    </div>
                </div>

                <button class="btn btn-info btn-block" v-on:click.prevent="addNewRecord">Add Record</button>

            </div>
        </div>

        <div class="box box-primary">
            <div class="box-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('production_date', 'Production Date') !!}
                            <div class="input-group date">
                                <div class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                {!! Form::text('production_date', null, ['class'=>'form-control pull-right datepicker']) !!}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('production_ph', 'Production pH') !!}
                            {!! Form::text('production_ph', null, ['class'=>'form-control']) !!}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('production_brine_ph', 'Production Brine pH') !!}
                            {!! Form::text('production_brine_ph', null, ['class'=>'form-control']) !!}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('check_date', 'Check Date') !!}
                            {!! Form::text('check_date', null, ['class'=>'form-control']) !!}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('check_ph', 'Check pH') !!}
                            {!! Form::text('check_ph', null, ['class'=>'form-control']) !!}
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('check_brine_ph', 'Check Brine pH') !!}
                            {!! Form::text('check_brine_ph', null, ['class'=>'form-control']) !!}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            {!! Form::label('yield', 'Yield') !!}
                            {!! Form::text('yield', null, ['class'=>'form-control']) !!}
                        </div>
                        <div class="form-group">
                            {!! Form::label('status', 'Status') !!}
                            {!! Form::select('status', $status, null , ['class'=>'form-control', 'placeholder'=>'Select Status']) !!}
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="form-group">
                            {!! Form::label('notes', 'Notes') !!}
                            {!! Form::textarea('notes', null, ['class'=>'form-control','rows'=>'4']) !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 text-center">
                {!! Form::submit('Add Run Sheet', ['class'=>'btn btn-primary']) !!}
            </div>
        </div>


        {!! Form::close() !!}
    </div>
@stop
@section('footer')
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        $(document).on('focus', '.select2', function (e) {
            if (e.originalEvent) {
                $(this).siblings('select').select2('open');
            }
        });

    </script>
    <script>
        Vue.directive('select2', {
            inserted: function (el) {
                var self = this;
                $(el).select2({
                    width: 'auto'
                }).on('select2:select', function (e) {
                    if (e.detail === "vue-directive") {
                        return; // prevent stack overflow (i.e. listening to the event we threw ourselves)
                    }
                    // throw regular change (non jQuery) event, so vue reacts

                    (function () {
                        function CustomEvent(event, params) {
                            params = params || {bubbles: false, cancelable: false, detail: undefined};
                            var evt = document.createEvent('CustomEvent');
                            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
                            return evt;
                        };

                        CustomEvent.prototype = window.Event.prototype;
                        window.CustomEvent = CustomEvent;
                    })();

                    el.dispatchEvent(new CustomEvent("change", {
                        detail: "vue-directive"
                    }));
                    return false;
                })
            }
        });

        var app = new Vue({
            el: '#app',
            data: {
                products: [],
                ingredients: [
                    {
                        name: '',
                        quantity: '',
                        measurement: '',
                        ponumber: ''
                    }
                ],
                records: [
                    {
                        date: '',
                        temperature: '',
                        oven: '',
                        timein: '',
                        timeout: ''
                    }
                ],

            },
            methods: {
                addNewIngredient: function () {
                    this.ingredients.push(Vue.util.extend({}, this.ingredient));
                },
                removeIngredient: function (index) {
                    Vue.delete(this.ingredients, index);
                },
                addNewRecord: function () {
                    this.records.push(Vue.util.extend({}, this.records));
                },
                removeRecord: function (index) {
                    Vue.delete(this.records, index);
                }
            },
            computed: {
                cookTime: function () {
                    return '30 minutes';
                }
            },
            created: function () {
                this.products = {!! $products !!};
            }


        });
    </script>
@stop