@extends('Admin.layout')

<style>
    :root {
        --border: 1vh;
        --radius: 75vh;
    }

    .hk-button {
        padding: 2.5vh 8vh;
        background: #000;
        color: #fff;
        font-family: monospace;
        border-radius: var(--radius);
        border: none;
        cursor: pointer;
        overflow: hidden;
        /* animation: glow linear 2s infinite; */
        position: relative;
    }

    .hk-button::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        aspect-ratio: 1/1;
        width: 150%;
        height: auto;
        border-radius: 50%;
        background: conic-gradient(#fff 0%, #000 3%, #409 60%, #fff 100%);
        animation: spin linear 2s infinite;
        transform: translate(-50%, -50%);
    }

    .hk-button::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(100% - var(--border));
        height: calc(100% - var(--border));
        background: #000d;
        transform: translate(-50%, -50%);
        border-radius: var(--radius);
        backdrop-filter: blur(10vh);
    }

    .hk-button span {
        display: block;
        position: absolute;
        text-wrap: nowrap;
        z-index: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: "Geo", monospace;
        font-size: 14px;
        /* text-transform: uppercase; */
    }

    @keyframes spin {
        0% {
            transform: translate(-50%, -50%) rotate(0deg);
        }

        100% {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    @keyframes glow {
        0% {
            border: 0 transparent solid;
        }

        25% {
            border: 15px #4094 solid;
        }

        50% {
            border: 30px transparent solid;
        }

        100% {
            border: 0 transparent solid;
        }
    }
</style>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
    <div class="col-auto">
        <h5>Blocks</h5>
    </div>
    @php
    $user = Auth::guard('admin')->user();
    @endphp
    <div class="col-auto">
        @if(!$user->hasRole('staff'))
        <a href="{{ route('grant_micro_unit') }}"><button class="hk-button"><span>Grant MicroUnit</span></button></a>
        <a href="{{ route('grant_micro_block') }}"><button class="hk-button"><span>Grant MicroBlock</span></button></a>
        @endif
        <!-- <a href="{{ route('admin.add_investment') }}"><button class="btn btn-primary"> Unit Purchase</button> </a> -->
    </div>
</div>

<div class="card p-0 m-2">

    <div class="row mb-3 align-items-center p-3 g-2">
        <div class="col-1">
            <select id="pageLength" class="form-select">
                <option value="10"> 10</option>
                <option value="25"> 25</option>
                <option value="50"> 50</option>
                <option value="100"> 100</option>
            </select>
        </div>

        <div class="col-md-3 ms-auto">
            <input type="text" id="toDate" class="form-control" placeholder="Search">
        </div>
    </div>


    <div class="table-responsive pt-0 pb-2">
        <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
            <div class="justify-content-between dt-layout-table">
                <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                    <table class="table" id="usersTable">
                        <thead>
                            <tr>
                                <th>Sno</th>
                                <th>Date</th>
                                <th>User ID</th>
                                <th>User Name</th>
                                <th>Ref ID</th>
                                <th>Ref Name</th>

                                <th>Block ID</th>
                                <th>Block</th>
                                <th>Block Value</th>
                                <th>Units</th>
                                <th>Bond</th>
                                <th>View</th>

                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready(function() {
        const table = $('#usersTable').DataTable({
            ajax        : "{{route('micro_block_list_data')}}",
            searching   : true,
            paging      : true,
            info        : true,
            lengthChange: false,
            pageLength  : 10,
            ordering    : false,
            columnDefs  : [{
                targets: '_all',
                className: 'text-nowrap'
            }],

            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                  {
                    data: 'user_id',
                    name: 'user_id',

                },
                {
                    data: 'user_name',
                    name: 'user_name',

                },
                {
                    data: 'ref_id',
                    name: 'ref_id',

                },
                {
                    data: 'ref_name',
                    name: 'ref_name',

                },
                {
                    data: 'block_id',
                    name: 'block_id'
                },
                {
                    data: 'block',
                    name: 'block'
                },
                {
                    data: 'block_value',
                    name: 'block_value'
                },
                {
                    data: 'units',
                    name: 'units'
                },
                {
                    data: 'bond',
                    name: 'bond',
                    orderable: false,
                    searchable: false
                },

                {
                    data: 'view',
                    name: 'view',
                    orderable: false,
                    searchable: false
                }

            ]

        });

        // Custom search input
        $('#toDate').on('keyup change', function() {
            table.search(this.value).draw();
        });

    });
</script>
@endsection