@extends('layouts.header')
@include('validation.checkout')

@section('content')

<div class="container-fluid">
    <div class = "row">
        <!-- Inventory Table -->
        <div class="col-md-8 col-md-offset-2" >
            <form class="form-horizontal" role="form" method="POST" action="{{ route('checkout_submit') }}">
                {{ csrf_field() }}
                <div class="panel panel-primary">
                    <!-- Title Block Start -->
                    <div class="panel-heading">Check Out</div>
                            <!-- Title Block End -->
                        <div class="panel-body">

                            <div id="checkout-table" class="table">
                                <div class="thead">
                                    <div class="tr">
                                        <div class="td border-top-none">SKU/Serial</div>
                                        <div class="td border-top-none">Name</div>
                                        <div class="td border-top-none">Location</div>
                                        <div class="td border-top-none">Quantity Available</div>
                                        <div class="td border-top-none">Quantity Taken</div>
                                        <div class="td border-top-none border-right-none">Delete</div>
                                    </div>
                                </div>
                                <div class="tbody">

                                    @if($errors->any())
                                        @yield('checkout-errors')

                                    @else
                                        <!--Base Row Start-->
                                        <div id="item0" class="tr">
                                            <div class="td sku">
                                                <label class="sr-only" for="sku0">SKU</label>
                                                <input id="sku0" type="text" name="sku[]" class="form-control input-medium" placeholder="SKU/Serial" required autofocus>

                                                <p id="serial-text0" class="serial-text"></p>

                                                <label for="serial0" class="hidden" >Serial</label>
                                                <input id="serial0" type="hidden" name="serial[]" class="form-control input-medium" required autofocus>

                                            </div>
                                            <div class="td name"></div>
                                            <div class="td location"></div>
                                            <div class="td quantity-available">
                                                <input id="available0" type="hidden" name="available[]" value="">
                                            </div>
                                            <div class="td quantity-taken">
                                                    <label class="sr-only" for="quantity0">Quantity Taken</label>
                                                    <input id="quantity0" type="text" name="quantity[]" class="form-control input-small input-inline" placeholder="Quanitity" required>
                                            </div>
                                            <div class="td border-right-none">
                                                <button class="deletebut btn btn-primary" type="button" value = "0">
                                                    <span class="glyphicon glyphicon-remove"></span>
                                                </button>
                                            </div>
                                        </div>
                                        <!--Base Row End-->
                                    @endif

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

                        <div class="panel-footer">
                            <label for="project">Project</label>
                            <select id="project" class="form-control" name="project" required>
                                <option value="" disabled selected>Project</option>

                                @foreach(array_flatten($projects) as $project)
                                <option value="{{$project}}">{{$project}}</option>
                                @endforeach

                            </select>
                        </div>

                        <label for="items" class="hidden"></label>
                        <input id="items" type="hidden" value="{{json_encode($itemsSorted)}}" name="items">

                        <label for="serial" class="hidden"></label>
                        <input id="serial" type="hidden" value="{{json_encode($serialsSorted)}}" name="serials">

                </div>

                <div id="confirmation" class="col-md-8 col-md-offset-2 text-center">
                    <div class="btn-group btn-padded">
                        <button id = "submit" class="btn btn-primary" type="submit" value="submit">Submit</button>
                        <button id = "reset" class="btn btn-primary" type="reset" value="reset">Reset</button>
                    </div>
                </div>
            </form>

        </div>
    </div>

    @if($errors->any())
        <div class="row">
            <div class="col-md-4 col-md-offset-4">
                <div class="alert alert-danger alert-dismissible show" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    @if($errors->has('quantity.*'))
                        <p>{{$errors->first('quantity.*')}}</p>
                    @endif

                    @if($errors->has('sku.*'))
                        <p>{{$errors->first('sku.*')}}</p>
                    @endif
                </div>
            </div>
        </div>
    @endif

    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="alert alert-danger">
                <p class="error-message"></p>
            </div>
        </div>
    </div>

</div>


<script>
    let itemsSorted = {!!json_encode($itemsSorted)!!};
    let serialsSorted = {!! json_encode($serialsSorted) !!}
</script>

@endsection