@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>Salary Criteria</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 Salary Criteria</h6>

            <div class="mb-3">
                <form action="{{route('add_salary_criteria')}}" method="post" id="salaryCriteriaForm">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-6">

                            <label class="form-label small mb-1"> Position Name</label>
                            <select name="position" id="position" class="form-select" required>
                                <option value="">Select Rank</option>

                                <option value="Executive Officer" {{ old('position') == 'Executive Officer' ? 'selected' : '' }}>
                                    Executive Officer
                                </option>

                                <option value="Assistance Sales Manager" {{ old('position') == 'Assistance Sales Manager' ? 'selected' : '' }}>
                                    Assistance Sales Manager
                                </option>

                                <option value="Sales Manager" {{ old('position') == 'Sales Manager' ? 'selected' : '' }}>
                                    Sales Manager
                                </option>

                                <option value="Development Officer" {{ old('position') == 'Development Officer' ? 'selected' : '' }}>
                                    Development Officer
                                </option>
                                <option value="General Manager" {{ old('position') == 'General Manager' ? 'selected' : '' }}>
                                    General Manager
                                </option>
                            </select>

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

                        <div class="col-md-6">
                            <label class="form-label small mb-1"> Salary </label>
                            <input type="text" name="salary" id="salary"
                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');"
                                class="form-control" value="{{ old('salary') }}" placeholder="0%" required>
                            @error('salary')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>


                        <div class="col-md-4">
                            <label class="form-label small mb-1">First Leg</label>
                            <input type="text" name="first_leg" id="first_leg"
                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');"
                                class="form-control" value="{{ old('first_leg') }}" placeholder="0%" required>
                            @error('first_leg')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label small mb-1">Second Leg</label>
                            <input type="text" name="second_leg" id="second_leg"
                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');"
                                class="form-control" value="{{ old('second_leg') }}" placeholder="0%" required>
                            @error('second_leg')
                            <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-md-4">
                            <label class="form-label small mb-1">Third Leg</label>
                            <input type="text" name="third_leg" id="third_leg"
                                oninput="this.value = this.value.replace(/[^0-9.]/g, '');"
                                class="form-control" value="{{ old('third_leg') }}" placeholder="0%" required>
                            @error('third_leg')
                            <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">Salary Criteria</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>Position Name</th>
                        <th>Salary</th>
                        <th>First Leg</th>
                        <th>Second Leg</th>
                        <th>Third Leg</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('salaryCriteriaForm');
        const position = document.getElementById('position');
        const salary = document.getElementById('salary');
        const firstLeg = document.getElementById('first_leg');
        const secondLeg = document.getElementById('second_leg');
        const thirdLeg = document.getElementById('third_leg');

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

        openModalBtn.disabled = true;
        sendBtn.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 checkFields() {
        const valid =
            position.value.trim() !== '' &&
            salary.value.trim() !== '' &&
            firstLeg.value.trim() !== '' &&
            secondLeg.value.trim() !== '' &&
            thirdLeg.value.trim() !== '';

        sendBtn.disabled = !valid;
    }

       [position, salary, firstLeg, secondLeg, thirdLeg].forEach(el => {
        el.addEventListener('input', checkFields);
        el.addEventListener('change', checkFields);
    });

        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_salary_criteria_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_salary_criteria') }}", {
                    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 Criteria 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('salary_criteria_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: 'position',
                    name: 'position'
                },
                {
                    data: 'salary',
                    name: 'salary'
                },
                {
                    data: 'first_leg',
                    name: 'first_leg'
                },
                {
                    data: 'second_leg',
                    name: 'second_leg'
                },
                {
                    data: 'third_leg',
                    name: 'third_leg'
                },
                {
                    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>
<script>
    const positionData = @json($criteria);
</script>
<script>
    document.getElementById('position').addEventListener('change', function () {

    let selectedPosition = this.value;

    let data = positionData.find(item => item.position === selectedPosition);

    if (data) {
        document.getElementById('salary').value = data.salary;
        document.getElementById('first_leg').value = data.first_leg;
        document.getElementById('second_leg').value = data.second_leg;
        document.getElementById('third_leg').value = data.third_leg;
    } else {
        document.getElementById('salary').value = '';
        document.getElementById('first_leg').value = '';
        document.getElementById('second_leg').value = '';
        document.getElementById('third_leg').value = '';
    }
});
</script>
@endsection