@extends('admin.zsi.layouts.admin')
@section('content')
    <div class="app-content-header">
        <!--begin::Container-->
        <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
                <div class="col-sm-6">
                    <h3 class="mb-0">Monthly Fauna Images</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-end">
                        <li class="breadcrumb-item"><a href="{{ route('zsi.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Monthly Fauna Images</li>
                    </ol>
                </div>
            </div>
            <!--end::Row-->
        </div>
        <!--end::Container-->

    </div>
    <!--end::App Content Header-->
    <!--begin::App Content-->
    <div class="app-content">
        <!--begin::Container-->
        <div class="container-fluid">
            <!--begin::Row-->
            <div class="row">
                <!--begin::Col-->

                <!--end::Col-->
                @livewire('monthly-fauna-images')
                <!--end::Col-->
            </div>
            <!--end::Row-->
            <!--begin::Row-->

            <!-- /.row (main row) -->
        </div>
        <!--end::Container-->
    </div>
    @if (session('success'))
        <div class="modal fade" id="successModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0 shadow-lg">

                    <div class="modal-body text-center p-5">

                        <div class="mb-3">
                            <div class="bg-success bg-opacity-10 rounded-circle d-inline-flex p-3">
                                <i class="bi bi-check-lg text-success fs-2"></i>
                            </div>
                        </div>

                        <h4 class="fw-bold mb-2">
                            Success!
                        </h4>

                        <p class="text-muted mb-4">
                            {{ session('success') }}
                        </p>


                        <button type="button" class="btn btn-success px-4" id="closeSuccessModal">
                            Done
                        </button>

                    </div>

                </div>
            </div>
        </div>
    @endif
@endsection
@push('scripts')
    @if (session('success'))
        <script>
            document.addEventListener('DOMContentLoaded', function() {

                const modalElement = document.getElementById('successModal');
                const closeButton = document.getElementById('closeSuccessModal');

                if (!modalElement) {
                    return;
                }

                const successModal = new bootstrap.Modal(modalElement);

                successModal.show();

                if (closeButton) {

                    closeButton.addEventListener('click', function() {

                        successModal.hide();

                        setTimeout(function() {

                            // Remove any remaining backdrop
                            document
                                .querySelectorAll('.modal-backdrop')
                                .forEach(function(backdrop) {
                                    backdrop.remove();
                                });

                            // Restore body
                            document.body.classList.remove('modal-open');

                            document.body.style.removeProperty('overflow');
                            document.body.style.removeProperty('padding-right');

                        }, 300);

                    });

                }

            });
        </script>
    @endif
@endpush