@extends('admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
<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 {
        margin-bottom: 10px;
        /* 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;
    }

    .section-title {
        position: relative;
        margin: 25px 0 15px;
        text-align: center;
    }

    .section-title span {
        background: var(--form-bg);
        padding: 6px 20px;
        font-weight: 600;
        color: var(--text-color);
        letter-spacing: 1px;
        border-radius: 30px;
        border: 1px solid var(--quadrary-color);
        font-size: 14px;
        z-index: 1;
        position: relative;
    }

    .section-title::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--quadrary-color);
        z-index: 0;
    }
</style>

@section('content')
    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <div class="col-auto d-flex align-items-center">
            <a href="{{ route('admin.purchase_advances_history') }}" 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>
            <h4 class="mb-0">Purchase Advance</h4>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-lg-6 col-md-9">
            <div class="card shadow-sm border-0 p-0">
                <div class="container">
                    <div class="card-body p-4">


                        <div class="section-title mt-1">
                            <span><i class="ti tabler-share icon-base me-1"></i>Referral Details</span>
                        </div>
                        <form action="{{ route('admin.add_investment') }}" method="POST" enctype="multipart/form-data"
                            id="purchaseForm">
                            @csrf
                            <div class="mb-3">
                                <label class="form-label">User ID <span class="text-danger">*</span></label>
                                <input type="text" name="user_id" id="user_id"
                                    class="form-control bliss @error('user_id') is-invalid @enderror"
                                    value="{{ old('user_id') }}" required placeholder="Enter User ID">

                                @error('user_id')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">User Name</label>
                                <input type="text" name="name" id="name"
                                    class="form-control bliss @error('name') is-invalid @enderror" value="{{ old('name') }}"
                                    readonly>

                                @error('name')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Package <span class="text-danger">*</span></label>


                                <input type="text" class="form-control bliss" value="OG22" readonly>


                                <input type="hidden" name="package" value="omiga_22">

                                @error('package')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Advance Amount <span class="text-danger">*</span></label>
                                <input type="number" name="amount" min="1"
                                    class="form-control bliss @error('amount') is-invalid @enderror"
                                    value="{{ old('amount') }}" required>

                                @error('amount')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <label class="form-label">Upload Advance Receipt</label>

                                <div class="border border-secondary rounded p-3 text-center position-relative
            @error('receipt') border-danger @enderror" style="border-style:dashed !important; cursor:pointer;">

                                    <input type="file" name="receipt" id="receiptUpload" accept="image/*"
                                        class="form-control bliss d-none @error('receipt') is-invalid @enderror" required>

                                    <label for="receiptUpload" class="w-100 h-100" id="uploadLabel"
                                        style="cursor: pointer;">

                                        <div id="uploadPlaceholder">
                                            <i class="menu-icon icon-base ti tabler-upload fs-3"></i>
                                            <p class="mb-0">Click to Upload</p>
                                        </div>

                                        <div id="imagePreviewContainer" class="d-none position-relative">
                                            <img id="imagePreview" class="img-fluid rounded shadow-sm"
                                                style="max-height:200px;">
                                            <button type="button"
                                                class="btn btn-sm btn-danger position-absolute top-0 end-0 m-2 rounded-circle"
                                                id="removeImage" style="width:30px;height:30px;padding:0;line-height:1;">
                                                ✕
                                            </button>
                                        </div>

                                    </label>
                                </div>

                                @error('receipt')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Remark </label>
                                <textarea name="remark" rows="3"
                                    class="form-control bliss @error('remark') is-invalid @enderror"
                                    required>{{ old('remark') }}</textarea>

                                @error('remark')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="d-flex justify-content-center gap-2">
                                <button type="reset" class="btn btn-outline-secondary">
                                    Discard
                                </button>
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                    data-bs-target="#openConfirmModal">
                                    Submit
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-body">
                    <h5 class="mb-3">Purchase Advance History</h5>
                    <div class="table-responsive">
                        <table id="usersTable" class="table align-middle text-center">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Date</th>
                                    <th>User ID</th>
                                    <th>User Name</th>
                                    <th>Package</th>
                                    <th>Amount</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- logout -->
    <div class="modal fade" id="openConfirmModal" 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 Investment ?</p>
                <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 me-3" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" class="btn btn-success p-3 fw-semibold" id="submit_btn">

                        Yes, Sure

                    </button>
                </div>
            </div>
        </div>
    </div>
    <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://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.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>
        document.addEventListener("DOMContentLoaded", function () {
            /* =========================
               FIXED MODAL LOGIC
               ========================= */
            const form = document.getElementById('purchaseForm');
            const modalElement = document.getElementById('openConfirmModal');
            const confirmModal = new bootstrap.Modal(modalElement);
            const openBtn = document.querySelector('[data-bs-target="#openConfirmModal"]');
            const confirmBtn = modalElement.querySelector('.btn-success');
            // Open Modal after validation
            openBtn.addEventListener('click', function (e) {
                e.preventDefault();
                if (form.checkValidity()) {
                    confirmModal.show();
                } else {
                    form.reportValidity();
                }
            });
            // Confirm Submit
            confirmBtn.addEventListener('click', function () {
                confirmModal.hide();
                form.submit();
            });
            /* =========================
               IMAGE PREVIEW LOGIC
               ========================= */
            const receiptInput = document.getElementById('receiptUpload');
            const uploadPlaceholder = document.getElementById('uploadPlaceholder');
            const imagePreviewContainer = document.getElementById('imagePreviewContainer');
            const imagePreview = document.getElementById('imagePreview');
            const removeImageBtn = document.getElementById('removeImage');
            receiptInput.addEventListener('change', function () {
                if (this.files && this.files[0]) {
                    const reader = new FileReader();
                    reader.onload = function (e) {
                        imagePreview.src = e.target.result;
                        uploadPlaceholder.classList.add('d-none');
                        imagePreviewContainer.classList.remove('d-none');
                    };
                    reader.readAsDataURL(this.files[0]);
                }
            });
            removeImageBtn.addEventListener('click', function (e) {
                e.preventDefault();
                e.stopPropagation();
                receiptInput.value = '';
                imagePreview.src = '';
                imagePreviewContainer.classList.add('d-none');
                uploadPlaceholder.classList.remove('d-none');
            });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const userInput = document.getElementById('user_id');
            const nameInput = document.getElementById('name');
            let typingTimer;
            const delay = 500; // wait 0.5 sec after typing
            userInput.addEventListener('keyup', function () {
                clearTimeout(typingTimer);
                const userId = this.value;
                if (userId.length < 3) {
                    nameInput.value = '';
                    return;
                }
                typingTimer = setTimeout(function () {
                    fetch("{{ route('admin.get_user_details') }}?user_id=" + userId)
                        .then(response => response.json())
                        .then(data => {
                            if (data.status) {
                                nameInput.value = data.name;
                            } else {
                                nameInput.value = '';
                            }
                        })
                        .catch(() => {
                            nameInput.value = '';
                        });
                }, delay);
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $('#usersTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.invested_by_admin') }}",
                columns: [{

                    data: 'DT_RowIndex',

                    name: 'DT_RowIndex',

                    orderable: false,

                    searchable: false

                },
                {

                    data: 'created_at',

                    name: 'created_at'

                },
                {

                    data: 'user_id',

                    name: 'user_id'

                },
                {

                    data: 'name',

                    name: 'name'

                },
                {

                    data: 'package',

                    name: 'package'

                },
                {

                    data: 'amount',

                    name: 'amount'

                }
                ]
            });
        });
    </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