@extends('user.layout')

<style>
    #usersTable thead th {
        background: linear-gradient(to bottom, #1b97d3, #0E4E6D) !important;
        color: white;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.5px;
        border: none;
        padding: 12px;
    }


    /* Table Body Styling */
    #usersTable tbody td {
        padding: 15px 12px;
        vertical-align: middle;
        border-bottom: 1px solid #f0f0f0;
        color: #555;
    }
</style>
@section('content')
    <div class="container-fluid">

        <h3>Profit Generation</h3>
        <div class="card p-3">
            <form action="#">
                <div class="container mt-3">


                    <div id="rangeContainer">

                        <!-- First Row (No Remove Button) -->
                        <div class="row align-items-end mb-3 range-row">

                            <div class="col">
                                <label class="form-label">From</label>
                                <input type="number" name="from[]" class="form-control" required placeholder="1,00,000">
                            </div>

                            <div class="col">
                                <label class="form-label">To</label>
                                <input type="number" name="to[]" class="form-control" required placeholder="1,00,000">
                            </div>

                            <div class="col">
                                <label class="form-label">Percentage</label>
                                <input type="number" name="percentage[]" class="form-control" required placeholder="10%">
                            </div>

                            <div class="col-lg-1 d-flex gap-2">
                                <button type="button" class="btn btn-primary addRow w-100">Add</button>
                            </div>

                        </div>

                    </div>



                </div>
                <div class="form-action d-flex justify-content-center mt-2">
                    <button class="btn btn-label-secondary me-3" type="reset">Discard</button>
                    <button class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
        <div class="card shadow-sm mt-4 border-0">
            <div class="card-body p-3">
                <div class="row">
                    <h5 class="mb-3">Filters</h5>
                    <div class="row align-items-center mb-3">

                        <!-- Left : Page Length -->
                        <div class="col-auto">
                            <select id="customLength" class="form-select form-select-sm" style="width:80px;">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                            </select>
                        </div>

                        <!-- Right Section -->
                        <div class="col">
                            <div class="d-flex justify-content-end align-items-center gap-2 flex-nowrap">

                                <!-- Search -->
                                <div class="input-group" style="width:200px;">
                                    <span class="input-group-text bg-white border-end-0">
                                        <i class="ti tabler-search"></i>
                                    </span>
                                    <input type="text" id="customSearch" class="form-control border-start-0"
                                        placeholder="Search User">
                                </div>

                                <button class="btn btn-light px-4" id="btnExcel">
                                    <i class="ti tabler-upload"></i> Excel
                                </button>

                            </div>
                        </div>

                    </div>


                    <div class="row mt-2">
                        <!-- <div class="d-flex justify-content-between align-items-center p-3">
                                    <select id="customLength" class="form-select form-select-sm" style="width: 80px;">
                                        <option value="10">10</option>
                                        <option value="25">25</option>
                                        <option value="50">50</option>
                                    </select>

                                    <div class="d-flex gap-2">
                                        <div class="input-group">
                                            <span class="input-group-text bg-white border-end-0"><i class="ti tabler-search"></i></span>
                                            <input type="text" id="customSearch" class="form-control border-start-0"
                                                placeholder="Search User">
                                        </div>

                                    </div>
                                </div> -->

                        <div class="table-responsive">
                            <table class="table w-100 mb-0" id="usersTable">
                                <thead class="table-primary-custom">
                                    <tr>
                                        <th>SNO</th>
                                        <th>DATE</th>
                                        <th>From</th>
                                        <th>TO</th>
                                        <th>Percentage</th>
                                        <th>STATUS</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>


                </div>
            </div>

        </div>
    </div>

    <script>document.addEventListener('DOMContentLoaded', function () {

            const container = document.getElementById('rangeContainer');

            container.addEventListener('click', function (e) {

                // ADD ROW
                if (e.target.classList.contains('addRow')) {

                    let row = e.target.closest('.range-row');
                    let clone = row.cloneNode(true);

                    // Clear input values
                    clone.querySelectorAll('input').forEach(input => input.value = '');

                    // Remove existing buttons
                    let btnContainer = clone.querySelector('.col-lg-1:last-child');
                    btnContainer.innerHTML = '';

                    // Add Remove Button only
                    let removeBtn = document.createElement('button');
                    removeBtn.type = 'button';
                    removeBtn.className = 'btn btn-danger removeRow';
                    removeBtn.innerText = 'Remove';

                    btnContainer.appendChild(removeBtn);

                    container.appendChild(clone);
                }

                // REMOVE ROW
                if (e.target.classList.contains('removeRow')) {
                    e.target.closest('.range-row').remove();
                }

            });

        });</script>
    <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>
    {{--
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css"> --}}

    <script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

 <script>
$(document).ready(function () {

    // Static demo data (must be array)
    const data = [
        { id: 1, date: '12/10/2026', from: '10,000', to: '10,900', per: '12%', status: 'Active' }
    ];

    let table = $('#usersTable').DataTable({
        processing: true,

        dom: 'Brt<"d-flex justify-content-between align-items-center p-3"ip>',

        buttons: [
            {
                extend: 'excelHtml5',
                className: 'd-none', // hide default button
                title: 'Report'
            }
        ],

        data: data,

        ordering: false,

        columns: [
            { data: 'id' },
            { data: 'date' },
            { data: 'from' },
            { data: 'to' },
            { data: 'per' },
            { data: 'status' }
        ]
    });

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

    // Page length
    $('#customLength').on('change', function () {
        table.page.len(this.value).draw();
    });

    // Excel button trigger
    $('#btnExcel').click(function () {
        table.button('.buttons-excel').trigger();
    });

});
</script>
@endsection