@extends('library.admin.layouts.admin_design')

@section('title')
    <title>Issue Book - School Library</title>
@endsection

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
            <section class="invoice printableArea">

                    <!-- title row -->
                    <div class="row">

                      <div class="col-12">
                        <div class="page-header">
                          <h3 class="d-inline"><span class="font-size-30">Book Details</span></h3>
                        </div>
                      </div>
                      <!-- /.col -->
                    </div>
                    <!-- info row -->
                    <div class="row invoice-info">
                            <div class="col-md-4 invoice-col">
                                    <address>
                                      <strong class="text-blue font-size-24">{{$book->title}}</strong><br>
                                      <strong class="d-inline font-size-16">Author: {{$book->author->name}}</strong><br>
                                      {{-- <label><strong class="d-inline">Student Id: </strong></label><br>
                                       --}}
                                       <br>
                                      <strong class="d-inline font-size-16">Description:</strong>
                                        <p style="font-size:13px!important;">
                                        {!! $book->description !!}
                                        </p>
                                    </address>
                                  </div>
                      <div class="col-md-4 invoice-col">
                      <img class="card-teacher" style="height:250px;" src="{{asset($book->image)}}" alt="Card image cap">
                      </div>

                      <div class="col-md-4">
                            <div class="row">

                                    <div class="col-xl-6 col-md-6 col-12">
                                          <div class="box box-body bg-success">
                                          <div class="flexbox">
                                            <span class="ion ion-ios-paper-outline text-white font-size-50"></span>
                                            <span class="font-size-40 font-weight-200">{{count($istatus)}}</span>
                                          </div>
                                          <div class="text-right">Total Available</div>
                                        </div>
                                    </div>

                                    <div class="col-xl-6 col-md-6 col-12">
                                            <div class="box box-body bg-primary" >
                                            <div class="flexbox">
                                              <span class="ion ion-ios-paper-outline text-white font-size-50"></span>
                                              <span class="font-size-40 font-weight-200">{{count($iissued)}}</span>
                                            </div>
                                            <div class="text-right">Total Issued</div>
                                          </div>
                                      </div>

                                      <div class="col-xl-6 col-md-6 col-12">
                                            <div class="box box-body bg-info">
                                            <div class="flexbox">
                                              <span class="ion ion-ios-paper-outline text-white font-size-50"></span>
                                              <span class="font-size-40 font-weight-200">{{count($idamaged)}}</span>
                                            </div>
                                            <div class="text-right">Total Damaged</div>
                                          </div>
                                      </div>
                                      <div class="col-xl-6 col-md-6 col-12">
                                            <div class="box box-body bg-danger">
                                            <div class="flexbox">
                                              <span class="ion ion-ios-paper-outline text-white font-size-50"></span>
                                              <span class="font-size-40 font-weight-200">{{count($ilost)}}</span>
                                            </div>
                                            <div class="text-right">Total Lost</div>
                                          </div>
                                      </div>
                                    <!-- /.col -->

                                    <!-- /.col -->
                                  </div>

                      </div>
                      <!-- /.col -->
                    <!-- /.col -->
                    </div>
                    <!-- /.row -->
                    <hr>
                    <h3>Book ISBN Details</h3>
                    <!-- Table row -->
                    <div class="row">
                      <div class="col-12 table-responsive">
                        <table class="table table-bordered">
                          <tbody>
                          <tr>
                            <th>#</th>
                            <th>Isbn</th>
                            <th>Status</th>
                            <th>Action</th>

                            {{-- <th class="text-right">Subtotal</th> --}}
                          </tr>
                          @foreach($isbn as $det)
                          <tr>
                            <td>{{$loop->index+1}}</td>
                            <td> {{$det->isbn}}</td>
                            <td style=@if($det->status == 'issued')"color:Blue;" @elseif($det->status == 'lost')"color:brown;" @elseif($det->status == 'damaged')"color:red;" @else "color:green;" @endif>
                               <strong>{{ucwords($det->status)}}</strong>
                            </td>
                              <td>

                                  <div class="dropdown">
                                      <button class="btn btn-light dropdown-toggle" style="color: black;" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                          Check Status
                                      </button>
                                      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="background-color: lightgrey;">

                                          @if($det->status == 'available' || $det->status == 'issued' )

                                          <a class="dropdown-item text-black" href="{{route('library.book.lost', $det->id)}}" style="color:red;" ><strong>Lost</strong></a>
                                          <a class="dropdown-item text-black" href="{{route('library.book.damaged', $det->id)}}" style="color:red;" ><strong>Damaged</strong></a>
                                          @endif

                                          @if($det->status == 'damaged')
                                          <a class="dropdown-item text-black"   href="{{route('library.book.lost', $det->id)}}" style="color:red;" ><strong>Lost</strong></a>
                                          @endif

                                          @if($det->status == 'lost')
                                          <a class="dropdown-item text-black" href="{{route('library.book.damaged', $det->id)}}"style="color:red;" ><strong>Damaged</strong></a>
                                          @endif


                                      </div>
                                  </div>


                              </td>
                              {{--<td>--}}

                              {{--</td>--}}


                          </tr>
                          @endforeach

                          </tbody>
                        </table>
                      </div>
                      <!-- /.col -->
                    </div>
                    <!-- /.row -->

              </section>

    </div>
@endsection