@extends('layouts.admin.app')
@section('title') Add Run Sheets @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" v-model="selected_product">
                                <option value="">Search a product</option>
                                <option v-for="product in products" v-bind:value="product.id">@{{ product.name }} (@{{
                                    product.sku }})
                                </option>
                            </select>
                            @if ($errors->has('product_id'))
                                <span class="invalid-feedback">
                                    <strong>{{ $errors->first('product_id') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>

                    <div class="col-md-1">
                        <button v-show="selected_product" class="btn btn-info" style=margin-top:25px;" @click.prevent="loadIngredients()">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 datemask']) !!}
                            </div>
                            @if ($errors->has('date'))
                                <span class="invalid-feedback">
                                    <strong>{{ $errors->first('date') }}</strong>
                                </span>
                            @endif
                        </div>

                    </div>

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

        <div class="box box-primary">
            <div class="box-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('ingredient', 'Ingredient') !!}
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('quantity', 'Quantity') !!}
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            {!! Form::label('measurement', 'Measurement') !!}
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('ponumber', 'PO Number') !!}
                        </div>
                    </div>

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

                    <div class="col-md-3">
                        <div class="form-group">
                            <input type="text" class="form-control" name="ingredients[quantity][]"
                                   v-model="ingredient.quantity" placeholder="Quantity">
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            <select name="ingredients[measurement][]" id="product_id" class="form-control"
                                    v-model="ingredient.measurement">
                                @foreach($measurements as $measurement)
                                    <option value="{{$measurement}}">{{$measurement}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>


                    <div class="col-md-3">
                        <div class="form-group">
                            <input type="text" class="form-control" name="ingredients[ponumber][]"
                                   v-model="ingredient.ponumber" placeholder="PO Number">
                        </div>
                    </div>

                    <div class="col-md-1">
                        <div class="form-group">
                            <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">
                    <div class="col-md-2">
                        <div class="form-group">
                            {!! Form::label('date', 'Date') !!}
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            {!! Form::label('temperature,', 'Temperature') !!}
                        </div>
                    </div>

                    <div class="col-md-1">
                        <div class="form-group">
                            {!! Form::label('oven', 'Oven') !!}
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            {!! Form::label('timein', 'Time in') !!}
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            {!! Form::label('timeout', 'Time out') !!}
                        </div>
                    </div>

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


                    <div class="col-md-1">
                        <div class="form-group">
                            {!! Form::label('actions', 'Actions') !!}
                        </div>
                    </div>
                </div>
                <div class="row" v-for="(record, index) in records">
                    <div class="col-md-2">
                        <div class="form-group">
                            <input type="text" class="form-control" name="records[date][]" v-model="record.date"
                                   placeholder="mm/dd/yyyy">
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            <input type="text" class="form-control" name="records[temperature][]" v-model="record.temperature"
                                   placeholder="Date">
                        </div>
                    </div>

                    <div class="col-md-1">
                        <div class="form-group">
                            <input type="text" class="form-control" name="records[oven][]" v-model="record.oven"
                                   placeholder="Oven">
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            <input type="text" class="form-control" name="records[timein][]" v-model="record.timein"
                                   placeholder="hh:mm">
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            <input type="text" class="form-control" name="records[timeout][]" v-model="record.timeout"
                                   placeholder="hh:mm">
                        </div>
                    </div>

                    <div class="col-md-2">
                        <div class="form-group">
                            <p v-if="record.timein && record.timeout">@{{ cookTime(record.timein,record.timeout) }}</p>
                        </div>
                    </div>


                    <div class="col-md-1">
                        <div class="form-group">
                            <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 datemask']) !!}
                            </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') !!}
                            <div class="input-group date">
                                <div class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                {!! Form::text('check_date', null, ['class'=>'form-control pull-right datepicker datemask']) !!}
                            </div>
                        </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://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.js"></script>
    <script>
        $(document).ready(function(){
            $('.datemask').inputmask("mm/dd/yyyy");
        });
    </script>
    <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: {
                selected_product: '',
                products: [],
                ingredients: [
                    {
                        name: '',
                        quantity: '',
                        measurement: '',
                        ponumber: ''
                    }
                ],
                records: [
                    {
                        date: '',
                        temperature: '',
                        oven: '',
                        timein: '',
                        timeout: ''
                    }
                ],

            },
            methods: {
                loadIngredients: function(){
                    var self = this;
                    this.products.forEach(function (product){
                        if(product.id === self.selected_product){
                            self.ingredients = JSON.parse(product.ingredients);
                        }
                    });

                },
                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);
                },
                cookTime: function (start,end) {

                        return (new Date("01/01/2007 " + end +':00').getTime() - new Date("01/01/2007 " + start +':00').getTime()) /60000 + ' minutes';

                }
            },
            created: function () {
                this.products = {!! $products !!};
            }


        });
    </script>
@stop