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

    .input-group .send-otp {
        position: absolute;
        right: 6px;
        top: 6px;
        bottom: 6px;
        padding: 0 16px;
        color: #fff;
        border: none;
        border-radius: 8px !important;
        font-size: 16px;
        font-family: "DM Sans";
        font-weight: 400;
        cursor: pointer;
        transition: background .2s ease;
    }
</style>
@section('content')
<div class="row align-items-center justify-content-between mb-3 m-2">
    <div class="col-auto">
        <h5>FiveStar Level Master</h5>
    </div>
    <div class="col-auto">
        <a href="{{ route('level_master_5star_history') }}"><button class="btn btn-primary">5 Star Level Master History</button> </a>
    </div>
</div>
<div class="card shadow-sm">
    <div class="card-body">

        <h6 class="fw-semibold mb-3">5 Star Level Master</h6>

        <div class="mb-3">
            <form action="{{route('add_5star_level_master')}}" method="post" id="levelMasterForm">
                @csrf
                <div class="row g-3">
                    <!-- <h5>Unit 1</h5> -->
                    <div class="col-md-4">
                        <label class="form-label small mb-1">
                            Level-1
                        </label>
                        <input type="number" name="level_1" class="form-control"
                            step="any" value="{{old('level_1', isset($data->level_1) ? floatval($data->level_1) : '')}}" placeholder="0%">
                        @error('level_1')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>


                    <div class="col-md-4">
                        <label class="form-label small mb-1">
                            Level-2
                        </label>
                        <input type="number" class="form-control" placeholder="0%"
                            step="any" name="level_2"
                            value="{{old('level_2', isset($data->level_2) ? floatval($data->level_2) : '')}}">
                        @error('level_2')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>


                    <div class="col-md-4">
                        <label class="form-label small mb-1">
                            Level-3
                        </label>
                        <input type="number" class="form-control" placeholder="0%" step="any"
                            name="level_3"
                            value="{{old('level_3', isset($data->level_3) ? floatval($data->level_3) : '')}}">
                        @error('level_3')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>


                    <div class="col-md-4">
                        <label class="form-label small mb-1">
                            Level-4
                        </label>
                        <input type="number" class="form-control" placeholder="0%"
                            step="any"
                            name="level_4"
                            value="{{old('level_4', isset($data->level_4) ? floatval($data->level_4) : '')}}">
                        @error('level_4')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>


                    <div class="col-md-4">
                        <label class="form-label small mb-1">
                            Level-5
                        </label>
                        <input type="number" class="form-control" placeholder="0%"
                            step="any"
                            name="level_5"
                            value="{{old('level_5', isset($data->level_5) ? floatval($data->level_5): '')}}">
                        @error('level_5')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>


                    <div class="col-md-4">
                        <label class="form-label small mb-1">
                            Level-6
                        </label>
                        <input type="number" class="form-control" placeholder="0%"
                            step="any" name="level_6"
                            value="{{old('level_6', isset($data->level_6) ? floatval($data->level_6): '')}}">
                        @error('level_6')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>


                    <div class="col-md-4">
                        <label class="form-label small mb-1">
                            Level-7
                        </label>
                        <input type="number" class="form-control" placeholder="0%"
                            step="any" name="level_7"
                            value="{{old('level_7', isset($data->level_7) ? floatval($data->level_7): '')}}">
                        @error('level_7')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>



                    <div class="col-md-4">
                        <label class="form-label small mb-1">
                            Level-8
                        </label>
                        <input type="number" class="form-control" placeholder="0%"
                            step="any" name="level_8"
                            value="{{old('level_8', isset($data->level_8) ? floatval($data->level_8): '')}}">
                        @error('level_8')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>


                    <div class="col-md-4">
                        <label class="form-label small mb-1">
                            Level-9
                        </label>
                        <input type="number" class="form-control"
                            step="any" placeholder="0%" name="level_9"
                            value="{{old('level_9', isset($data->level_9) ? floatval($data->level_9): '')}}">
                        @error('level_9')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>


                    <div class="col-md-4">
                        <label class="form-label small mb-1">
                            Level-10
                        </label>
                        <input type="number" class="form-control"
                            step="any" placeholder="0%" name="level_10"
                            value="{{old('level_10', isset($data->level_10) ? floatval($data->level_10): '')}}">
                        @error('level_10')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>



                    <div class="col-md-4">
                        <label class="form-label small mb-1">
                            Level-11
                        </label>
                        <input type="number" class="form-control" placeholder="0%"
                            step="any" name="level_11" value="{{old('level_11', isset($data->level_11) ? floatval($data->level_11): '')}}">
                        @error('level_11')
                        <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>


                    <div class="col-md-4">
                        <label class="form-label small mb-1">
                            Level-12
                        </label>
                        <input type="number" class="form-control" placeholder="0%"
                            step="any" name="level_12" value="{{old('level_12', isset($data->level_12) ? floatval($data->level_12): '')}}">
                        @error('level_12')
                        <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"
                                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>
                <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="openConfirmBtn" class="btn btn-primary px-5 btn-sm" data-bs-toggle="modal" data-bs-target="#confirmmodal" disabled>Submit</button>
                </div>

            </form>
        </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="button" id="submit_btn" form="levelMasterForm" class="btn btn-success p-3 ms-2 fw-semibold">
                    Yes, Sure
                </button>
            </div>
        </div>
    </div>
</div>
<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 openModalBtn = document.getElementById('openConfirmBtn');
        const submitBtn = document.getElementById('submit_btn');
        const otpInput = document.getElementById('otp');
        const form = document.getElementById('levelMasterForm');
        const requiredInputs = document.querySelectorAll('#levelMasterForm input[name^="level_"]');
        let timerInterval = null;
        let timeLeft = 60;
        let isSending = false;

        // TOAST HELPER
        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 checkLevelFields() {
            const allFilled = Array.from(requiredInputs).every(input => input.value.trim() !== "");
            sendBtn.disabled = !allFilled;
        }

        requiredInputs.forEach(input => input.addEventListener('input', checkLevelFields));
        checkLevelFields();

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

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

            const allFilled = Array.from(requiredInputs).every(input => input.value.trim() !== "");

            if (!allFilled) {
                showToast("Please fill all fields before sending OTP", "danger");
                return;
            }
            if (isSending) return;
            isSending = true;
            sendBtn.disabled = true;
            sendBtn.innerText = "Sending...";

            const formData = new FormData(form);

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

                    if (!data.status) {
                        document.querySelectorAll('.ajax-error').forEach(el => el.remove());
                        if (data.errors) {
                            Object.keys(data.errors).forEach(function(field) {
                                let message = data.errors[field][0];
                                let input = document.querySelector(`[name="${field}"]`);
                                if (input) {

                                    let error = document.createElement('small');
                                    error.className = 'text-danger ajax-error';
                                    error.innerText = message;
                                    input.parentNode.appendChild(error);
                                }

                            });

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

                    showToast(data.message || "OTP sent successfully!", "success");
                    startTimer();

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

        // OTP Timer
        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;
        }

        // AJAX Submit inside modal
        submitBtn.addEventListener('click', function(e) {
            e.preventDefault();
            submitBtn.disabled = true;
            submitBtn.innerText = 'Processing...';

            const formData = new FormData(form);

            fetch("{{ route('add_5star_level_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 || "Level Master added successfully!", "success");
                        clearInterval(timerInterval);
                        sendBtn.innerText = "Send OTP";
                        sendBtn.disabled = false;
                        form.reset();
                        openModalBtn.disabled = true;
                    } else {
                        showToast(data.message || "Invalid OTP or check all fields", "danger");
                        openModalBtn.disabled = false;
                    }
                })
                .catch(err => {
                    console.error(err);
                    submitBtn.disabled = false;
                    submitBtn.innerText = 'Yes, Sure';
                    showToast("Something went wrong", "danger");
                });
        });

    });

    document.querySelectorAll('input').forEach(function(input) {
        input.addEventListener('input', function() {

            let error = this.parentNode.querySelector('.text-danger');
            if (error) {
                error.innerText = '';
            }

        });

    });
</script>
@endsection