@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="container">
<div class="row">
<div class="container col-md-12">
        <h4 >Order Items for Touwsberg</h4>
<div class="row">
        <div class="col-md-6">
                @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>Budget</th>
                    <th>&nbsp;</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" id="search" value=""/>&nbsp;&nbsp;<a href="#" id="seachbutton"><i class="fas fa-search"></i></a>
                <table class="table-striped result" width="100%">
                <tr>
                    <th>Item Name</th>
                    <th>Description</th>
                    <th>&nbsp;</th>
                </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>
        <div class="col-md-6 "  style="border-left: 1px solid blue;">
        <form method="post">
        <h5 >Order Cart</h5>
            <table>
                <tr><td>Add Items to order from left</td></tr>
            </table><br/>
            <a href="/Procurement/new" class="btn btn-primary">Complete Order</a>

        </form>
        </div>
    </div>
</div>
    <div class="row">
    </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>
        $("#seachbutton").on('click',function(e){
            e.preventDefault();
            $('.items_found').remove();
            var search = $("#search").val();
            if(search == ""){
                alert("Enter name (or part of name) of item before searching.");
            } else {
                $.get( "/Procurement/new/search?search="+search, function( data ) {
                  $(".result").append( data );
                });
            }
        });
    </script>
@endsection