@extends('layouts.vertical', ['subtitle' => 'Toasts'])

@section('content')

@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Toasts'])

<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    Basic Examples
                </h5>
                <p class="card-subtitle">
                    Toasts are as flexible as you need and have very little required markup. At a minimum, we require a
                    single element to contain your “toasted” content and strongly encourage a dismiss button.
                </p>
            </div>
            <div class="card-body">
                <div class="toast fade d-block opacity-100" role="alert" aria-live="assertive" aria-atomic="true"
                    data-bs-toggle="toast">
                    <div class="toast-header d-block">
                        <div class="float-end">
                            <small>11 mins ago</small>
                            <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast"
                                aria-label="Close"></button>
                        </div>
                        <div class="auth-logo">
                            <img class="logo-dark" src="/images/logo-dark.png" alt="logo-dark" height="18" />
                            <img class="logo-light" src="/images/logo-light.png" alt="logo-light" height="18" />
                        </div>
                    </div>
                    <div class="toast-body">
                        Hello, world! This is a toast message.
                    </div>
                </div>

            </div>
        </div>

    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    Live example
                </h5>
                <p class="card-subtitle">Click the button below to show a toast (positioned with our utilities in the
                    lower right corner) that has been hidden by default.</p>
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-primary" id="liveToastDefaultBtn">Show live toast</button>
                <div class="toast-container position-fixed bottom-0 end-0 p-3">
                    <div id="liveToastDefault" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                        <div class="toast-header">
                            <div class="auth-logo me-auto">
                                <img class="logo-dark" src="/images/logo-dark.png" alt="logo-dark" height="18" />
                                <img class="logo-light" src="/images/logo-light.png" alt="logo-light" height="18" />
                            </div>
                            <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>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    Default Buttons
                </h5>
                <p class="card-subtitle">
                    Toasts are as flexible as you need and have very little required markup. At a minimum, we require a
                    single element to contain your “toasted” content and strongly encourage a dismiss button.
                </p>
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
                <button type="button" class="btn btn-primary" id="liveToastBtn2">Show live toast</button>
                <div class="toast-container position-fixed end-0 top-0 p-3">
                    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                        <div class="toast-header">
                            <div class="auth-logo me-auto">
                                <img class="logo-dark" src="/images/logo-dark.png" alt="logo-dark" height="18" />
                                <img class="logo-light" src="/images/logo-light.png" alt="logo-light" height="18" />
                            </div>
                            <small class="text-muted">just now</small>
                            <button type="button" class="btn-close" data-bs-dismiss="toast"
                                aria-label="Close"></button>
                        </div>
                        <div class="toast-body">
                            See? Just like this.
                        </div>
                    </div>

                    <div id="liveToast2" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                        <div class="toast-header">
                            <div class="auth-logo me-auto">
                                <img class="logo-dark" src="/images/logo-dark.png" alt="logo-dark" height="18" />
                                <img class="logo-light" src="/images/logo-light.png" alt="logo-light"
                                    height="18" />
                            </div>
                            <small class="text-muted">2 seconds ago</small>
                            <button type="button" class="btn-close" data-bs-dismiss="toast"
                                aria-label="Close"></button>
                        </div>
                        <div class="toast-body">
                            Heads up, toasts will stack automatically
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    Custom Content
                </h5>
                <p class="card-subtitle">
                    Alternatively, you can also add additional controls and components to toasts.
                </p>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="toast fade show align-items-center mb-3" role="alert" aria-live="assertive"
                            aria-atomic="true">
                            <div class="d-flex">
                                <div class="toast-body">
                                    Hello, world! This is a toast message.
                                </div>
                                <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"
                                    aria-label="Close"></button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="toast fade show align-items-center text-bg-primary mb-3" role="alert"
                            aria-live="assertive" aria-atomic="true">
                            <div class="d-flex">
                                <div class="toast-body">
                                    Hello, world! This is a toast message.
                                </div>
                                <button type="button" class="btn-close btn-close-white me-2 m-auto"
                                    data-bs-dismiss="toast" aria-label="Close"></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="toast fade show mb-3 mb-md-0" role="alert" aria-live="assertive"
                            aria-atomic="true">
                            <div class="toast-body">
                                Hello, world! This is a toast message.
                                <div class="mt-2 pt-2 border-top">
                                    <button type="button" class="btn btn-primary btn-sm me-1">Take action</button>
                                    <button type="button" class="btn btn-secondary btn-sm"
                                        data-bs-dismiss="toast">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="toast fade show text-bg-primary" role="alert" aria-live="assertive"
                            aria-atomic="true">
                            <div class="toast-body">
                                Hello, world! This is a toast message.
                                <div class="mt-2 pt-2 border-top">
                                    <button type="button" class="btn btn-light btn-sm me-1">Take action</button>
                                    <button type="button" class="btn btn-secondary btn-sm"
                                        data-bs-dismiss="toast">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    Transcluent
                </h5>
                <p class="card-subtitle">
                    Toasts are slightly translucent, too, so they blend over whatever they might appear over.
                    For browsers that support the backdrop-filter CSS property, we’ll also attempt to blur the elements
                    under a toast.
                </p>
            </div>
            <div class="card-body">

                <div class="p-3 bg-light">
                    <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"
                        data-bs-toggle="toast">
                        <div class="toast-header d-block">
                            <div class="float-end">
                                <small>11 mins ago</small>
                                <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast"
                                    aria-label="Close"></button>
                            </div>
                            <div class="auth-logo">
                                <img class="logo-dark me-1" src="/images/logo-dark.png" alt="logo-dark"
                                    height="18" />
                                <img class="logo-light" src="/images/logo-light.png" alt="logo-light"
                                    height="18" />
                            </div>
                        </div>
                        <div class="toast-body">
                            Hello, world! This is a toast message.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    Placement
                </h5>
                <p class="card-subtitle">
                    Place toasts with custom CSS as you need them. The top right is often used for notifications,
                    as is the top middle. If you’re only ever going to show one toast at a time, put the positioning
                    styles
                    right on the <code>.toast.</code>
                </p>
            </div>
            <div class="card-body">
                <div aria-live="polite" aria-atomic="true" class=" bg-light position-relative"
                    style="min-height: 350px;">
                    <div class="toast-container position-absolute p-3" id="toastPlacement">
                        <div class="toast show mb-2">
                            <div class="toast-header d-block">
                                <div class="float-end">
                                    <small>11 mins ago</small>
                                    <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast"
                                        aria-label="Close"></button>
                                </div>
                                <div class="auth-logo">
                                    <img class="logo-dark me-1" src="/images/logo-dark.png" alt="logo-dark"
                                        height="18" />
                                    <img class="logo-light" src="/images/logo-light.png" alt="logo-light"
                                        height="18" />
                                </div>
                            </div>
                            <div class="toast-body">
                                Hello, world! This is a toast message.
                            </div>
                        </div>
                    </div>
                </div>

                <form>
                    <div class="mt-3">
                        <label for="selectToastPlacement" class="form-label">Toast placement</label>
                        <select class="form-select mt-2" data-choices id="selectToastPlacement">
                            <option value="" selected>Select a position...</option>
                            <option value="top-0 start-0">Top left (<code class="text-danger">.top-0 .start-0</code>)
                            </option>
                            <option value="top-0 start-50 translate-middle-x">Top center</option>
                            <option value="top-0 end-0">Top right</option>
                            <option value="top-50 start-0 translate-middle-y">Middle left</option>
                            <option value="top-50 start-50 translate-middle">Middle center</option>
                            <option value="top-50 end-0 translate-middle-y">Middle right</option>
                            <option value="bottom-0 start-0">Bottom left</option>
                            <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
                            <option value="bottom-0 end-0">Bottom right</option>
                        </select>
                    </div>
                </form>
            </div> <!-- end card body -->
        </div> <!-- end card -->
    </div> <!-- end col -->
</div> <!-- end row -->
@endsection

@section('scripts')
<script>
    // Default Example
    const toastDefaultTrigger = document.getElementById('liveToastDefaultBtn')
    const toastDefaultLiveExample = document.getElementById('liveToastDefault')
    if (toastDefaultTrigger) {
        toastDefaultTrigger.addEventListener('click', () => {
            const toast = new bootstrap.Toast(toastDefaultLiveExample)

            toast.show()
        })
    }

    // Stacking Example
    const toastTrigger = document.getElementById('liveToastBtn')
    const toastLiveExample = document.getElementById('liveToast')
    if (toastTrigger) {
        toastTrigger.addEventListener('click', () => {
            const toast = new bootstrap.Toast(toastLiveExample)

            toast.show()
        })
    }

    const toastTrigger2 = document.getElementById('liveToastBtn2')
    const toastLiveExample2 = document.getElementById('liveToast2')
    if (toastTrigger2) {
        toastTrigger2.addEventListener('click', () => {
            const toast = new bootstrap.Toast(toastLiveExample2)
            toast.show()
        })
    }
</script>
@endsection