@extends('Admin.layout')
@section('content')
    <div class="row mb-3 align-items-center">
        <div class="col-6">
            <a href="{{ route('dashboard') }}" class="text-secondary me-3" style="font-size: 1.5rem;"><svg width="64"
                    height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g filter="url(#filter0_d_52_38412)">
                        <rect x="10" y="1" width="44" height="44" rx="10" fill="white"
                            shape-rendering="crispEdges" />
                        <path d="M34 18L29 23L34 28" stroke="#292460" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </g>
                    <defs>
                        <filter id="filter0_d_52_38412" x="0" y="0" width="64" height="64"
                            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feFlood flood-opacity="0" result="BackgroundImageFix" />
                            <feColorMatrix in="SourceAlpha" type="matrix"
                                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
                            <feMorphology radius="2" operator="erode" in="SourceAlpha"
                                result="effect1_dropShadow_52_38412" />
                            <feOffset dy="9" />
                            <feGaussianBlur stdDeviation="6" />
                            <feComposite in2="hardAlpha" operator="out" />
                            <feColorMatrix type="matrix"
                                values="0 0 0 0 0.399674 0 0 0 0 0.197743 0 0 0 0 0.558333 0 0 0 0.12 0" />
                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_52_38412" />
                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_52_38412" result="shape" />
                        </filter>
                    </defs>
                </svg>
                Information</a>
        </div>
        <div class="col-6 d-flex justify-content-end">
            <a href="{{ route('create_group') }}" class="btn btn-primary" id="createGroupBtn">
                + Create Group
            </a>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="row mb-3 align-items-center">
                <div class="col-6">
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <table id="myDataTable" class="table" style="width:100%">
                        <thead>
                            <tr>
                                <th>NAME</th>
                                <th>CREATED DATE</th>
                                <th>ACTION</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Management</td>
                                <td>14 Apr 2021, 8:43 PM</td>
                                <td class="action-icons">
                                    <a href="/edit/management" title="Edit">
                                        <svg width="22" height="22" viewBox="0 0 22 22" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M8.24984 6.41675H5.49984C4.48732 6.41675 3.6665 7.23756 3.6665 8.25008V16.5001C3.6665 17.5126 4.48732 18.3334 5.49984 18.3334H13.7498C14.7624 18.3334 15.5832 17.5126 15.5832 16.5001V13.7501"
                                                stroke="#2F2B3D" stroke-opacity="0.7" stroke-width="1.5"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                            <path
                                                d="M8.25 13.7499H11L18.7917 5.95822C19.5511 5.19882 19.5511 3.96761 18.7917 3.20822C18.0323 2.44882 16.8011 2.44882 16.0417 3.20822L8.25 10.9999V13.7499"
                                                stroke="#2F2B3D" stroke-opacity="0.7" stroke-width="1.5"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M14.6665 4.58325L17.4165 7.33325" stroke="#2F2B3D" stroke-opacity="0.7"
                                                stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </a>
                                    <a href="/more/management" title="More Actions">
                                        <svg width="22" height="22" viewBox="0 0 22 22" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <circle cx="11.0002" cy="10.9999" r="0.916667" stroke="#2F2B3D"
                                                stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <circle cx="11.0002" cy="17.4167" r="0.916667" stroke="#2F2B3D"
                                                stroke-opacity="0.7" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round" />
                                            <ellipse cx="11.0002" cy="4.58341" rx="0.916667" ry="0.916667"
                                                stroke="#2F2B3D" stroke-opacity="0.7" stroke-width="1.5"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/2.0.7/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#myDataTable').DataTable({
                "paging": true,
                "ordering": true,
                "info": true,
                "searching": true
            });
        });
    </script>
@endsection