@extends('Admin.layout')
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card p-4">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h4 class="mb-0">commission</h4>
                <button class="btn btn-primary">+ Add New commission</button>
            </div>

            <table id="commission" class="table  align-middle">
                <thead>
                    <tr>
                        <th><input type="checkbox"></th>
                        <th>PACKAGE NAME</th>
                        <th>AMOUNT</th>
                        <th>COMMISSION TYPE</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>Basic Plan</td>
                        <td>499</td>
                        <td>Precentage</td>
                        <td>
                            <a href="#" class="btn btn-sm">
                            <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.667 6.417h14.666m-9.166 3.666v5.5m3.666-5.5v5.5M4.584 6.417l.916 11c0 1.012.821 1.833 1.834 1.833h7.333c1.012 0 1.833-.82 1.833-1.833l.917-11m-9.167 0v-2.75c0-.507.41-.917.917-.917h3.666c.507 0 .917.41.917.917v2.75" stroke="#2F2B3D" stroke-opacity=".7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>    
                            </a>
                            <a href="#" class="btn btn-sm">
                               <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="1.833" stroke="#2F2B3D" stroke-opacity=".7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.167 11Q16.5 17.417 11 17.417T1.834 11Q5.5 4.583 11 4.583T20.167 11" stroke="#2F2B3D" stroke-opacity=".7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </a>
                             <a href="#" class="btn btn-sm">
                                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r=".917" stroke="#2F2B3D" stroke-opacity=".7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="11" cy="17.417" r=".917" stroke="#2F2B3D" stroke-opacity=".7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="11" cy="4.583" stroke="#2F2B3D" stroke-opacity=".7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" r=".917"/></svg>
                            </a> 
                        </td>
                    </tr>
                  
                </tbody>
            </table>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.js"></script>
    <script>
        $(document).ready(function() {
            $('#commission').DataTable({
                pageLength: 10,
                lengthMenu: [5, 10, 25, 50],
                language: {
                    search: "_INPUT_",
                    searchPlaceholder: "Search State"
                }
            });
        });
    </script>
@endsection