@extends('admin.layout')

<style>
    .dt-search,
    .dt-length {
        display: none !important;
    }
</style>
@section('content')

<h3>Advance Offers</h3>
<div class="card p-3">
    <form action="{{ route('admin.add_purchase_master') }}" method="POST" id="SubmitForm">
        @csrf
        <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">Level</label>
                        <input type="number" name="level[]" class="form-control" required placeholder="10%">
                    </div>

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

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

                    <div class="col-lg-1 d-flex gap-2 mt-3">
                        <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" 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 m-3 g-2">

                <!-- Left : Page Length -->
                <div class="col-12 col-lg-auto">
                    <select id="customLength" class="form-select form-select-sm">
                        <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-5">
                </div>
                <!-- Right Section -->
                <div class="col-12 col-lg-6">
                    <div class="d-flex flex-column flex-lg-row gap-2 justify-content-lg-end">

                        <!-- Search -->
                        <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">
                        </div>

                        <!-- Status -->
                        <select id="status" class="form-select">
                            <option value="">Select Status</option>
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>

                        <!-- Buttons -->
                        <div class="d-flex flex-column flex-lg-row gap-2">
                            <button class="btn btn-primary px-4 w-100">
                                Search
                            </button>
                            <button class="btn btn-light px-4 w-100">
                                <i class="ti tabler-upload"></i> Excel
                            </button>
                        </div>

                    </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>LEVEL</th>
                                <th>LOYALTY</th>
                                <th>COMPANY (%)</th>
                                <th>STATUS</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </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() {

        $('#usersTable').DataTable({
            processing: true,
            serverSide: true,

            ajax: "{{ url('admin/purchase_master_list') }}",

            ordering: true,

            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'level',
                    name: 'level'
                },
                {
                    data: 'loyalty',
                    name: 'loyalty'
                },
                {
                    data: 'company',
                    name: 'company'
                },
                {
                    data: 'status',
                    name: 'status',
                    orderable: false,
                    searchable: false
                }
            ]
        });
        // 🔍 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>
    let isSubmitting = false;

    document.getElementById('submit_btn').addEventListener('click', function() {

        if (isSubmitting) return;

        isSubmitting = true;

        let btn = this;

        btn.disabled = true;
        btn.innerText = "Processing...";

        document.getElementById('purchaseForm').submit();

    });
</script>
@endsection