@extends('Admin.layout')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Lora&family=Yeseva+One&display=swap');

    * {
        --hibiscus-love: #fc465c;
        --fine-ii: #f9b198;
        --afl: #f9b198;
        --mexican-sky: #cfdddd;
        --brasillia-peach: #0A1F44;
        --free: #ffc107;
        --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 {
        width: 400px;
        border-radius: 0.6em;
        padding: 20px;
        background-color: var(--form-bg) !important;
        margin: 20px auto;
    }

    .form {
        padding: 30px 40px;
    }

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

    .bg-bliss {
        margin-bottom: 10px;
        padding-bottom: 20px;
        position: relative;
        color: var(--text-color) !important;

    }

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

    .bg-bliss {
        border-radius: 6px;
        background: var(--form-bg) !important;
        border: var(--quadrary-color) solid 2px !important;
        display: block;
        width: 100%;
        color: var(--text-color) !important;

    }

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


    }

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

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

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

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

    .bg-bliss.error small {
        visibility: visible;
    }

    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;
    }

    .btn-submit {
        background-color: #ffc107 !important;
        color: black !important;
    }
</style>
@section('content')
<div class="d-flex justify-content-between">
    <div class="col-auto">
        <h5 class="d-flex align-items-center">
            Transfer Master
        </h5>
    </div>

</div>
<!-- <div class="row justify-content-center">
                            <div class="col-lg-6"> -->
<div class="container p-8 mt-0">
    <!-- <h6>Gold Master</h6> -->
    <form action="{{route('add_transfer_master')}}" method="post" id="transferMasterForm">
        @csrf
        <div class="row g-3">



            <h6 class="fw-bold text-white mb-0">Transfer Commission</h6>

            <div class="col-lg-3">
                <label class="form-label">Commission Percentage(%)</label>
                <input type="text" name="commission_percentage"
                    value="{{ old('commission_percentage', isset($data->commission_percentage) ? floatval($data->commission_percentage) : '') }}"
                    class="form-control bg-bliss" placeholder="5%"
                    oninput="this.value = this.value.replace(/[^0-9.]/g, '');">
                @error('commission_percentage')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>
            <div class="col-lg-3">
                <label class="form-label">Referral Percentage(%)</label>
                <input type="text" name="referral_percentage"
                    value="{{ old('referral_percentage', isset($data->referral_percentage) ? floatval($data->referral_percentage) : '') }}"
                    class="form-control bg-bliss" placeholder="5%"
                    oninput="this.value = this.value.replace(/[^0-9.]/g, '');">
                @error('referral_percentage')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>
            <div class="col-lg-3">
                <label class="form-label">Promoter Percentage(%)</label>
                <input type="text" name="promoter_percentage"
                    value="{{ old('promoter_percentage', isset($data->promoter_percentage) ? floatval($data->promoter_percentage) : '') }}"
                    class="form-control bg-bliss" placeholder="5%"
                    oninput="this.value = this.value.replace(/[^0-9.]/g, '');">
                @error('promoter_percentage')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <div class="col-lg-3">
                <label class="form-label">Company Percentage(%)</label>
                <input type="text" name="company_percentage"
                    value="{{ old('company_percentage', isset($data->company_percentage) ? floatval($data->company_percentage) : '') }}"
                    class="form-control bg-bliss" placeholder="5%"
                    oninput="this.value = this.value.replace(/[^0-9.]/g, '');">
                @error('company_percentage')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>
            <h6 class="fw-bold text-white mb-0">Company Sell Value Percentage</h6>

            <div class="col-lg-6">
                <label class="form-label">Transfer Percentage(%)</label>
                <input type="text" name="transfer_percentage"
                    value="{{ old('transfer_percentage', isset($data->transfer_percentage) ? floatval($data->transfer_percentage) : '') }}"
                    class="form-control bg-bliss" placeholder="5%"
                    oninput="this.value = this.value.replace(/[^0-9.]/g, '');">
                @error('transfer_percentage')
                <small class="text-danger">{{ $message }}</small>
                @enderror
            </div>

            <div class="col-lg-12">
                <label class="form-label mt-3" for="otp">Verify OTP</label>

                <div class="position-relative">
                    <input type="text" id="otp" class="form-control bg-bliss ps-3 pe-5" name="otp"
                        placeholder="Enter OTP" maxlength="6">
                    <button type="button"
                        class="btn btn-primary btn-sm position-absolute top-50 end-0 translate-middle-y me-1"
                        id="sendOtpBtn" disabled>
                        Send OTP
                    </button>

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

            <div class="d-flex justify-content-center gap-3 mt-4">
                <!-- <button type="reset" class="btn btn-label-secondary px-5 btn-sm">Discard</button> -->
                <button type="button" id="confirm_modal" class="btn btn-submit px-5 btn-sm" data-bs-toggle="modal"
                    data-bs-target="#confirmmodal" disabled>Submit</button>
            </div>
        </div>
</div>

<div class="modal fade" id="confirmmodal" 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 submit?</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" data-bs-dismiss="modal">
                    Cancel
                </button>
                <button type="submit " id="submit_btn" form="tansferMasterForm"
                    class="btn btn-success p-3 ms-2 fw-semibold">
                    Yes, Sure
                </button>
            </div>
        </div>
    </div>
</div>

<!-- </div>
                        </div> -->
<div class="card p-0 m-2 mt-4">
  <div class="row m-3 g-3 align-items-center justify-content-between">

                        <!-- LEFT -->
                        <div class="col-12 col-lg-auto">

                            <select id="pageLength" class="form-select">
                                <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-auto">

                            <div class="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center gap-2">


                                <input type="text" id="toDate" class="form-control" placeholder="Search table...">

                                <button class="btn btn-label-secondary">
                                    Export
                                </button>
                            </div>

                        </div>

                    </div>


    <div class="table-responsive pt-0 pb-2">
        <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
            <div class="justify-content-between dt-layout-table">
                <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                    <table class="table table-hover align-middle mb-0" id="usersTable">

                        <thead class="table-light">
                            <tr>
                                <th class="text-nowrap">Sno</th>
                                <th class="text-nowrap">Date</th>

                                <th class="text-nowrap">Commission Percentage</th>
                                <th class="text-nowrap">Referral Percentage</th>
                                <th class="text-nowrap">Promoter Percentage</th>
                                <th class="text-nowrap">Company Percentage</th>
                                <th class="text-nowrap">Transfer Percentage</th>
                                <th class="text-nowrap">Status</th>
                            </tr>
                        </thead>

                        <tbody></tbody>

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

<div class="position-fixed top-0 end-0 p-3" style="z-index: 9999; max-width: 100%;">
    <div id="ajaxToast" class="toast align-items-center text-bg-success border-0" role="alert" aria-live="assertive"
        aria-atomic="true" data-bs-delay="3000" data-bs-autohide="true" style="min-width: 250px; max-width: 90vw;">
        <div class="d-flex">
            <div class="toast-body">
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                aria-label="Close"></button>
        </div>
    </div>
</div>


<script>
    function showToast(message, type = 'danger') {
        const toastEl = document.getElementById('liveToast');
        if (!toastEl) return;
        const toastBody = toastEl.querySelector('.toast-body');
        toastBody.innerText = message;
        toastEl.className = `toast align-items-center text-bg-${type} border-0 show`;
        const toast = new bootstrap.Toast(toastEl, {
            delay: 3000
        });
        toast.show();
    }
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {

        const sendBtn        = document.getElementById('sendOtpBtn');
        const openConfirmBtn = document.getElementById('confirm_modal');
        const otpInput       = document.getElementById('otp');
        const submitBtn      = document.getElementById('submit_btn');
        const form           = document.getElementById('transferMasterForm');
        const inputs         = document.querySelectorAll('#transferMasterForm input[type="text"]:not(#otp)');
        let   timerInterval  = null;
        let   timeLeft       = 60;
        let   isSending      = false;

        function showToast(message, type = 'success') {
            const toastEl = document.getElementById('ajaxToast');
            if (!toastEl) return;
            toastEl.querySelector('.toast-body').innerText = message;
            toastEl.className = `toast align-items-center text-bg-${type} border-0 show`;
            new bootstrap.Toast(toastEl, {
                delay: 3000
            }).show();
        }

        function checkFields() {

            let allFilled = true;

            inputs.forEach(input => {
                if (input.value.trim() === "") {
                    allFilled = false;
                }
            });

            sendBtn.disabled = !allFilled;
        }

        inputs.forEach(input => {
            input.addEventListener('input', checkFields);
        });
        checkFields();

        otpInput.addEventListener('input', function() {
            openConfirmBtn.disabled = otpInput.value.trim().length !== 6;
        });

        sendBtn.addEventListener('click', function() {
            if (isSending) return;
                  isSending         = true;
                  sendBtn.disabled  = true;
                  sendBtn.innerText = "Sending...";
            const formData          = new FormData(form);

            fetch("{{ route('send_transfer_otp') }}", {
                    method: "POST",
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        "X-Requested-With": "XMLHttpRequest"
                    },
                      body: formData
                })
                .then(res => res.json())
                .then(data => {
                    if (data.status) {
                        showToast(data.message || "OTP sent successfully!", "success");
                        startTimer();
                    } else {
                        showToast(data.message || "OTP failed", "danger");
                        resetSendBtn();
                    }
                })
                .catch(err => {
                    console.error(err);
                    showToast("Something went wrong", "danger");
                    resetSendBtn();
                });
        });

        function startTimer() {
            clearInterval(timerInterval);
            timeLeft = 60;
            sendBtn.disabled = true;

            timerInterval = setInterval(() => {
                sendBtn.innerText = `Resend in ${timeLeft}s`;
                timeLeft--;

                if (timeLeft < 0) {
                    clearInterval(timerInterval);
                    sendBtn.disabled = false;
                    sendBtn.innerText = "Resend OTP";
                    isSending = false;
                }
            }, 1000);
        }

        function resetSendBtn() {
            sendBtn.disabled = false;
            sendBtn.innerText = "Send OTP";
            isSending = false;
        }

        submitBtn.addEventListener('click', function(e) {
            e.preventDefault();
            submitBtn.disabled = true;
            submitBtn.innerText = 'Processing...';

            const formData = new FormData(form);

            fetch("{{ route('add_transfer_master') }}", {
                    method: "POST",
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        "X-Requested-With": "XMLHttpRequest"
                    },
                    body: formData
                })
                .then(res => res.json())
                .then(data => {
                          submitBtn.disabled  = false;
                          submitBtn.innerText = 'Yes, Sure';
                    const modalEl             = document.getElementById('confirmmodal');
                    const modal               = bootstrap.Modal.getInstance(modalEl);
                    if (modal) modal.hide();

                    if (data.status) {
                        showToast(data.message || "Transfer Master added successfully!", "success");
                        setTimeout(() => {
                            location.reload();
                        }, 1500);
                        clearInterval(timerInterval);
                        sendBtn.innerText = "Send OTP";
                        sendBtn.disabled = false;
                        form.reset();
                        openConfirmBtn.disabled = true;
                    } else {
                        showToast(data.message || "Invalid OTP or check all fields", "danger");
                        openConfirmBtn.disabled = false;
                    }
                })
                .catch(err => {
                    console.error(err);
                    submitBtn.disabled = false;
                    submitBtn.innerText = 'Yes, Sure';
                    showToast("Something went wrong", "danger");
                });
        });

    });
</script>
<script>
    $(document).ready(function() {
        const table = $('#usersTable').DataTable({
            ajax: "{{ route('transfer_master_data') }}",
            searching: true,
            paging: true,
            info: true,
            lengthChange: false,
            pageLength: 10,
            ordering: false,
            columnDefs: [{
                targets: '_all',
                className: 'text-nowrap'
            }],

            columns: [

                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },

                {
                    data: 'created_at',
                    name: 'created_at'
                },


                {
                    data: 'commission_percentage',
                    name: 'commission_percentage'
                },

                {
                    data: 'referral_percentage',
                    name: 'referral_percentage'
                },

                {
                    data: 'promoter_percentage',
                    name: 'promoter_percentage'
                },

                {
                    data: 'company_percentage',
                    name: 'company_percentage'
                },
                {
                    data: 'transfer_percentage',
                    name: 'transfer_percentage'
                },
                {
                    data: 'status',
                    name: 'status',
                    orderable: false,
                    searchable: false
                },
            ]
        });

        // Custom search
        $('#toDate').on('keyup change', function() {
            table.search(this.value).draw();
        });

    });
</script>
@endsection