@extends('admin.layout')


@section('content')
        <h5>
            <!-- <a href="{{ route('admin.advance_dashboard') }}" class="btn btn-white btn-icon me-3 shadow-sm">

                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000"
                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler">

                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />

                    <path d="M15 6l-6 6l6 6" />

                </svg>

            </a> -->
            Profit Master</h5>

        <div class="card p-3">

            <form action="{{ route('admin.add_profit') }}" method="post" id="SubmitForm">
                @csrf
                <div id="rangeContainer">

                    <div class="row align-items-end mb-3 range-row">
                        <div class="col">
                            <label>From Investment</label>
                            <input type="number" name="from[]" class="form-control" required>
                        </div>

                        <div class="col">
                            <label>To Investment</label>
                            <input type="number" name="to[]" class="form-control" required>
                        </div>

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

                        <div class="col">
                            <label>Days</label>
                            <input type="number" name="days[]" class="form-control" required>
                        </div>

                        <div class="col-lg-2 d-flex gap-2 mt-3">
                            <button type="button" class="btn btn-primary addRow w-100">Add</button>
                        </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" id="submit_btn">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 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="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>Days</th>

                                        <th>STATUS</th>

                                    </tr>

                                </thead>

                                <tbody></tbody>

                            </table>

                        </div>

                    </div>
                </div>

            </div>
        </div>


    <script id="zv1w0h">
        document.addEventListener("click", function (e) {

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

                let container = document.getElementById("rangeContainer");

                let newRow = `
    <div class="row align-items-end mb-3 range-row">
        <div class="col">
            <input type="number" name="from[]" class="form-control" required>
        </div>

        <div class="col">
            <input type="number" name="to[]" class="form-control" required>
        </div>

        <div class="col">
            <input type="number" name="percentage[]" class="form-control" required>
        </div>

        <div class="col">
            <input type="number" name="days[]" class="form-control" required>
        </div>

        <div class="col-lg-2 d-flex gap-2">
            <button type="button" class="btn btn-danger removeRow w-100 mt-2">Remove</button>
        </div>
    </div>
    `;

                container.insertAdjacentHTML('beforeend', newRow);
            }

            // 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>


    <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 () {

            let table = $('#usersTable').DataTable({
                processing: true,
                ajax: {
                    url: "{{ route('admin.get_profit') }}",
                    type: "GET"
                },
                dom: 'Brt<"d-flex justify-content-between align-items-center p-3"ip>',
                buttons: [{
                    extend: 'excelHtml5',
                    className: 'd-none',
                    title: 'Profit Report'
                }],
                ordering: false,
                columns: [{
                    data: 'id'
                },
                {
                    data: 'date'
                },
                {
                    data: 'from'
                },
                {
                    data: 'to'
                },
                {
                    data: 'percentage'
                },
                {
                    data: 'days'
                },
                {
                    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 export
            $('#btnExcel').click(function () {
                table.button('.buttons-excel').trigger();
            });

        });
    </script>


    <script>
        document.getElementById('submit_btn').addEventListener('click', function (e) {
            e.preventDefault(); // ✅ prevent double submit
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('SubmitForm').submit();
        });
    </script>
@endsection