@extends('Admin.layout')
<style>
    :root {
        --border: 1vh;
        --radius: 75vh;
    }

    .hk-button {
        padding: 2.5vh 7vh;
        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>
<style>
    .finger-indicator {
        display: inline-block;
        animation: fingerMove 0.8s ease-in-out infinite alternate;
    }

    @keyframes fingerMove {
        0% {
            transform: translateX(0px);
        }

        100% {
            transform: translateX(6px);
        }
    }
</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-12 col-sm-auto mt-2 mt-sm-0">


        <div class="row g-2">

            <!-- Grant Units -->
            <div class="col-6 col-sm-auto">
                <a href="{{ route('admin.add_investment') }}" class="d-grid">
                    <button class="btn btn-primary w-100">
                        <span class="finger-indicator me-2">👉🏻</span>
                        <span>Grant&nbsp;Units</span>
                    </button>
                </a>
            </div>

            <!-- Grant Blocks -->
            <div class="col-6 col-sm-auto">
                <a href="{{ route('grant_blocks') }}" class="d-grid">
                    <button class="btn btn-primary w-100">
                        <span class="finger-indicator me-2">👉🏻</span>
                        <span>Grant&nbsp;Blocks</span>
                    </button>
                </a>
            </div>

        </div>


    </div>

</div>
<div class="row g-3 m-1">

    <div class="col-12 col-md-3">
        <div class="card border-0 shadow-sm h-100 stat-card">
            <div class="card-body d-flex align-items-center gap-3">

                <div class="stat-icon bg-primary-subtle text-primary">
                    <i class="ti tabler-building-community"></i>
                </div>

                <div>
                    <h6 class="mb-1 text-muted fw-semibold">Total Units</h6>
                    <h4 class="mb-0 fw-bold">{{ $totalUnits }}</h4>
                </div>

            </div>
        </div>
    </div>

    <div class="col-12 col-md-3">
        <div class="card border-0 shadow-sm h-100 stat-card">
            <div class="card-body d-flex align-items-center gap-3">

                <div class="stat-icon bg-success-subtle text-success">
                    <i class="ti tabler-crown"></i>
                </div>

                <div>
                    <h6 class="mb-1 text-muted fw-semibold">Super Promoter</h6>
                    <h4 class="mb-0 fw-bold">{{ $superPromoterCount }}</h4>
                </div>

            </div>
        </div>
    </div>

    <div class="col-12 col-md-3">
        <div class="card border-0 shadow-sm h-100 stat-card">
            <div class="card-body d-flex align-items-center gap-3">

                <div class="stat-icon bg-info-subtle text-info">
                    <i class="ti tabler-users"></i>
                </div>

                <div>
                    <h6 class="mb-1 text-muted fw-semibold">Members</h6>
                    <h4 class="mb-0 fw-bold">{{ $memberCount }}</h4>
                </div>

            </div>
        </div>
    </div>

    <div class="col-12 col-md-3">
        <div class="card border-0 shadow-sm h-100 stat-card">
            <div class="card-body d-flex align-items-center gap-3">

                <div class="stat-icon bg-warning-subtle text-warning">
                    <i class="ti tabler-cash-banknote"></i>
                </div>

                <div>
                    <h6 class="mb-1 text-muted fw-semibold">Loan</h6>
                    <h4 class="mb-0 fw-bold">{{ $loanCount }}</h4>
                </div>

            </div>
        </div>
    </div>

</div>

<style>
    .stat-card {
        border-radius: 16px;
        transition: all 0.3s ease;
    }

    .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    }

    .stat-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
    }

    .card h6 {
        font-size: 13px;
    }

    .card h4 {
        font-size: 24px;
    }

    @media (max-width: 576px) {
        .stat-icon {
            width: 45px;
            height: 45px;
            min-width: 45px;
            font-size: 20px;
        }

        .card h4 {
            font-size: 20px;
        }
    }
</style>

<div class="card p-0 m-2">
    <div class="row m-3 g-3 align-items-center justify-content-between">

        <!-- LEFT -->
        <div class="col-12 col-lg-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>
                <option value="All">All</option>
            </select>

        </div>

        <div class="col-12 col-lg-auto">

            <div class="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center gap-2">


                <input type="text" id="customSearch" class="form-control" placeholder="Search table...">

                <button class="btn btn-label-secondary" id="excelExport">
                    Export
                </button>
            </div>

        </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>Loaded Date</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('investment_history_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: 'Standard Units 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 'Standard Units 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: 'userDetails',
                //     orderable: false,
                //     searchable: false
                // },
                {
                    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: 'gold_rate_date',
                    name: 'gold_rate_date'
                },
                {
                    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
        $('#customSearch').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 downloadReceipt(id) {
        let iframe = document.getElementById('downloadFrame');

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

        iframe.src = url;

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

<!-- <script>
        function downloadReceipt(id) {
            let iframe = document.getElementById('downloadFrame');
            iframe.src = "/receipt_download/" + id;
            iframe.onload = function() {
                setTimeout(() => {
                    iframe.contentWindow.focus();
                    iframe.contentWindow.print();
                }, 500);
            };
        }
    </script> -->
@endsection