<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <link href="https://fonts.gstatic.com" rel="preconnect">
  <link
    href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
    rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="/assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="/assets/vendor/quill/quill.snow.css" rel="stylesheet">
  <link href="/assets/vendor/quill/quill.bubble.css" rel="stylesheet">
  <link href="/assets/vendor/remixicon/remixicon.css" rel="stylesheet">
  <link href="/assets/vendor/simple-datatables/style.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="/assets/css/style.css" rel="stylesheet">

  <!-- Required meta tags -->
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="EPAC-GIT3-2021-2022">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Mes livres | Bookcase</title>
  <link rel="shortcut icon" href="/images/favicon.png" type="image/x-icon">
  <!-- Goole Font -->
  <link href="https://fonts.googleapis.com/css?family=Rubik:400,500,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="/css/assets/bootstrap.min.css">
  <!-- Font awsome CSS -->
  <link rel="stylesheet" href="/css/assets/font-awesome.min.css">
  <link rel="stylesheet" href="/css/assets/flaticon.css">
  <link rel="stylesheet" href="/css/assets/magnific-popup.css">
  <!-- owl carousel -->
  <link rel="stylesheet" href="/css/assets/owl.carousel.css">
  <link rel="stylesheet" href="/css/assets/owl.theme.css">
  <link rel="stylesheet" href="/css/assets/animate.css">
  <!-- Slick Carousel -->
  <link rel="stylesheet" href="/css/assets/slick.css">

  <!-- Mean Menu-->
  <link rel="stylesheet" href="/css/assets/meanmenu.css">
  <!-- main style-->
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/responsive.css">
  <link rel="stylesheet" href="/css/demo.css">
  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->
  <style>
    .logout {
      width: 15px;
      height: 15px;
    }

    .no_book {
      color: rgba(255, 50, 50, 0.6);
      text-align: center;
      width: 80%;
      font-size: 2.4em;
      margin-bottom: 20%;
      margin-top: 15%;
    }
  </style>
  <script src="/js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript">
    function rendre(champ) {
      var id = champ.iden.value
      var titre = champ.titre.value
      var vers = champ.vers.value
      console.log(titre)
      $("#modal-titre2").html(titre);
      $("#modal-version2").html(vers);
      $('#confModal2').modal('show');
      document.getElementById('lien2').href = "{{ url('/') }}/books/retrait_book_emprunt/" + id;
      return false;
    }
  </script>
</head>

<body>
  <header class="header_3">
    <!-- Preloader -->
    <div id="preloader"></div>
    <div class="edu_nav">
      <div class="container">
        <nav class="navbar navbar-expand-md navbar-light bg-faded">
          <a class="navbar-brand" href={{ url('/') }}><img src="/images/logo.png" alt="logo"
              height="45px"></a>
          <div class="collapse navbar-collapse main-menu" id="navbarSupportedContent">
            <ul class="navbar-nav nav lavalamp ml-auto menu">
              <li class="nav-item"><a href={{ url('/') }} class="nav-link">Accueil</a>
              </li>
              <li class="nav-item"><a href={{ url('user/books') }} class="nav-link active">Mes
                  livres</a>
              </li>
              <li class="nav-item"><a href={{ url('user/docs') }} class="nav-link">Ma
                  documentation </a>
              </li>
              <li class="nav-item"><a href={{ url('user/upload') }} class="nav-link">Téléverser</a>
              </li>
              <li class="
                                    nav-item"><a href={{ url('/about') }} class="nav-link">À
                  propos</a>
              </li>
              <li class="nav-item"><a href={{ url('/contact') }} class="nav-link">Contact</a>
              </li>
              <li class="nav-item"><a href="#" class="search_btn nav-link"><img class="logout d-none d-lg-block"
                    src="/images/search.png" alt=""><span class="d-lg-none"> Rechercher</span></a>
                <div id="search">
                  <button type="button" class="close">×</button>
                  <form method="POST" action="{{ route('search') }}">
                    @csrf()
                    <input type="hidden" name="hidden" value="0">
                    <input type="search" value="" placeholder="Cherchez ici...." required name="recherche" />
                  </form>
                </div>
              </li>
              <li class="nav-item">
                <a href="{{ route('logout') }}" class="nav-link"><img class="logout d-none d-lg-block"
                    src="/images/logout.png" alt=""><span class="d-lg-none"> Déconnexion</span></a>
              </li>
            </ul>
          </div>
        </nav><!-- END NAVBAR -->
      </div>
    </div>
    <hr>
  </header> <!-- End header -->
  <section class="container mt-5 mt-lg-0">
    <div class="pagetitle mb-3">
      @if (count($livres))
        <h6>Vous disposez de {{ count($livres) }} livre(s) dans votre casier.</h6>
      @endif
    </div>
    <section class="section dashboard container">
      <div class="row">
        <div class="row justify-content-center">
          @if (!count($livres))
            <p class="no_book">Vous ne disposez actuellement d'aucun livre.</p>
          @else
            @foreach ($livres as $livre)
              <div class="col-10">
                <div class="card">
                  <div class="card-header">
                    <h4> <a href="{{ route('read.book', $livre['id']) }}">{{ $livre['titre'] }}
                        -
                        {{ $livre['auteur'] }}</a> </h4>
                  </div>
                  <div class="card-body">
                    <div class="row">
                      <div class="col-lg-9">
                        <p> {{ substr($livre['description'], 0, 200) }}... </p>
                        <p class="text-success d-none d-lg-block">
                          <strong>Très utile en :</strong>
                          @php
                            $i = 0;
                            $book_disc = \App\Models\Book_Discipline::all();
                            $disciplines = \App\Models\Discipline::all();
                          @endphp
                          @foreach ($book_disc as $b_d)
                            @if ($b_d['book_id'] == $livre['id'])
                              @foreach ($disciplines as $discipline)
                                @if ($discipline['id'] == $b_d['discipline_id'])
                                  @if ($i == 0)
                                    {{ $discipline['nameDiscipline'] }}
                                    @php
                                      $i = 1;
                                    @endphp
                                  @else
                                    , {{ $discipline['nameDiscipline'] }}
                                  @endif
                                @endif
                              @endforeach
                            @endif
                          @endforeach
                          .
                        </p>
                      </div>
                      <div class="col-lg-3">
                        <form id="form2" method="post" onsubmit="return rendre(this);">
                          <input type="text" id="iden" name="iden" value="{{ $livre['id'] }}"
                            style="display: none;">
                          <input type="text" id="titre" name="titre"
                            value="{{ $livre['titre'] . '-' . $livre['auteur'] }}" style="display: none;">
                          <input type="text" id="vers" name="vers"
                            value="{{ 'version ' . $livre['version'] . '- ISBN ' . $livre['ISBN'] }}"
                            style="display: none;">
                          <button class="btn btn-primary m-2" type="submit" name="">Retirer de mes
                            livres</button>
                        </form>
                      </div>
                    </div>
                    <small class="text-primary">
                      @if ($livre['edition'])
                        Edition : {{ $livre['edition'] }} -
                      @endif
                      ISBN : {{ $livre['ISBN'] }}
                    </small>

                  </div>
                </div>
                <!-- Fenetre modale 2-->

                <div class="modal fade" id="confModal2" tabindex="-1" role="dialog" aria-
                  labelledby="confModalLabel2" aria-hidden="true">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 id="confModalLabel2">Souhaitez-vous vraiment retirer ce livre de
                          vos
                          livres ?</h5>

                        <button type="button" class="close" data-dismiss="modal" aria- label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <div class="card">
                          <div class="card-header">
                            <h4> <a href="#" id="modal-titre2"></a> </h4>
                          </div>

                          <div class="card-body">
                            <small class="text-primary" id="modal-version2">
                            </small>
                          </div>
                        </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                        <button type="button" class="btn btn-primary"><a class="btn btn-primary col-10 text-white"
                            id="lien2" href="#">Retirer</a></button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Fin fenetre modale 2-->
              </div>
            @endforeach
          @endif
        </div>
      </div>
    </section>
  </section>
  <!-- Footer -->
  <footer class="footer_3">
    <div class="container">
      <div class="footer_top">
        <div class="row">
          <div class="col-12 col-md-6 col-lg-6">
            <div class="footer_single_col footer_intro">
              <img src="/images/logo2.png" alt="" class="f_logo">
              <p>Avec nos livres, tout le savoir est à votre portée...</p>
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-6">
            <div class="footer_single_col contact">
              <h3>Contactez Nous</h3>
              <p>Besoin de nous contacter ?</p>
              <div class="contact_info">
               
                <span class="email"><a href="mailto:contact@sigan.bj">contact@sigan.bj</a></span>
              </div>
              <ul class="social_items d-flex list-unstyled">
                <li><a href="#"><i class="fab fa-facebook-f fb-icon"></i></a></li>
                <li><a href="#"><i class="fab fa-twitter twitt-icon"></i></a></li>
                <li><a href="#"><i class="fab fa-linkedin-in link-icon"></i></a></li>
                <li><a href="#"><i class="fab fa-instagram ins-icon"></i></a></li>
              </ul>
            </div>
          </div>
          <div class="col-12 col-md-12 col-lg-12">
            <div class="copyright">
              <a>© <?= now()->format('Y') ?> SIGAN - Tous droits réservés.</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer><!-- End Footer -->

  <section id="scroll-top" class="scroll-top">
    <h2 class="disabled">Scroll to top</h2>
    <div class="to-top pos-rtive">
      <a href="#"><i class="flaticon-right-arrow"></i></a>
    </div>
  </section>
  <!-- footer section ends -->

  <!-- JavaScript -->
  <script src="/js/jquery-3.2.1.min.js"></script>
  <script src="/js/popper.min.js"></script>
  <script src="/js/bootstrap.min.js"></script>
  <script src="/js/jquery.magnific-popup.min.js"></script>
  <script src="/js/owl.carousel.min.js"></script>
  <script src="/js/slick.min.js"></script>
  <script src="/js/jquery.meanmenu.min.js"></script>
  <script src="/js/wow.min.js"></script>
  <!-- Counter Script -->
  <script src="/js/waypoints.min.js"></script>
  <script src="/js/jquery.counterup.min.js"></script>
  <script src="/js/custom.js"></script>
</body>

</html>
