@props(['id' => 'createModal'])

<div class="modal fade" id="{{ $id }}" tabindex="-1" aria-labelledby="createModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md modal-dialog-centered create-modal">
    <div class="modal-content border-0 shadow-sm">
        <div class="modal-header">
            <h5 class="modal-title fw-bold" id="createModalLabel">Create</h5>
            <button type="button" class="cros-btn" data-bs-dismiss="modal" aria-label="Close"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body p-0">
            <div class="list-group list-group-flush">
                <a href="{{ route('leads.create') }}" class="justify-content-between list-group-item list-group-item-action d-flex align-items-center gap-3 py-3">
                        <div class="inner-mod-head">
                            <div>
                            <img src="{{ asset('img/cr1.svg') }}">
                            <h3>Lead</h3>
                            </div>
                             <small>Create a lead to start tracking progress with a prospect.</small>
                        </div>
                        <div class="modal-right-arrow"><i class="dripicons-chevron-right"></i></div>
                </a>
                <a href="#" class="justify-content-between list-group-item list-group-item-action d-flex align-items-center gap-3 py-3">
                        <div class="inner-mod-head">
                            <div>
                            <img src="{{ asset('img/cr2.svg') }}">
                            <h3>Ticket</h3>
                            </div>
                              <small>Use ticket to get issues and to-do’s handled.</small>
                        </div>
                     <div class="modal-right-arrow"><i class="dripicons-chevron-right"></i></div>
                </a>
                <a href="#" class="justify-content-between list-group-item list-group-item-action d-flex align-items-center gap-3 py-3">
                        <div class="inner-mod-head">
                            <div>
                            <img src="{{ asset('img/cr3.svg') }}">
                            <h3>Event</h3>
                            </div>
                              <small>Add an event to keep track of tasks and appointments.</small>
                        </div>
                    <div class="modal-right-arrow"><i class="dripicons-chevron-right"></i></div>
                </a>
                <a href="#" class="justify-content-between list-group-item list-group-item-action d-flex align-items-center gap-3 py-3">
                    <div class="inner-mod-head">
                            <div>
                            <img src="{{ asset('img/cr4.svg') }}">
                            <h3>TurboApp</h3>
                            </div>
                             <small>Submit a merchant application to a processor.</small>
                        </div>
                    <div class="modal-right-arrow"><i class="dripicons-chevron-right"></i></div>
                </a>
                <a href="{{ route('merchants.create') }}" class="justify-content-between list-group-item list-group-item-action d-flex align-items-center gap-3 py-3">
                        <div class="inner-mod-head">
                            <div>
                            <img src="{{ asset('img/cr5.svg') }}">
                            <h3>Merchant</h3>
                            </div>
                             <small>Add a merchant account to the system once you have a MID.</small>
                        </div>
                    <div class="modal-right-arrow"><i class="dripicons-chevron-right"></i></div>
                </a>
                <a href="{{ route('residuals.create') }}" class="justify-content-between list-group-item list-group-item-action d-flex align-items-center gap-3 py-3">
                        <div class="inner-mod-head">
                            <div>
                            <img src="{{ asset('img/cr6.svg') }}">
                            <h3>Residuals</h3>
                            </div>
                             <small>Upload a residuals report into the system for calculation.</small>
                        </div>
                    <div class="modal-right-arrow"><i class="dripicons-chevron-right"></i></div>
                </a>
                <a href="#" class="justify-content-between list-group-item list-group-item-action d-flex align-items-center gap-3 py-3">
                        <div class="inner-mod-head">
                            <div>
                            <img src="{{ asset('img/cr7.svg') }}">
                            <h3>Group</h3>
                            </div>
                             <small>Use groups to segment access between brands and offices.</small>
                        </div>
                    <div class="modal-right-arrow"><i class="dripicons-chevron-right"></i></div>
                </a>
                <a href="{{ route('manages.users.create') }}" class="justify-content-between list-group-item list-group-item-action d-flex align-items-center gap-3 py-3">
                        <div class="inner-mod-head">
                            <div>
                            <img src="{{ asset('img/cr8.svg') }}">
                            <h3>User</h3>
                            </div>
                             <small>Invite your team members to access the CRM.</small>
                        </div>
                    <div class="modal-right-arrow"><i class="dripicons-chevron-right"></i></div>
                </a>
            </div>
        </div>
    </div>
</div>
</div>