@extends('admin.template')

@section('sidebar')
    <aside id="sidebar" class="sidebar">

        <ul class="sidebar-nav" id="sidebar-nav">

            <li class="nav-item">
                <a class="nav-link collapsed" href="{{ url('admin') }}">
                    <i class="bi bi-grid"></i>
                    <span>Tableau de Bord</span>
                </a>
            </li><!-- End Dashboard Nav -->

            <li class="nav-item">
                <a class="nav-link" data-bs-target="#components-nav" data-bs-toggle="collapse" href="#">
                    <i class="bi bi-menu-button-wide"></i><span>Gestion des livres </span><i
                        class="bi bi-chevron-down ms-auto"></i>
                </a>
                <ul id="components-nav" class="nav-content collapse show" data-bs-parent="#sidebar-nav">
                    <li>
                        <a href="{{ url('admin/consulter_book') }}" class="active">
                            <i class="bi bi-circle"></i><span>Livres disponibles </span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ url('admin/add') }}">
                            <i class="bi bi-circle"></i><span>Ajouter un livre</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ url('admin/supp') }}">
                            <i class="bi bi-circle"></i><span>Livres supprimés</span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ url('admin/attente') }}">
                            <i class="bi bi-circle"></i><span>Livres en attente </span>
                        </a>
                    </li>


                </ul>


            <li class="nav-item">
                <a class="nav-link collapsed" data-bs-target="#forms-nav" data-bs-toggle="collapse" href="#">
                    <i class="bi bi-journal-text"></i><span>Documentations </span><i
                        class="bi bi-chevron-down ms-auto"></i>
                </a>
                <ul id="forms-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
                    <li>
                        <a href="{{ url('admin/add_document') }}">
                            <i class="bi bi-circle"></i><span>Ajouter un document </span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ url('admin/supp_document') }}">
                            <i class="bi bi-circle"></i><span>Documents supprimés  </span>
                        </a>
                    </li>
                    <li>
                        <a href="{{ url('admin/consulter') }}">
                            <i class="bi bi-circle"></i><span>Documents disponibles </span>
                        </a>
                    </li>
                </ul>
            </li><!-- End Forms Nav -->
            <li class="nav-heading">Pages</li>

            <li class="nav-item">
                <a class="nav-link collapsed" href="{{ route('profil',  0) }}">
                    <i class="bi bi-person"></i>
                    <span>Profil</span>
                </a>
            </li><!-- End Profile Page Nav -->

            <li class="nav-item">
                <a class="nav-link collapsed" href="{{ url('admin/pages-faq') }}">
                    <i class="bi bi-question-circle"></i>
                    <span>Aide</span>
                </a>
            </li><!-- End F.A.Q Page Nav -->


        </ul>
    </aside>
@endsection


@section('main')
    <main id="main" class="main">

        <div class="pagetitle">
            <h1>Livres disponibles</h1>
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('admin') }}">Accueil</a></li>
                    <li class="breadcrumb-item">Gestion de livre</li>
                    <li class="breadcrumb-item active">Livres disponibles</li>
                </ol>
            </nav>
        </div><!-- End Page Title -->

        <section class="section">
            <div class="row">
                <div class="col-12">
                    <div class="card recent-sales overflow-auto">
                      <div class="card-body">
                        <h5 class="card-title">Livres disponibles</h5>

                        <table class="table table-borderless datatable">
                          <thead>
                            <tr>
                              <th scope="col" class="text-center">ISBN</th>
                              <th scope="col" class="text-center">Titre</th>
                              <th scope="col" class="text-center">Auteur</th>
                              <th scope="col" class="text-center">Etat</th>
                              <th scope="col" class="text-center">Action</th>
                            </tr>
                          </thead>
                          <tbody>
                            @foreach ($books as $book )
                            <tr>
                                <th class="text-center">{{$book->ISBN}}</th>
                                <td class="text-center"><a href="/books/read/{{$book->id}}">{{$book->titre}}</a></td>
                                <td class="text-center">{{$book->auteur}}</td>
                                <td class="text-center" >
                                    @if ($book->etat == 1)
                                        <span class="text-success">Disponible</span>
                                    @else
                                    <span class="text-danger">Non disponible</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <a href="{{route("edit.book",$book->id)}}" class="m-2"><button class="btn text-white" style=" background-color:#3eaeb5" ><i class="bi bi-pencil"></i></button></a>
                                    <form id="form1" method="post" class="d-inline"
                                        onsubmit="return supprimer(this);">
                                        @csrf
                                        <input type="text" id="isbn" name="isbn"
                                            value="{{ $book['ISBN'] }}" style="display: none;">
                                        <input type="text" id="titre" name="titre"
                                            value="{{ $book['titre'] . '-' . $book['auteur'] }}"
                                            style="display: none;">
                                        <input type="text" id="vers" name="vers"
                                            value="{{ 'version ' . $book['version'] . '- ISBN ' . $book['ISBN'] }}"
                                            style="display: none;">
                                            
                                            <button class="btn btn-danger" type="submit"><i class="bi bi-trash"></i></button>
                                    </form>
                                </td>
                              </tr>
                            @endforeach

                          </tbody>
                        </table>

                        <!-- Fenetre modale 1-->

                        <div class="modal fade" id="confModal1" tabindex="-1" role="dialog" aria-
                            labelledby="confModalLabel1" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 id="confModalLabel1">Souhaitez-vous vraiment ajouter ce livre à la
                                            corbeille ?</h5>
                                        <button type="button" class="close" data-bs-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-titre1"></a> </h4>
                                            </div>

                                            <div class="card-body">
                                                <small class="text-primary" id="modal-version1">
                                                </small>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default"
                                            data-bs-dismiss="modal">Annuler</button>
                                        <form id="formM" action="" method="post">
                                            @method('DELETE')
                                            @csrf
                                            <button type="submit" class="btn btn-danger">Supprimer</button>
                                        </form>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Fin fenetre modale 1-->
                      </div>

                    </div>
                </div>
        </section>
        @if (session()->has('success'))
        <script src="/js/jquery-3.2.1.min.js"></script>
        <a type="button" id="lien2" data-bs-toggle="modal" data-bs-target="#confModal2" style="display: none;">appui</a>
        <script type="text/javascript">
            $(window).on('load',function(){
            $('#confModal2').modal('show');
            });
        </script>
        <!-- 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 class="modal-title text-success" id="confModalLabel2">{{session('success')}}</h5>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-
                            label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" data-bs-dismiss="modal">D'accord</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Fin fenetre modale 2-->
        @elseif (session()->has('error'))
        <script src="/js/jquery-3.2.1.min.js"></script>
        <a type="button" id="lien2" data-bs-toggle="modal" data-bs-target="#confModal2" style="display: none;">appui</a>
        <script type="text/javascript">
            $(window).on('load',function(){
            $('#confModal2').modal('show');
            });
        </script>
        <!-- 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 class="modal-title text-danger" id="confModalLabel2">{{session('error')}}</h5>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-
                            label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">D'accord</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Fin fenetre modale 2-->
        @endif
    </main>
@endsection