@extends('layouts.admin.app')
@section('title') Edit Run Sheet @stop
@section('style')
    <style>
        .datepicker td, .datepicker th {
            width: auto !important;
        }

        .inc, .dec {
            display: inline-block;
        }
    </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>
            <button class="btn btn-danger" data-toggle="modal"
                    data-target="#delete-modal">Delete this Run Sheet</button>

        </div>

        {!! Form::open(['method'=>'PUT','action' => ['AdminRunSheetsController@update',$run_sheet->id]]) !!}

        <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') !!}
                            <p class="lead">{{$run_sheet->product->name}} ({{$run_sheet->product->sku}})</p>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="row">
                            <div class="col-xs-6">
                                {!! Form::label('bath', 'Batch') !!}
                                <p class="lead">{{$batch['sku']}}-{{$batch['year']}}-@{{batch}}</p>
                            </div>
                            <div class="col-xs-6" style="margin-top:20px;">
                                <button class="inc btn btn-sm btn-success" @click.prevent="batch++">+</button>
                                <button class="dec btn btn-sm btn-danger" @click.prevent="batch--">-</button>
                                <input type="hidden" name="batch" v-model="batch">
                            </div>
                        </div>
                    </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', $run_sheet->date, ['class'=>'form-control pull-right datepicker datemask']) !!}
                            </div>
                        </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', $run_sheet->production_date, ['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', $run_sheet->production_ph, ['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', $run_sheet->production_brine_ph, ['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', $run_sheet->check_date, ['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', $run_sheet->check_ph, ['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', $run_sheet->check_brine_ph, ['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', $run_sheet->yield, ['class'=>'form-control']) !!}
                        </div>
                        <div class="form-group">
                            {!! Form::label('status', 'Status') !!}
                            {!! Form::select('status', $status, $run_sheet->status , ['class'=>'form-control', 'placeholder'=>'Select Status']) !!}
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="form-group">
                            {!! Form::label('notes', 'Notes') !!}
                            {!! Form::textarea('notes', $run_sheet->notes, ['class'=>'form-control','rows'=>'4']) !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 text-center">
                {!! Form::submit('Save Changes', ['class'=>'btn btn-primary']) !!}
                <a href="{{route('admin.kitchen.run-sheets.index')}}" class="btn btn-warning">Cancel</a>
            </div>
        </div>


        {!! Form::close() !!}
    </div>

    <div class="modal modal-danger fade" id="delete-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Delete this Run Sheet</h4>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this from the
                        database?</p>
                </div>
                <div class="modal-footer">
                    {!! Form::open(['method'=>'DELETE','action' => ['AdminRunSheetsController@destroy', $run_sheet->id]]) !!}
                    <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-outline">Delete</button>
                    {!! Form::close() !!}
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

@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: {
                batch: 0,
                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);
                },
                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 !!};
                this.ingredients = {!! $run_sheet->ingredients !!}
                    this.records = {!! $run_sheet->records !!}
                    this.batch = {!! $run_sheet->batch !!}
            }


        });
    </script>
@stop