@extends('Admin.layout')

@section('content')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

<style>
    .otp-master-wrapper {
        display: flex;
        justify-content: center;
        padding: 10px 20px 20px;
    }

    .otp-master-card {
        width: 100%;
        max-width: 650px;
        background: #fff;
        border-radius: 18px;
        border: 1px solid #eceef3;
        box-shadow: 0 10px 30px rgba(31, 45, 61, 0.08);
        overflow: hidden;
    }

    .otp-master-header {
        padding: 20px 24px;
        border-bottom: 1px solid #f0f1f5;
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .otp-master-icon {
        width: 45px;
        height: 45px;
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(105, 108, 255, 0.1);
        color: #696cff;
        font-size: 22px;
        flex-shrink: 0;
    }

    .otp-master-title {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #34344a;
    }

    .otp-master-subtitle {
        margin-top: 3px;
        font-size: 12px;
        color: #8b8d9a;
    }

    .otp-master-body {
        padding: 5px 24px 10px;
    }

    .otp-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 20px 0;
        border-bottom: 1px solid #f1f2f6;
    }

    .otp-row:last-child {
        border-bottom: 0;
    }

    .otp-info {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .otp-item-icon {
        width: 40px;
        height: 40px;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f6f7fb;
        color: #696cff;
        font-size: 19px;
        flex-shrink: 0;
    }

    .otp-title {
        font-size: 14px;
        font-weight: 600;
        color: #3d3d4e;
        margin-bottom: 3px;
    }

    .otp-subtitle {
        font-size: 12px;
        color: #90919d;
    }

    .form-switch {
        padding-left: 0;
        margin: 0;
        flex-shrink: 0;
    }

    .form-switch .form-check-input {
        width: 50px;
        height: 26px;
        margin: 0;
        cursor: pointer;
        box-shadow: none;
    }

    .form-check-input:checked {
        background-color: #696cff;
        border-color: #696cff;
    }

    @media(max-width: 576px) {
        .otp-master-wrapper {
            padding: 5px 0 15px;
        }

        .otp-master-header {
            padding: 18px;
        }

        .otp-master-body {
            padding: 5px 18px 10px;
        }

        .otp-row {
            padding: 18px 0;
            gap: 10px;
        }

        .otp-item-icon {
            display: none;
        }

        .otp-subtitle {
            font-size: 11px;
        }

        .otp-master-card {
            border-radius: 14px;
        }
    }
</style>

<div class="row align-items-center justify-content-between mb-3">
    <div class="col-auto">
        <h5 class="mb-0">OTP Master</h5>
    </div>
</div>

<div class="otp-master-wrapper">
    <div class="otp-master-card">

        <div class="otp-master-header">
            <div class="otp-master-icon">
                <i class="ti tabler-shield-lock"></i>
            </div>

            <div>
                <h5 class="otp-master-title">OTP Settings</h5>
                <div class="otp-master-subtitle">
                    Manage OTP verification for login access
                </div>
            </div>
        </div>

        <div class="otp-master-body">

            <div class="otp-row">
                <div class="otp-info">
                    <div class="otp-item-icon">
                        <i class="ti tabler-user-shield"></i>
                    </div>

                    <div>
                        <div class="otp-title">Admin Login OTP</div>
                        <div class="otp-subtitle">
                            Enable or disable OTP verification for admin login.
                        </div>
                    </div>
                </div>

                <div class="form-check form-switch">
                    <input
                        class="form-check-input otpToggle"
                        type="checkbox"
                        data-type="admin"
                        {{ $adminOtp->otp_enabled ? 'checked' : '' }}
                    >
                </div>
            </div>

            <div class="otp-row">
                <div class="otp-info">
                    <div class="otp-item-icon">
                        <i class="ti tabler-users"></i>
                    </div>

                    <div>
                        <div class="otp-title">User / Staff Login OTP</div>
                        <div class="otp-subtitle">
                            Enable or disable OTP verification for user and staff login.
                        </div>
                    </div>
                </div>

                <div class="form-check form-switch">
                    <input
                        class="form-check-input otpToggle"
                        type="checkbox"
                        data-type="user"
                        {{ $userOtp->otp_enabled ? 'checked' : '' }}
                    >
                </div>
            </div>

        </div>

    </div>
</div>

<div class="modal fade" id="otpStatusModal" 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">

            <div class="mb-3">
                <i class="ti tabler-shield-check fs-1 text-primary" id="otpModalIcon"></i>
            </div>

            <h5 class="fw-bold mb-2" id="otpModalTitle">
                Are you sure?
            </h5>

            <p class="text-muted mb-0" id="otpModalText"></p>

            <div class="d-flex justify-content-center gap-3 mt-4">
                <button
                    type="button"
                    class="btn btn-outline-secondary"
                    data-bs-dismiss="modal"
                >
                    Cancel
                </button>

                <button
                    type="button"
                    class="btn btn-primary"
                    id="confirmOtpBtn"
                >
                    Yes, Continue
                </button>
            </div>

        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

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

    toastr.options = {
        closeButton: true,
        progressBar: true,
        positionClass: "toast-top-right",
        timeOut: 3000
    };

    let selectedToggle = null;
    let selectedType = null;
    let selectedValue = null;
    let saved = false;

    $('.otpToggle').on('change', function() {
        selectedToggle = $(this);
        selectedType = $(this).data('type');
        selectedValue = $(this).is(':checked') ? 1 : 0;
        saved = false;

        let name = selectedType === 'admin'
            ? 'Admin Login OTP'
            : 'User / Staff Login OTP';

        if (selectedValue == 1) {
            $('#otpModalTitle').text('Enable OTP?');

            $('#otpModalText').text(
                'Are you sure you want to enable OTP verification for ' + name + '?'
            );

            $('#otpModalIcon')
                .removeClass('tabler-shield-off text-danger')
                .addClass('tabler-shield-check text-success');

            $('#confirmOtpBtn')
                .removeClass('btn-danger')
                .addClass('btn-success')
                .text('Yes, Enable');
        } else {
            $('#otpModalTitle').text('Disable OTP?');

            $('#otpModalText').text(
                'Are you sure you want to disable OTP verification for ' + name + '?'
            );

            $('#otpModalIcon')
                .removeClass('tabler-shield-check text-success')
                .addClass('tabler-shield-off text-danger');

            $('#confirmOtpBtn')
                .removeClass('btn-success')
                .addClass('btn-danger')
                .text('Yes, Disable');
        }

        $('#otpStatusModal').modal('show');
    });

    $('#otpStatusModal').on('hidden.bs.modal', function() {
        if (!saved && selectedToggle) {
            selectedToggle.prop('checked', !selectedValue);
        }

        selectedToggle = null;
        selectedType = null;
        selectedValue = null;
        saved = false;
    });

    $('#confirmOtpBtn').on('click', function() {
        let button = $(this);

        button.prop('disabled', true);

        button.text(
            selectedValue == 1
                ? 'Enabling...'
                : 'Disabling...'
        );

        $.ajax({
            url: "{{ route('otp_master_update') }}",
            type: "POST",
            data: {
                login_type: selectedType,
                otp_enabled: selectedValue,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response.success) {
                    saved = true;

                    $('#otpStatusModal').modal('hide');

                    toastr.success(
                        response.message || 'OTP setting updated successfully.'
                    );
                } else {
                    if (selectedToggle) {
                        selectedToggle.prop('checked', !selectedValue);
                    }

                    saved = true;

                    $('#otpStatusModal').modal('hide');

                    toastr.error(
                        response.message || 'Unable to update OTP setting.'
                    );
                }
            },
            error: function(xhr) {
                if (selectedToggle) {
                    selectedToggle.prop('checked', !selectedValue);
                }

                saved = true;

                $('#otpStatusModal').modal('hide');

                toastr.error(
                    xhr.responseJSON?.message || 'Something went wrong.'
                );
            },
            complete: function() {
                button.prop('disabled', false);
            }
        });
    });

});
</script>

@endsection