@extends('eform.layout.app')
@section('styles')
    <style>
        section {
            padding: 30px 0;
        }

        table th {
            width: 20px;
            text-align: center;
        }

        table td {
            padding: 1px 0;
            text-align: center;
            vertical-align: middle !important;
        }

        .inputNumber {
            max-width: 50px;
        }

        form input[type=text] {
            width: 100%;
        }

        table .price {
            background: none;
            border: none;
        }

        .invalid-feedback {
            display: block;
        }
    </style>
@endsection
@section('content')
    {!! Form::open(['method'=>'POST','action' => 'EFormController@submit']) !!}
    <div class="container">
        <div class="row">
            <div class="text-center text-md-left col-sm-4">
                <h3>
                    New Mailing <br> Address
                </h3>
            </div>
            <div class="col-sm-4 text-center">
                <img class="img-fluid" src="{{url('/')}}/img/logo.png" alt="">
            </div>
            <div class="col-sm-4 text-center text-md-right">
                <p>800.755.2434</p>
                <p>Fax - 903.686.2216</p>
                <p>www.gourmetgardens.com</p>
            </div>
        </div>
        @if ($errors->any())
        <div class="row">
            <div class="col-12">
                <div class="alert alert-danger" role="alert">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
        @endif
        <div class="row">
            <div class="col-md-6">
                <table class="table table-bordered table-sm">
                    <tbody>
                    <tr>
                        <th>Bill To*</th>
                        <td>{!! Form::text('bill_to', null, ['class'=>'form-control form-control-sm']) !!}</td>
                    </tr>

                    <tr>
                        <th>Address*</th>
                        <td>{!! Form::text('bill_address', null, ['class'=>'form-control form-control-sm']) !!}</td>
                    </tr>
                    <tr>
                        <th>City*</th>
                        <td>{!! Form::text('bill_city', null, ['class'=>'form-control form-control-sm']) !!}</td>
                    </tr>
                    <tr>
                        <th>State*</th>
                        <td>{!! Form::select('bill_state',$stateForm, null, ['class'=>'form-control form-control-sm','placeholder'=>'Select State']) !!}</td>
                    </tr>
                    <tr>
                        <th>Zip*</th>
                        <td>{!! Form::number('bill_zip', null, ['class'=>'form-control form-control-sm']) !!}</td>
                    </tr>
                    <tr>
                        <th>Phone*</th>
                        <td>{!! Form::text('phone', null, ['class'=>'form-control form-control-sm']) !!}</td>
                    </tr>
                    <tr>
                        <th>Email*</th>
                        <td>{!! Form::email('email', null, ['class'=>'form-control form-control-sm']) !!}</td>
                    </tr>
                    <tr>
                        <th>Representative</th>
                        <td>{!! Form::text('representative', null, ['class'=>'form-control form-control-sm']) !!}</td>
                    </tr>
                    <tr>
                        <th>Payment Method*</th>
                        <td>{!! Form::text('payment_method', null, ['class'=>'form-control form-control-sm']) !!}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-md-6">
                <table class="table table-bordered table-sm">
                    <tbody>
                    <tr>
                        <th>Ship To*</th>
                        <td>{!! Form::text('ship_to', null, ['class'=>'form-control form-control-sm']) !!}</td>
                    </tr>
                    <tr>
                        <th>Address*</th>
                        <td>{!! Form::text('ship_address', null, ['class'=>'form-control form-control-sm']) !!}</td>
                    </tr>
                    <tr>
                        <th>City*</th>
                        <td>{!! Form::text('ship_city', null, ['class'=>'form-control form-control-sm']) !!}</td>
                    </tr>
                    <tr>
                        <th>State*</th>
                        <td>{!! Form::select('ship_state', $stateForm,null, ['v-model'=>'ship_state','@change'=>'changePrice','class'=>'form-control form-control-sm','placeholder'=>'Select State']) !!}</td>
                    </tr>
                    <tr>
                        <th>Zip*</th>
                        <td>{!! Form::number('ship_zip', null, ['class'=>'form-control form-control-sm']) !!}</td>
                    </tr>
                    <tr>
                        <th>Contact Name*</th>
                        <td>{!! Form::text('name', null, ['class'=>'form-control form-control-sm']) !!}</td>
                    </tr>
                    <tr>
                        <th>Label Description*</th>
                        <td>{!! Form::text('label', null, ['class'=>'form-control form-control-sm']) !!}</td>
                    </tr>
                    <tr>
                        <th>Bar code*</th>
                        <td>{!! Form::select('barcode', ['Yes'=>'Yes', 'No'=>'No'], null, ['class'=>'form-control form-control-sm','placeholder'=>'Select']) !!}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div id="products" class="row">
            @foreach($categories as $category)
                <div class="col-md-6 item">
                    <table class="table table-bordered table-sm">
                        <thead class="thead-light">
                        <tr>
                            <th scope="col" colspan="5" class="text-center">{{$category->name}}</th>
                        </tr>
                        </thead>
                        <thead class="thead-light">
                        <tr>
                            <th scope="col">Qty</th>
                            <th scope="col">SKU</th>
                            <th scope="col">Description</th>
                            <th scope="col">Price</th>
                            <th scope="col">Total</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach(App\Product::whereCategoryId($category->id)->get() as $product)
                            <tr>
                                <td>{!! Form::text('cart['.$product->id.'][qty]', null,['v-model'=>'selected.inputNumber'.$product->id,'class'=>'inputNumber form-control form-control-sm mx-auto']) !!}</td>
                                <td>{{$product->sku}}</td>
                                <td>{{$product->name}}</td>
                                <td>
                                    $ {!! Form::text('cart['.$product->id.'][price]', null,['v-model'=>'selected.inputPrice'.$product->id,'class'=>'inputNumber price','readonly']) !!}</td>
                                <td>
                                    $ {!! Form::text('cart['.$product->id.'][total]', null,['v-model'=>'inputSubtotal'.$product->id,'class'=>'inputNumber price','readonly']) !!}</td>
                            </tr>
                            {!! Form::hidden('cart['.$product->id.'][id]', $product->id) !!}
                            {!! Form::hidden('cart['.$product->id.'][name]', $product->name) !!}
                            {!! Form::hidden('cart['.$product->id.'][options][sku]', $product->sku) !!}
                        @endforeach
                        <tr>
                            <th class="text-right" colspan="4">Total</th>
                            <td>
                                $ {!! Form::text('subtotal', null,['v-model'=>'inputTotal'.$category->id,'class'=>'inputNumber price','disabled']) !!}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            @endforeach
        </div>
        <div class="row">
            <div class="col-12 text-center">
                <h2 class="text-danger"><strong>
                    *FREE SHIPPING on 30 CASES or more*
                    </strong>
                </h2>
                <hr>
                <p> <span class="text-danger">50%</span> Shipping Discount on 10-29 cases Full Freight Charged on 1-9 cases</p>

            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                {!! Form::submit('Place Order', ['class'=>'btn btn-primary btn-block']) !!}
            </div>
        </div>
    </div>
    <div class="gutter-bottom"></div>
    {!! Form::close() !!}
@endsection
@section('script')
    <script>
        var app = new Vue({
            el: '#app',
            data: {

                states: {},
                ship_state:'',

                selected:{
                    @foreach(App\Product::all() as $product)
                    inputNumber{{$product->id}}: '',
                    inputPrice{{$product->id}}:'0',
                    @endforeach
                },

                noValue:{
                    @foreach(App\Product::all() as $product)
                    inputNumber{{$product->id}}: '',
                    inputPrice{{$product->id}}:'0',
                    @endforeach
                },

                zone1:{
                    @foreach(App\Product::all() as $product)
                    inputNumber{{$product->id}}: '',
                    inputPrice{{$product->id}}:{{$product->price_zone1}},
                    @endforeach
                },

                zone2:{
                    @foreach(App\Product::all() as $product)
                    inputNumber{{$product->id}}: '',
                    inputPrice{{$product->id}}:{{$product->price_zone2}},
                    @endforeach
                }

            },
            computed: {
                @foreach($categories as $category)
                inputTotal{{$category->id}}: function () {
                    var subtotal = 0;
                    @foreach(App\Product::whereCategoryId($category->id)->get() as $product)
                        subtotal = subtotal + this.inputSubtotal{{$product->id}};
                    @endforeach
                        return subtotal;
                },
                @endforeach

                        @foreach(App\Product::all() as $product)
                inputSubtotal{{$product->id}}: function () {
                    var subtotal = this.selected.inputNumber{{$product->id}} * this.selected.inputPrice{{$product->id}};
                    return subtotal;
                },
                @endforeach
            },
            methods:{
                changePrice: function(){
                    if(this.ship_state == ''){
                        this.selected = this.noValue;
                        return;
                    }

                    if(this.states[this.ship_state] == 1){
                        this.selected = this.zone1;
                        return;
                    }

                    if(this.states[this.ship_state] == 2){
                        this.selected = this.zone2;
                        return;
                    }

                }
            },
            created: function(){
                this.states = {!! $states !!};
            }
        });
    </script>
@endsection