@extends('layouts.app')
@section('style')
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css"  rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<style>

    body{
        font-weight: 100;
        font-family: 'Raleway', sans-serif;
        background: url('/images/background0.png');
        background-position: center;
        background-size: cover;
        background-repeat: 0;
        color:black;
    }
    .fc table{
        background-color: rgba(200,200,200,0.1);
    }
    .fc-button{
        color: #000;
        background-color: #cea15d;
        border-color: #cea15d /*set the color you want here*/;
    }

    .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
        color: #495057;
        background-color: rgba(20, 97, 127, 0.9);
        border-color: rgba(20, 97, 127, 0.9);
        border-top-color: rgba(20, 97, 127, 0.9);
        border-right-color:rgba(20, 97, 127, 0.9);
        border-bottom-color: rgb(245, 248, 250);
        border-left-color: rgba(20, 97, 127, 0.9);
    }
</style>
@endsection
@section('content')
<div class="row">
    <div class="container">
        <div class="col-md-5">
            <h4>New Order - Touwsberg</h4>
            <form method="post">
                @csrf
                <input type="hidden" name="hub_id" value="{{Auth::user()->hub_id}}">
                @if(Auth::user()->hasRole('Discipline Leader'))
                
                @else
                    <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                @endif
            <nav>
              <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Budget Items</a>
                <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Out of budget items</a>
                <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">New Item Request</a>
              </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
              <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
           
               <h5></h5>
               <table class="table-striped" width="100%">
                <tr>
                    <th>Item Name</th>
                    <th>Quantity on budget</th>
                    <th>Order</th>
                </tr>
                @forelse($items as $item)
                <tr>
                    <td>{{$item->stock_item->item}}</td>
                    <td>{{$item->budget}}</td>
                    <td><button style="btn btn-default btn-small">Add</button></td>
                </tr>
                @empty
                @endforelse
                </table><br/><br/>
              </div>
              <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                    <h5></h5>
                <input type="search" name="search" value=""/>&nbsp;&nbsp;<i class="fas fa-search"></i>
                <table class="table-striped" width="100%">
                <tr>
                    <th>Item Name</th>
                    <th>Details</th>
                    <th>Order Qty</th>
                </tr>
                <tr>
                    <td colspan="3">Request new items on form below</td>
                </tr>
                </table><br/><br/>
              </div>
              <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                    <h5></h5>
            <table class="table-striped" width="100%">
                <tr>
                    <th>Item Name</th>
                    <td><input name="other[]" style="width:100%;"></td>
                </tr>
                <tr>
                    <th>Description</th>
                    <td><input name="description[]" style="width:100%;"/></td>
                </tr>
                <tr>
                    <th>Qty</th>
                    <td><input name="item[]" type="number" value="0" min="0" max="999"  style="width:100%;"/></td>
                </tr>
                <tr>
                    <th>Motivation</th>
                    <td><textarea  style="width:100%;"></textarea></td>
                </tr>
                <tr>
                    <th colspan=2><a href="" class="" style="float:right;color:brown;font-weight: bold;">Add</a></th>
                </tr>
                </table><br/><br/>
              </div>
            </div>
            </div>
            </form>
        </div>

        <div class="col-md-6" style="margin-bottom:20px;">
            Items selected appear here
        </div>
            <a href="/Procurement/new" class="btn btn-primary">Place Order</a>
        </div>
</div>
        
@endsection

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
    <script>


    </script>
@endsection