@extends('layouts.layout')

@section('content')

    <div class="box" style="width:70%;margin:0px auto">
        <div class="box-header">
            <h3 class="box-title">Create new order</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">

            <form role="form" method="post" action="{{route('orders.store')}}">
                @csrf
                <div class="box-body">
                    <div class="form-group form-inline">
                        <table class="table table-hover table-bordered">
                            <tr>
                                <th><label for="order_no">PRO#</label></th>
                                <th><label for="date">Date</label></th>
                            </tr>
                            <tr>
                                <td>
                                    <input type="text" name="order_id" class="form-control" id="username" placeholder="Enter PRO#">
                                </td>
                                <td>
                                    <input type="text"  name="date" class="form-control date" id="date" placeholder="Enter date">
                                </td>
                            </tr>
                        </table>

                    </div>

                    <div class="callout callout-info text-center">Drivers</div>

                    @if(count($drivers)>0)
                        <div class="form-group form-inline">
                            <label for="">Select driver</label>
                            <select name="driver_id[]" id="driver_select" class="form-control" onchange="addDriver()" style="width: 300px ">
                            @foreach($drivers as $driver)
                                <option value="{{$driver->id}}">{{$driver->name}}</option>
                            @endforeach
                        </select>
                        <button onclick="addDriver()" type="button" class="btn btn-success"><i class="fa fa-plus"></i> Add driver</button>

                        </div>
                    @else
                        <p>
                            Driver database is empty!
                        </p>
                    @endif

                    <ul id="drivers">

                    </ul>


                </div>
                <!-- /.box-body -->

                <div class="box-footer">
                    <button type="submit" class="btn btn-success">Create</button>
                </div>
            </form>
        </div>
    </div>

@endsection

@section('footer')
    <script type="application/javascript" src="/js/orders.js"></script>
@endsection