{{-- @props(['style' => session('flash.bannerStyle', 'success'), 'message' => session('flash.banner')])

<div x-data="{{ json_encode(['show' => true, 'style' => $style, 'message' => $message]) }}"
    x-init="'{{ $style }}', () => { clearTimeout(timeout); show = true; timeout = setTimeout(() => { show = false }, 5000); }"
    class="my-2 text-3xl text-gray-100 rounded-md dark:text-gray-100"
    :class="{
    'border border-green-800 bg-green-500': style == 'success',
    'border border-red-800 bg-red-500': style == 'danger',
    'border border-orange-800 bg-orange-500': style == 'warning',
    'border border-sky-800 bg-sky-500': style == 'info',
    'border border-gray-800 bg-gray-500': style != 'info' && style != 'success' && style != 'danger' && style != 'warning'}" style="display: none;" x-show="show && message"
    x-on:banner-message.window="
                style = event.detail.style;
                message = event.detail.message;
                show = true;
            ">
    <div class="max-w-screen-xl p-2 mx-auto">
        <div class="flex flex-wrap items-center justify-between ">
            <div class="flex items-center flex-1 w-0 min-w-0 ">
                <span class="flex p-1 rounded-full" :class="{
                    'bg-green-800': style == 'success',
                    'bg-red-800': style == 'danger',
                    'bg-orange-800': style == 'warning',
                    'bg-sky-800': style == 'info',
                    'bg-gray-800': style != 'info' && style != 'success' && style != 'danger' && style != 'warning' }">
                    <svg x-show="style == 'success'" xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 "
                        viewBox="0 0 512 512">
                        <path
                            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" />
                    </svg>
                    <svg x-show="style == 'warning'" class="w-8 h-8" viewBox="0 0 512 512"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" />
                    </svg>
                    <svg x-show="style == 'danger'" xmlns="http://www.w3.org/2000/svg" class="w-8 h-8"
                        viewBox="0 0 512 512">
                        <path
                            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" />
                    </svg>
                    <svg x-show="style == 'info'" class="w-8 h-8" viewBox="0 0 512 512"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" />
                    </svg>
                    <svg x-show="style != 'info' && style != 'success' && style != 'warning'  && style != 'danger'"
                        xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" viewBox="0 0 512 512">
                        <path
                            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" />
                    </svg>
                </span>
                <p class="text-lg font-semibold leading-loose text-gray-900 truncate ms-3" x-text="message"></p>
            </div>

            <div class="shrink-0 sm:pe-3 ">
                <button type="button" class="flex p-1 transition rounded-md -me-1 focus:outline-none sm:-me-2" :class="{
                        'hover:bg-green-800 bg-green-700 focus:bg-green-600': style == 'success',
                        'hover:bg-red-800 bg-red-700 focus:bg-red-600': style == 'danger',
                        'hover:bg-orange-800 bg-orange-700 focus:bg-orange-600': style == 'warning',
                        'hover:bg-sky-800 bg-sky-700 focus:bg-sky-600': style == 'info',

                        'hover:bg-gray-800 bg-gray-700 focus:bg-gray-600': style != 'info' && style != 'success' && style != 'warning' && style != 'danger'

                        }" aria-label="Dismiss" x-on:click="show = false">
                    <svg class="w-6 h-6 font-semibold text-gray-900 " xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>
--}}

@props(['style' => session('flash.bannerStyle', 'success'), 'message' => session('flash.banner')])

<div x-data="{{ json_encode(['show' => true, 'style' => $style, 'message' => $message]) }}"
    class="my-2 text-5xl text-gray-100 rounded-sm dark:text-gray-100"
    :class="{
        '{{--border border-green-800--}} bg-green-600 ': style == 'success',
        '{{--border border-red-800--}} bg-red-600': style == 'danger',
        '{{--border border-amber-800--}} bg-orange-600': style == 'warning',
        '{{--border border-sky-800--}} bg-sky-600': style == 'info',

        '{{--border border-gray-800--}} bg-gray-600': style != 'success' && style != 'danger' && style != 'info' && style != 'warning'}" style="display: none;" x-show="show && message"
    x-on:banner-message.window="
                style = event.detail.style;
                message = event.detail.message;
                show = true;
            ">

    <div class="max-w-screen-xl p-2 mx-auto">
        <div class="flex flex-wrap items-center justify-between ">
            <div class="flex items-center flex-1 w-0 min-w-0 ">
                <span class="flex p-1 rounded-full"
                    :class="{
                            'bg-green-800 dark:bg-green-800 p-1': style == 'success',
                            'bg-red-800 dark:bg-red-800 p-1': style == 'danger',
                            'bg-orange-800 dark:bg-orange-800 p-1': style == 'warning',
                            'bg-sky-800 dark:bg-sky-800 p-1': style == 'info',
                            'bg-gray-800 dark:bg-gray-800 p-1': style != 'info' && style != 'success' && style != 'danger' && style != 'warning' }">

                    {{-- <svg x-show="style == 'success'" xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 "
                        viewBox="0 0 512 512">
                        <path
                            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" />
                    </svg> --}}

                    {{--
                    <svg x-show="style == 'warning'" class="w-8 h-8" viewBox="0 0 512 512"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" />
                    </svg> --}}

                    <x-fas-circle-check class="w-8 h-8 text-gray-950" x-show="style == 'success'" />
                    <x-fas-circle-exclamation class="w-8 h-8 text-gray-950" x-show="style == 'warning'" />
                    <x-fas-circle-xmark class="w-8 h-8 text-gray-950" x-show="style == 'danger'" />

                    {{-- <svg x-show="style == 'danger'" xmlns="http://www.w3.org/2000/svg" class="w-8 h-8"
                        viewBox="0 0 512 512">
                        <path
                            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" />
                    </svg> --}}


                    <x-fas-circle-question class="w-8 h-8 text-gray-950" x-show="style == 'info'" />

                    {{-- <svg x-show="style == 'info'" class="w-8 h-8" viewBox="0 0 512 512"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" />
                    </svg> --}}

                    <svg x-show="style != 'info' && style != 'success' && style != 'warning'  && style != 'danger'"
                        xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" viewBox="0 0 512 512">
                        <path
                            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" />
                    </svg>
                </span>

                <p class="text-lg font-semibold leading-loose text-gray-900 truncate ms-3" x-text="message"></p>

            </div>

            <div class="shrink-0 sm:pe-3 ">
                <button type="button" class="flex p-1 transition rounded-sm -me-1 focus:outline-none sm:-me-2" :class="{
                'hover:bg-green-800 bg-green-700 focus:bg-green-600': style == 'success',
                'hover:bg-red-800 bg-red-700 focus:bg-red-600': style == 'danger',
                'hover:bg-amber-800 bg-amber-700 focus:bg-amber-600': style == 'warning',
                'hover:bg-sky-800 bg-sky-700 focus:bg-sky-600': style == 'info',

                'hover:bg-gray-800 bg-gray-700 focus:bg-gray-600': style != 'info' && style != 'success' && style != 'warning' && style != 'danger'

                }" aria-label="Dismiss" x-on:click="show = false">

                    <svg class="w-6 h-6 font-bold text-gray-900 " xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>

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

{{--
<div class="max-w-screen-xl px-3 py-2 mx-auto sm:px-6 lg:px-8">
    <div class="flex flex-wrap items-center justify-between">
        <div class="flex items-center flex-1 w-0 min-w-0">
            <span class="flex p-2 rounded-lg"
                :class="{ 'bg-indigo-600': style == 'success', 'bg-red-600': style == 'danger', 'bg-yellow-600': style == 'warning' }">
                <svg x-show="style == 'success'" class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg"
                    fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <svg x-show="style == 'danger'" class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg"
                    fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
                </svg>
                <svg x-show="style != 'success' && style != 'danger'" class="w-5 h-5 text-white"
                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
                </svg>
                <svg x-show="style == 'warning'" class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg"
                    fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5" fill="none" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4v.01 0 0 " />
                </svg>
            </span>
            <p class="text-sm font-medium text-white truncate ms-3" x-text="message"></p>
        </div>
        <div class="shrink-0 sm:ms-3">
            <button type="button" class="flex p-2 transition rounded-md -me-1 focus:outline-none sm:-me-2"
                :class="{ 'hover:bg-indigo-600 focus:bg-indigo-600': style == 'success', 'hover:bg-red-600 focus:bg-red-600': style == 'danger', 'hover:bg-yellow-600 focus:bg-yellow-600': style == 'warning'}"
                aria-label="Dismiss" x-on:click="show = false">
                <svg class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>
    </div>
</div>
--}}