@props([
    'id'    => 'off-canvas-panel',
    'title' => ' ',
    'action' => '',
    'form_id' => 'form',
    'saveBtnText' => trans('forms.lbl_save'),
    'saveBtnClass' => 'btn-save',
    'saveBtnType' => 'submit',
    'width' => "360px",
    'zIndex' => "999",
    'form' => 1
])

<div style="z-index: {{ $zIndex }} !important"
      class="fixed top-0 right-[-100%] h-full w-full bg-black bg-opacity-50 z-20 flex justify-end items-center canvas-backdrop"
>
      <div
        id="{{ $id }}"
        style="z-index: {{ $zIndex }} !important"
        class="fixed right-[-{{ $width }}] top-0 w-[{{ $width }}] bg-white border h-full transition transform duration-300 ease-in-out px-6 py-8"
      >
        <div class="h-full relative canvas-body">
            <x-form action="{{ $action }}" id="{{ $form_id }}" name="form">
                <div class="flex flex-col h-[80vh] overflow-y-auto no-scrollbar">

                    <div class="flex justify-between">
                        <h1 class="text-lg-semibold text-black title">{!! $title !!}</h1>
                        <button
                            class="canvas-close"
                            data-toggle="canvas-panel"
                            type="button"
                        >
                            <x-svg-icon icon="icon-close" />
                        </button>
                    </div>

                    <div class="flex flex-col gap-4 mt-8 mb-36">
                        <div class="flex flex-col gap-4 canvas-content">
                            {{ $slot }}
                        </div>
                    </div>

                </div>

                <div class="absolute bottom-0 w-full bg-white pt-5">
                    <div class="flex justify-center items-center gap-3">
                        <button
                            data-toggle="canvas-panel"
                            type="button"
                            class="btn-tertiary-base canvas-close w-full flex items-center justify-center"
                        >
                            {{trans('forms.lbl_cancel')}}
                        </button>

                        <!-- Add Now Button  -->
                        @if($form)
                            <button
                                type="{{ $saveBtnType }}"
                                class="btn-primary-base w-full flex items-center justify-center {{ $saveBtnClass }}"
                        >
                                {{$saveBtnText}}
                            </button>
                        @endif
                    </div>
                </div>
            </x-form>
        </div>
    </div>
</div>