@extends('admin.layout')

<style>
  * {
            --hibiscus-love: #fc465c;
            --fine-ii: #f9b198;
            --afl: #f9b198;
            --mexican-sky: #cfdddd;
            --brasillia-peach: #133d45;
            --free: #ffd700;
            --captured: #2b2120;

            --form-bg: var(--brasillia-peach);
            --secondary-color: var(--hibiscus-love);
            --tertiary-color: var(--fine-ii);
            --quadrary-color: var(--afl);
            --bg-color: var(--mexican-sky);
            --text-color: var(--free);
            --header-color: var(--captured);
            --error-color: var(--hibiscus-love);
            --success-color: #73d12e;

            box-sizing: border-box;
        }

        .container {
            border-radius: 0.6em;
            padding: 20px;
            background-color: #133d45 !important;

        }

        /* .form {
            padding: 30px 40px;
        } */

        .form h2 {
            text-align: center;
            margin: 0 0 20px;
        }

        .form-control.bliss {
            /* padding-bottom: 20px; */
            position: relative;
            color: var(--text-color) !important;

        }

        .form-label {
            color: White !important;
            display: block;
            margin-bottom: 5px;
        }

        .form-control.bliss,
        .select2-container--default .select2-selection--single {
            border-radius: 6px;
            background-color: #133d45 !important;
            border: var(--quadrary-color) solid 2px !important;
            display: block;
            width: 100%;
            color: var(--text-color) !important;

        }

        .form-select.bliss {
            border-radius: 6px;
            background-color: #133d45 !important;
            border: var(--quadrary-color) solid 2px !important;
            color: var(--text-color) !important;


        }

        input::placeholder,
        textarea::placeholder {
            color: #a8a6a6 !important;
            opacity: 0.7;
        }

        .form-control.bliss input:focus {
            outline: 0;
            border-color: var(--tertiary-color);
        }

        .form-control.bliss.success input {
            border-color: var(--success-color);
        }

        .form-control.bliss.error input {
            border-color: var(--error-color);
        }

        .form-control.bliss small {
            color: var(--error-color);
            position: absolute;
            bottom: 0;
            left: 0;
            visibility: hidden;
        }

        .form-control.bliss.error small {
            visibility: visible;
        }

        .btn-submit {
            cursor: pointer;
            background: #ffd700 !important;
            font-size: 16px;
            color: black !important;
            padding: 0.618em 1.2em;
            border-radius: 0.4em;

        }

        .btn-submit {
            outline: 0;
            background-color: #ffd700;
        }


        .form-label {
            color: White !important;
        }

        .news-marquee {
            width: 100%;
            overflow: hidden;
            background: #111;
            color: #fff;
            padding: 10px 0;
            position: relative;
            border-radius: 6px;
        }

        input:-webkit-autofill,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:hover,
        textarea:-webkit-autofill,
        select:-webkit-autofill {
            -webkit-text-fill-color: #ffc107 !important;
            transition: background-color 5000s ease-in-out 0s;
        }
</style>
@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> -->
        Advance Offers</h5>
        <div class="container mt-3">
    <div class="p-3">
        <form action="{{ route('admin.store_advance_offer') }}" method="POST" id="SubmitForm">
            @csrf


                <div id="rangeContainer">

                    <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 bliss" required placeholder="1,00,000">
                        </div>

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

                        <div class="col">
                            <label class="form-label">Percentage</label>
                            <input type="number" name="percentage[]" class="form-control bliss" 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" id="submit_btn">Submit</button>
            </div>
        </div>
    </form>
    <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 mb-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>

                    <!-- 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-download"></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>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 mt-3 w-100';
                    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 () {

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

                ajax: "{{ route('admin.advance_offer_list') }}",

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

                buttons: [{
                    extend: 'excelHtml5',
                    className: 'd-none',
                    title: 'Advance Offers Report'
                }],
columnDefs: [
        {
            targets: '_all',
            className: 'text-nowrap'
        }
    ],
                ordering: false,

                columns: [{
                        data: 'DT_RowIndex',
    name: 'DT_RowIndex',
    orderable: false,
    searchable: false
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'from_amount',
                    name: 'from_amount'
                },
                {
                    data: 'to_amount',
                    name: 'to_amount'
                },
                {
                    data: 'percentage',
                    name: 'percentage'
                },
                {
                    data: 'status',
                    name: '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>
        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