@extends('layouts.app')

@push('head-scripts')
@endpush

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <section class="section dashboard">
        <h1>Dashboard</h1>

        <!-- Button to trigger the toasts -->
        <button type="button" class="btn btn-primary" id="myBtn">
            Toast!
        </button>

        <!-- First Toast -->
        <div class="toast-container 
                    position-absolute 
                    top-0 start-0">
            <div class="toast">
                <div class="toast-header">
                    <i class="bi bi-arrow-up-right-square-fill bi-lg">&nbsp; </i>
                    <strong class="me-auto">Titolo</strong>
                    <small>didascalia extra</small>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                    Position at Top left.
                </div>
            </div>
        </div>

        <!-- Second Toast -->
        <div class="toast-container
                    position-absolute 
                    top-0 start-50 
                    translate-middle-x">
            <div class="toast">
                <div class="toast-header">
                    <i class="bi bi-arrow-up-right-square-fill bi-lg">&nbsp; </i>
                    <strong class="me-auto">Titolo</strong>
                    <small>didascalia extra</small>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                    Position at Top Center.
                </div>
            </div>
        </div>

        <!-- Third Toast -->
        <div class="toast-container
                    position-absolute top-0 end-0">
            <div class="toast">
                <div class="toast-header">
                    <i class="bi bi-arrow-up-right-square-fill bi-lg">&nbsp; </i>
                    <strong class="me-auto">Titolo</strong>
                    <small>didascalia extra</small>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                    Position at Top Right.
                </div>
            </div>
        </div>

            <!-- NOTIFICHE IMPILATE -->
            <div class="toast-container position-fixed bottom-0 end-0 p-3">
                <div id="stack1" class="toast bottom-0 start-0" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="toast-header">
                        <i class="bi bi-arrow-up-right-square-fill bi-lg">&nbsp; </i>
                        <strong class="me-auto">Bootstrap</strong>
                        <small>11 mins ago</small>
                        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                    <div class="toast-body">
                        Hello, world! This is a toast message.
                    </div>
                </div>

                <div id="stack2" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="toast-header">
                        <i class="bi bi-arrow-up-right-square-fill bi-lg">&nbsp; </i>
                        <strong class="me-auto">Bootstrap</strong>
                        <small>11 mins ago</small>
                        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                    <div class="toast-body">
                        Hello, world! This is a toast message.
                    </div>
                </div>

                <div id="stack3" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="toast-header">
                        <i class="bi bi-arrow-up-right-square-fill bi-lg">&nbsp; </i>
                        <strong class="me-auto">Bootstrap</strong>
                        <small>11 mins ago</small>
                        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                    <div class="toast-body">
                        Hello, world! This is a toast message.
                    </div>
                </div>

            </div>
        
        <table id="myTable" data-toolbar="#toolbar" data-search="true" data-show-refresh="true"
            data-show-toggle="true" data-show-fullscreen="true" data-show-columns="true"
            data-show-columns-toggle-all="true" data-detail-view="true" data-show-export="true"
            data-click-to-select="true" data-detail-formatter="detailFormatter" data-minimum-count-columns="2"
            data-show-pagination-switch="true" data-pagination="true" data-id-field="id"
            data-page-list="[10, 25, 50, 100, all]" data-show-footer="true">
            <thead>
                <tr>
                    <th>Item ID</th>
                    <th data-width="400" data-editable="true">Item Name</th>
                    <th data-width="300" data-editable="true">Item Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Item 1</td>
                    <td>$1</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Item 2</td>
                    <td>$2</td>
                </tr>
            </tbody>
        </table>
    </section>
@endsection

@push('scripts')
    <script>
        // Inizializzo BS Table
        $(document).ready(function() {
            $('#myTable').bootstrapTable({
                // ... configurazione della tabella
            });
        });

        // Toast Trigger con parametro data-bs-target
        const toastTrigger = document.querySelectorAll('[data-bs-target]');
        toastTrigger.forEach(button => {
            button.addEventListener('click', () => {
                const toastElement = document.querySelector(button.dataset.bsTarget);
                const toast = new bootstrap.Toast(toastElement);
                toast.show();
            });
        });

        // Toast Trigger con jquery
        $(document).ready(function() {
                $('#myBtn').click(function() {
                    $('.toast').toast({
                        animation: false,
                        delay: 3000
                    });
                    $('.toast').toast('show');
                });
            });
    </script>
@endpush