@extends('layouts.main')
@section('title', 'Distibutor Question Flow')
@section('container')

    <style>
        .new-card-header {
            padding: 7px 10pxpx !important;
        }

        .card-header.align-items-center.d-flex {
            padding: 8px 10px;
        }

        .dashboard_bar {
            color: #fff !important;
        }

        .col-xxl-12.col-md-12 {
            margin-top: 5px;
        }

        .col-xl-3.col-lg-3 {
            margin-top: 12px;
        }

        form#addCompany {
            margin-bottom: 0;
        }
    </style>
    <div class="row">

        <div class="col-md-12">
            {{-- ********* Role card *********** --}}
            <div class="card" style="height: max-content;">
                <div class="card-header new-card-header" style="background:var(--secondary) ; padding:7px 10px!important;">

                    <h4 class="card-title" data-heading-tag="H4">Distibutor Templete</h4>


                </div>
                <div class="card-body">

                    <div id="flow-root" class="vstack gap-3">
                        @forelse($top as $q)
                            @include('DistibutorTemplete.question', ['q' => $q])
                        @empty
                            <div class="alert alert-info mb-0">No visible questions configured.</div>
                        @endforelse
                    </div>
                </div>
                {{-- ********* Role card *********** --}}
            </div>

        </div>





        <script nonce="{{ $cspNonce }}" src="{{ asset('public/js/jquery-3.6.0.min.js') }}"></script>
        <script nonce="{{ $cspNonce }}" src="{{ asset('js/quflow.js') }}"></script>
@endsection