<div class="card w-100">
<script src="https://staging.yasmina.ai/js/toggle.js"></script>
<!-- Bootstrap 5 JS Bundle -->
<div class="card-header">
Add Insurance by
<img class="ms-2" src="https://www.tawuniya.com/assets/tawuniya-logo-BFmobvJd.svg"/>
</div>
<div class="card-body align-items-center">
<div class="d-flex justify-content-between">
<!-- Toggle Switch -->
<select name="insurance_coverage" id="insuranceCoverage" class="form-select form-select-sm w-50">
<option value="comprehensive" data-price="500">
Comprehensive (Alshamel)
</option>
<option value="third_party_plus" data-price="110">
Third Party Plus Insurance
</option>
<option value="third_party" data-price="100">
Third Party Insurance
</option>
<option value="no_coverage" data-price="0">
No insurance coverage
</option>
</select>
<span>Price: <span id="insurancePrice">0 SAR</span></span>
</div>
<div class="mt-4 ms-2">
<ul class="list-unstyled" id="coverageList">
<li class="d-flex align-items-center">
<a data-bs-toggle="collapse" href="#collapseExample" role="button" class="link-success">View all coverages</a>
</li>
</ul>
</div>
</div>
</div>
