@extends('layouts.app')
@section('content')
    <div>
        <div
            class="relative h-[60vh] w-full bg-cover bg-center text-white"
            style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{ asset('img/salle/hero.png') }}');"
        >
            <div class="flex items-center justify-center h-full text-center p-4">
                <div>
                    <h1 class="text-4xl font-semibold mb-2">Le règlement intérieur</h1>
                </div>
            </div>
        </div>
        <section class="section">
            <section class="section">
                <div class="container flex items-center justify-center">
                    <canvas id="the-canvas"></canvas>
                </div>
                <div class="container">
                    <div class="flex items-center justify-center">
                        <button id="prev" class="bg-transparent border-2 border-blue-600 text-blue-600 font-semibold py-2 px-4 rounded-md hover:bg-blue-600 hover:text-white">Précédent</button>
                        <button id="next" class="bg-transparent border-2 border-blue-600 text-blue-600 font-semibold py-2 px-4 rounded-md hover:bg-blue-600 hover:text-white ml-4">Suivant</button>
                    </div>
                    <br>
                    <div class="flex items-center justify-center">
                        <span class="content-center">Page: <span id="page_num">0</span> / <span id="page_count">0</span></span>
                    </div>

                </div>
            </section>
        </section>
    </div>
@endsection
@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js"></script>
    @vite('resources/js/rules.js')
@endpush