@extends('Admin.layout')

<style>
    .input-group {
        position: relative;
        width: 100%;
    }

    .input-group input {
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        padding: 16px 120px 16px 14px;
        border-radius: 8px !important;
    }

    button#sendOtpBtn {
        z-index: 10;
    }

    .status-badge {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
        display: inline-block;
    }

    .status-active {
        background-color: #d4edda;
        color: #155724;
    }

    .status-inactive {
        background-color: #f8d7da;
        color: #721c24;
    }
</style>

@section('content')
<div class="row align-items-center justify-content-between mb-3 m-2">
    <div class="col-auto">
        <h5>Royalty Master</h5>
    </div>
</div>


<div class="row align-items-center justify-content-center mb-3 m-2">
    <div class="col-lg-6">
        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <h6 class="fw-semibold mb-3">Add Royalty Master</h6>

                <div class="mb-3">
                    <form action="{{route('add_royalty_master')}}" method="post" id="royaltyMasterForm">
                        @csrf
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label small mb-1">Genealogy Royalty Percentage</label>
                                <input type="text" name="genealogy_royalty_percent" id="genealogy_percentage"
                                    oninput="this.value = this.value.replace(/[^0-9.]/g, '');"
                                    class="form-control" value="{{ old('genealogy_royalty_percent', $data->genealogy_royalty_percent ?? '') }}" placeholder="0%" required>
                                @error('genealogy_royalty_percent')
                                <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label small mb-1">Global Royalty Percentage</label>
                                <input type="text" name="global_royalty_percent" id="global_percentage"
                                    oninput="this.value = this.value.replace(/[^0-9.]/g, '');"
                                    class="form-control" value="{{ old('global_royalty_percent', $data->global_royalty_percent ?? '') }}" placeholder="0%" required>
                                @error('global_royalty_percent')
                                <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 ps-3 pe-5"
                                        name="otp"
                                        value="{{ old('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>
                                    @error('otp')
                                    <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>
                        </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="submit_btn" class="btn btn-primary px-5 btn-sm" data-bs-toggle="modal" data-bs-target="#confirmmodal">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="card shadow-sm">
    <div class="card-header border-0 pb-0">
        <h6 class="fw-semibold mb-0">Royalty Master List</h6>
    </div>
    <div class="card-body p-3">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="royaltyTable">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>Date</th>
                        <th>Genealogy Royalty Percentage</th>
                        <th>Global Royalty Percentage</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </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-2 fw-semibold" data-bs-dismiss="modal">Cancel</button>
                <button type="button" id="confirm_submit_btn" class="btn btn-success p-2 ms-2 fw-semibold">Yes, Sure</button>
            </div>
        </div>
    </div>
</div>

<!-- //toast  -->
<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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<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 openModalBtn     = document.getElementById('submit_btn');
        const confirmSubmitBtn = document.getElementById('confirm_submit_btn');
        const otpInput         = document.getElementById('otp');
        const form             = document.getElementById('royaltyMasterForm');
        const genealogyInput   = document.getElementById('genealogy_percentage');
        const globalInput      = document.getElementById('global_percentage');

        let timerInterval = null;
        let timeLeft = 60;
        let isSending = false;

        openModalBtn.disabled = true;

        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-white bg-${type} border-0`;

            new bootstrap.Toast(toastEl, {
                delay: 3000
            }).show();
        }

        function checkMainFields() {
            const valid =
                genealogyInput.value.trim() !== '' &&
                globalInput.value.trim() !== '';

            sendBtn.disabled = !valid;
        }

        genealogyInput.addEventListener('input', checkMainFields);
        globalInput.addEventListener('input', checkMainFields);

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

        // SEND OTP
        sendBtn.addEventListener('click', function() {

            if (isSending) return;

            isSending = true;
            sendBtn.disabled = true;
            sendBtn.innerText = "Sending...";
            const formData = new FormData(form);

            fetch("{{ route('send_royalty_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();
                        return;
                    }

                    if (data.errors) {
                        let firstError = Object.values(data.errors)[0][0];
                        showToast(firstError, "danger");
                    } else {
                        showToast(data.message || "OTP failed", "danger");
                    }

                    resetSendBtn();
                })
                .catch(err => {
                    console.error(err);
                    showToast("Something went wrong", "danger");
                    resetSendBtn();
                });

        });


        // TIMER FUNCTION
        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;
        }

        confirmSubmitBtn.addEventListener('click', function(e) {

            e.preventDefault();

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

            const formData = new FormData(form);

            fetch("{{ route('add_royalty_master') }}", {
                    method: "POST",
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        "X-Requested-With": "XMLHttpRequest"
                    },
                    body: formData
                })
                .then(res => res.json())
                .then(data => {

                    confirmSubmitBtn.disabled = false;
                    confirmSubmitBtn.innerText = "Yes, Sure";

                    const modalEl = document.getElementById('confirmmodal');
                    const modal = bootstrap.Modal.getInstance(modalEl);
                    if (modal) modal.hide();

                    if (data.status) {

                        showToast(data.message || "Royalty Master added successfully!", "success");

                        clearInterval(timerInterval);
                        resetSendBtn();
                        form.reset();
                        openModalBtn.disabled = true;

                        setTimeout(() => {
                            location.reload();
                        }, 500);

                    } else {
                        showToast(data.message || "Invalid OTP or check fields", "danger");
                    }

                })
                .catch(err => {
                    console.error(err);
                    confirmSubmitBtn.disabled = false;
                    confirmSubmitBtn.innerText = "Yes, Sure";
                    showToast("Something went wrong", "danger");
                });

        });

    });
</script>

<script>
    $(document).ready(function() {

        const table = $('#royaltyTable').DataTable({
            ajax: "{{ route('royalty_master_data') }}",

            paging: true,
            processing: false,
            searching: true,
            info: true,
            ordering: false,
            lengthChange: false,
            pageLength: 10,
            columnDefs: [{
                targets: '_all',
                className: 'text-nowrap'
            }],

            columns: [{
                    data: "DT_RowIndex",
                    name: "DT_RowIndex"
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'genealogy_royalty_percent',
                    name: 'genealogy_royalty_percent'
                },
                {
                    data: 'global_royalty_percent',
                    name: 'global_royalty_percent'
                },

                {
                    data: 'status',
                    name: 'status',
                    orderable: false,
                    searchable: false
                }
            ]
        });
        $('#toDate').on('keyup change', function() {
            table.search(this.value).draw();
        });

        $('#pageLength').on('change', function() {
            table.page.len(this.value).draw();
        });

    });
</script>

@endsection