@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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.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>Purchased Units</h5>
    </div>
    <div class="col-auto">
        <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>

        <!-- <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-auto">
            <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>
        <!-- Right (Search + Button) -->
        <div class="col-auto ms-auto d-flex gap-2 align-items-center">

            <input type="text" id="toDate" class="form-control" placeholder="Search" style="width:200px;">

            <button class="btn btn-label-secondary" id="excelExport">
                <i class="ti tabler-upload"></i>
                <span class="d-none d-sm-inline">&nbsp; Excel</span>
            </button>

        </div>
    </div>

    <div class="table-responsive pt-0 pb-2">
        <table id="usersTable" class="table table-bordered align-middle users-table w-100">
            <thead>
                <tr>
                    <th>SL</th>
                    <th>Date</th>
                     <th>User ID</th>
                    <th>User Name</th>
                    <th>Ref ID</th>
                    <th>Ref Name</th>
                    <th>Invest Type</th>
                    <th>Block ID</th>
                    <th>Block</th>
                    <th>Unit</th>
                    <th>Gold Price</th>
                    <th>GST</th>
                    <th>Making charge</th>
                    <th>Total Price</th>
                    <th>Remaining Days</th>
                    <th>Percentage</th>
                    <th>Daily Amount</th>
                    <th>Income</th>
                    <!-- <th>Action</th> -->
                    <th>Receipt</th>
                    <!-- <th>Created by</th> -->
                    <!-- <th>View</th> -->
                </tr>
            </thead>
        </table>
    </div>
</div>


<!-- delete -->
<div class="modal fade" id="deleteUnit" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content rounded-4 text-center p-4 py-5">
            <h5 class="fw-bold mb-2">Are you sure!!</h5>
            <p class="text-muted">Are you confirm to delete?</p>
            <form action="{{route('delete_units')}}" id="DeleteForm" method="post">
                @csrf
                <input type="hidden" name="id" id="unit_id" value="{{ old('id') }}">

                <div class="mb-3 text-start">
                    <label class="form-label fw-semibold">Reason</label>
                    <textarea name="reason" class="form-control" rows="3"
                        placeholder="Enter reason for deletion">{{ old('reason') }}</textarea>
                    @error('reason')
                    <small class="text-danger">{{ $message }}</small>
                    @enderror

                </div>

                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="submit" id="submit_delete" class="btn btn-danger p-3 ms-2 fw-semibold">
                        Yes, Sure
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<iframe id="downloadFrame" style="display:none;"></iframe>


<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 src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        @if($errors -> any())
        var modalEl = document.getElementById('deleteUnit');
        if (modalEl) {
            var myModal = new bootstrap.Modal(modalEl);
            myModal.show();
        }
        @endif
    });
</script>

<script>
    function setDeleteId(button) {
        document.getElementById('unit_id').value = button.getAttribute('data-id');
    }

    document.getElementById('DeleteForm').addEventListener('submit', function() {
        const btn = document.getElementById('submit_delete');
        btn.disabled = true;
        btn.innerText = 'Deleting...';
    });
</script>
<script>
    $(document).ready(function() {

        const table = $('#usersTable').DataTable({
            ajax        : "{{ route('micro_unit_list_data') }}",
            serverSide  : true,
            paging      : true,
            searching   : true,
            info        : true,
            ordering    : false,
            lengthChange: false,
            pageLength  : 10,
            columnDefs  : [{
                targets: '_all',
                className: 'text-nowrap'
            }],
            buttons: [{
                extend: 'excelHtml5',
                title: 'MicroUnits Purchased List',
                 filename: function() {
                    var now = new Date();
                    var date =
                        String(now.getDate()).padStart(2, '0') + '-' +
                        String(now.getMonth() + 1).padStart(2, '0') + '-' +
                        String(now.getFullYear()).slice(-2);

                    return 'MicroUnits Purchased List - ' + date;
                },

                exportOptions: {
                     columns: ':not(:nth-last-child(-n+2))'
                },
                className: 'd-none'
            }],

            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },

                {
                    data: 'date',
                    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: 'invest_type',
                    name: 'invest_type'
                },
                {
                    data: 'block_id',
                    name: 'block_id'
                },
                {
                    data: 'block',
                    name: 'block'
                },
                {
                    data: 'unit',
                    name: 'unit'
                },

                {
                    data: 'amount',
                    name: 'amount'
                },
                {
                    data: 'gst',
                    name: 'gst'
                },
                {
                    data: 'making_charge',
                    name: 'making_charge'
                },
                {
                    data: 'total_price',
                    name: 'total_price'
                },

                {
                    data: 'roi_days',
                    name: 'roi_days'
                },

                {
                    data: 'roi_percentage',
                    name: 'roi_percentage'
                },

                {
                    data: 'daily_roi_amount',
                    name: 'daily_roi_amount'
                },
                {
                    data: 'income',
                    name: 'income'
                },
                // {
                //     data: 'action',
                //     name: 'action',
                //     orderable: false,
                //     searchable: false
                // },
                {
                    data: 'receipt',
                    name: 'receipt',
                    orderable: false,
                    searchable: false
                },



                // {
                //     data: 'created_by',
                //     name: 'invested_by'
                // },

                // {
                //     data: 'view',
                //     name: 'view',
                //     orderable: false,
                //     searchable: false
                // }
            ]
        });



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

        //  Custom Length
        $('#pageLength').on('change', function() {
            table.page.len(this.value).draw();
        });

        $('#excelExport').click(function() {

            var oldLength = table.page.len();

            table.page.len(-1).draw();

            table.one('draw', function() {
                table.button('.buttons-excel').trigger();

                table.page.len(oldLength).draw(false);
            });
        });

    });
</script>

<script>
    function downloadmicroReceipt(id) {
    let iframe = document.getElementById('downloadFrame');

    let url = "{{ route('micro_receipt_download', ':id') }}";
    url = url.replace(':id', id);

    iframe.src = url;

    iframe.onload = function () {
        setTimeout(() => {
            iframe.contentWindow.focus();
            iframe.contentWindow.print();
        }, 500);
    };
}
</script>


@endsection