@props(['form'=>''])
<!-- resources/views/components/sidebar.blade.php -->
<style>
    /* Add your custom styles for the sidebar and overlay here */
    .sidebar {
        width: 500px;
        height: 100%;
        background-color: #f0f0f0;
        position: fixed;
        z-index: 1082;
        top: 0;
        right: -500px;
        transition: right 0.3s ease;
        overflow-y: scroll;
    }

    .overlay {
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        z-index: 1081;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        display: none;
    }

    .show-sidebar {
        right: 0;
    }
</style>
<div id="overlay" class="overlay"></div>
<!-- resources/views/components/sidebar.blade.php -->

<div id="sidebar-{{ $id }}" class="sidebar bg-light">
    <div class="py-2 d-flex gap-1">
        <!-- Close button -->
        <button type="button" class="rounded text-white bg-danger border-0" aria-label="Close" onclick="closeSidebar('{{ $id }}')">
            <i class="fa-solid fa-chevron-left"></i> 
        </button>
        <b>Back</b>
    </div>

    <!-- Add Item Form -->
    {!! $form !!}
</div>