@extends("layouts.backofficelayout")
@section("content")

<nav aria-label="breadcrumb" class="mb-5">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Pedidos</a></li>
                    <li class="breadcrumb-item" aria-current="page"><a href="#">{{ $id }}</a></li>
                </ol>
            </nav>
<form method="POST" action="/requests/{{$id}}/review/accept" id ="content" class="container">
    @method('PUT')
    @csrf
    <section class="row justify-content-center">
            <div class="row text-left col-md-10">
                <div class="col-md-12 d-flex justify-content-center">
                        <label class="col-md-6" for="status">Status</label>
                        <input class="col-md-6" id="status" value="{{ $status }}" disabled>
                </div>
                <hr style="width:100%">
                <div class="col-md-12 d-flex justify-content-center">
                        <label class="col-md-6" for="date">Data do Pedido de Reserva</label>
                        <input class="col-md-6" id="date" value="18:46 - 24/09/2019" disabled>
                </div>
                <hr style="width:100%">
                <div class="col-md-12 d-flex justify-content-center">
                        <label class="col-md-6" for="endDate">Date do Fim da Reserva</label>
                        <input class="col-md-6" id="endDate" value="10/11/2019" disabled>
                </div>
                <hr style="width:100%">
                <div class="col-md-12 d-flex justify-content-center">
                        <label class="col-md-6" for="email">Email do Professor que Aprovou</label>
                        <input class="col-md-6" id="email" value="asousa@fe.up.pt" disabled>
                </div>
                <hr style="width:100%">
                <div class="col-md-12 d-flex justify-content-center">
                        <label class="col-md-6" for="costCenter">Centro de Custos</label>
                        <select id="costCenter" class="col-md-6" disabled>
                            <option>UC - Eletrónica 2019/2020</option>
                        </select>
                </div>
            </div>

    </section>
    <section>
            <hr>
            <div class="row text-left py-3">
                <div class="col-md-12 d-flex justify-content-center mb-4">
                        <label class="col-md-2" for="motive">Motivo para Reservar:</label>
                        <textarea class="col-md-10" id="motive" disabled>
                            É necessário para realizar experiências na unidade curricular Eletrónica no ano letivo 2019/2020
                        </textarea>
                </div>
                <div class="col-md-12 d-flex justify-content-center" >
                        <label class="col-md-2" for="observations">Observações:</label>
                        <textarea class="col-md-10" id="observations" name="observations"></textarea>
                </div>

            </div>

    </section>
    <section>
            <hr>
            <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <a class="nav-item nav-link active" id="nav-items-tab" data-toggle="tab" href="#nav-items">Itens</a>
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-items">
                    <table class="table" id="itemsTable">
                        <thead>
                            <tr>
                                <th scope="col" class="text-center"></th>
                                <th scope="col" class="text-center">Item</th>
                                <th scope="col" class="text-center">Reference</th>
                                <th scope="col" class="text-center">Quantity</th>
                                <th scope="col" class="text-center">Ready</th>
                                <th scope="col" class="text-center">Picked Up</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-center align-middle">
                                    <img class="image-fluid" src="https://www.pcdiga.com/media/catalog/product/cache/33ba37c1fda6d70c703e88ff79ea1021/1/_/1_199_6.jpg" height="42">
                                </td>
                                <td class="text-center align-middle"> Raspberry Pi 4 modelo B </td>
                                <td class="text-center align-middle"> 765756931175 </td>
                                <td class="text-center align-middle"> 5 </td>
                                <td class="text-center align-middle"> 0/5 </td>
                                <td class="text-center align-middle"> 0 </td>
                            </tr>
                            <tr>
                                <td class="text-center align-middle">
                                    <img class="image-fluid" src="https://www.pcdiga.com/media/catalog/product/cache/33ba37c1fda6d70c703e88ff79ea1021/p/r/product-p008475-4585_14.jpg" height="42">
                                </td>
                                <td class="text-center align-middle"> Cabo USB 2.0 </td>
                                <td class="text-center align-middle"> 4015867107829 </td>
                                <td class="text-center align-middle"> 3 </td>
                                <td class="text-center align-middle"> 0/3 </td>
                                <td class="text-center align-middle"> 0 </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-end">
                        <li class="page-item"><a class="page-link" data-toggle="tab" href="#nav-items">Previous</a></li>
                        <li class="page-item"><a class="page-link" data-toggle="tab" href="#nav-items">1</a></li>
                        <li class="page-item"><a class="page-link" data-toggle="tab" href="#nav-items">2</a></li>
                        <li class="page-item"><a class="page-link" data-toggle="tab" href="#nav-items">3</a></li>
                        <li class="page-item"><a class="page-link" data-toggle="tab" href="#nav-items">Next</a></li>
                    </ul>
                </nav>
                <label class="col-md-12" for="otherItems">Itens não Especificados:</label>
                <textarea class="col-md-12" id="otherItems" rows="3" disabled>
                    SAMXON GT 1000U/25V
                    Quantidade: 10
                    https://octopart.com/gt+1000u%2F25v-samxon-30812753
                </textarea>
            </div>
    </section>
    <section>
            <hr>
            <div class="row text-right justify-content-end py-3">
                <button type="submit" class="d-flex btn btn-danger mr-4" formaction="/requests/{{$id}}/review/reject">Rejeitar</button>
                <button type="submit" class="d-flex btn btn-success mr-4">Aceitar</button>
            </div>
    </section>
</form>

@endsection