@extends('frontend.layout.app')
@section('content')
    <div class="breadcumb-wrapper" data-bg-src="{{ asset('frontend/assets/img/breadcumb/breadcumb-bg.jpg') }}">
        <div class="container z-index-common">
            <div class="breadcumb-content">
                <h1 class="breadcumb-title">Login as Vendor</h1>
                <div class="breadcumb-menu-wrap">
                    <ul class="breadcumb-menu">
                        <li><a href="{{ route('index') }}">Home</a></li>
                        <li>Login as Vendor</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <style>
        .vendor-login-card {
            border: 2px solid #B18746;
            border-radius: 12px;
            background-color: #FFF8F0;
        }

        .vendor-login-title {
            color: #B18746;
            background-color: #FCF4E8;
            border-radius: 8px;
            padding: 10px;
        }

        .btn-vendor-login {
            background: linear-gradient(90deg, #d4af37, #b18746);
            color: #fff !important;
            border: none;
        }

        .btn-vendor-login:hover {
            background: linear-gradient(90deg, #b18746, #d4af37);
        }
        .otp-test-message {
            font-size: 1.1em;
            color: #d4af37;
            background: #fff5df;
            border-radius: 6px;
            padding: 8px 10px;
            margin-top: 10px;
            margin-bottom: 10px;
            font-weight: bold;
            letter-spacing: 2px;
            display: inline-block;
        }
    </style>

    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-md-6 col-lg-5">

                <div class="card shadow-sm vendor-login-card">
                    <div class="card-body p-4">

                        <h3 class="text-center mb-4 vendor-login-title">Vendor Login</h3>

                        {{-- LOGIN FORM --}}
                        <form id="vendor-login-form">
                            @csrf

                            <div class="mb-3">
                                <label class="form-label" style="color:#B18746">Phone Number</label>
                                <input type="text" id="vendor_phone" class="form-control" required>
                            </div>

                            <div class="d-grid">
                                <button type="submit" class="btn btn-vendor-login" id="send-otp-btn">
                                    Send OTP
                                </button>
                            </div>

                            <div id="login-status" class="text-center mt-2"></div>
                            <div id="otp-test-message" class="text-center mt-2"></div>
                        </form>


                        {{-- OTP FORM --}}
                        <form id="vendor-otp-form" style="display:none;">
                            @csrf

                            <input type="hidden" id="otp_vendor_phone">

                            <div class="mt-2 small text-muted">
                                OTP sent to <span id="otp-phone-label"></span>. <button type="button" class="btn btn-link p-0"
                                    id="change-phone-btn" style="color:#B18746;">Change</button>
                            </div>

                            <div id="otp-test-message-form" class="text-center mt-2"></div>

                            <div class="mb-3 mt-3">
                                <label class="form-label" style="color:#B18746">Enter OTP</label>
                                <input type="text" id="otp_code" class="form-control" maxlength="6">
                            </div>

                            <div class="d-grid">
                                <button type="button" class="btn btn-vendor-login" id="verify-otp-btn">
                                    Verify OTP
                                </button>
                            </div>

                            <div class="text-center mt-2">
                                <button type="button" class="btn btn-link p-0" id="resend-otp-btn" style="color:#B18746;"
                                    disabled>
                                    Resend OTP (<span id="resend-timer">30</span>s)
                                </button>
                            </div>

                            <div id="otp-status" class="text-center mt-2"></div>

                        </form>

                    </div>
                </div>

                <div class="text-center mt-4">
                    <a href="{{ route('index') }}" class="btn btn-link" style="color:#B18746;">
                        Back to Home
                    </a>
                </div>

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


    <script>
        const vendorLoginForm = document.getElementById('vendor-login-form');
        const vendorOtpForm = document.getElementById('vendor-otp-form');

        const vendorPhoneInput = document.getElementById('vendor_phone');

        const otpVendorPhoneInput = document.getElementById('otp_vendor_phone');
        const verifyOtpBtn = document.getElementById('verify-otp-btn');
        const resendOtpBtn = document.getElementById('resend-otp-btn');
        const resendTimerEl = document.getElementById('resend-timer');
        const otpPhoneLabel = document.getElementById('otp-phone-label');
        const changePhoneBtn = document.getElementById('change-phone-btn');

        const loginStatus = document.getElementById('login-status');
        const otpStatus = document.getElementById('otp-status');
        const otpTestMessageLogin = document.getElementById('otp-test-message');
        const otpTestMessageForm = document.getElementById('otp-test-message-form');

        let lastOtp = null;

        let resendInterval = null;

        function startResendTimer(seconds) {
            let remaining = seconds;
            resendOtpBtn.disabled = true;
            resendTimerEl.textContent = String(remaining);

            if (resendInterval) clearInterval(resendInterval);
            resendInterval = setInterval(() => {
                remaining -= 1;
                resendTimerEl.textContent = String(Math.max(remaining, 0));
                if (remaining <= 0) {
                    clearInterval(resendInterval);
                    resendInterval = null;
                    resendOtpBtn.disabled = false;
                    resendOtpBtn.innerText = 'Resend OTP';
                }
            }, 1000);
        }

        function showOtpForm(phone) {
            vendorLoginForm.style.display = 'none';
            vendorOtpForm.style.display = 'block';
            otpVendorPhoneInput.value = phone;
            otpPhoneLabel.textContent = phone;
            document.getElementById('otp_code').value = '';
            otpStatus.innerHTML = '';
            // Show the OTP in the OTP form (for testing/demo purposes)
            if (lastOtp) {
                otpTestMessageForm.innerHTML = '<div class="otp-test-message">Test OTP: <b>' + lastOtp + '</b></div>';
            } else {
                otpTestMessageForm.innerHTML = '';
            }
            startResendTimer(30);
        }

        function showPhoneForm() {
            vendorOtpForm.style.display = 'none';
            vendorLoginForm.style.display = 'block';
            loginStatus.innerHTML = '';
            otpTestMessageLogin.innerHTML = '';
        }

        /* =====================
        SEND OTP
        ===================== */

        vendorLoginForm.addEventListener('submit', function(e) {

            e.preventDefault();

            loginStatus.innerHTML = '';
            otpTestMessageLogin.innerHTML = '';

            const phone = vendorPhoneInput.value.trim();
            if (!phone) {
                loginStatus.innerHTML = '<span class="text-danger">Enter phone number</span>';
                return;
            }

            fetch("{{ route('vendor.send-otp') }}", {
                    method: "POST",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        vendor_phone: phone
                    })
                })

                .then(async (res) => {
                    const data = await res.json().catch(() => ({}));
                    return { ok: res.ok, status: res.status, data };
                })

                .then(({ ok, data }) => {

                    if (ok && data.success) {
                        lastOtp = data.otp ? data.otp : null;

                        loginStatus.innerHTML =
                            '<span class="text-success">OTP sent to your phone</span>';
                        if (lastOtp) {
                            otpTestMessageLogin.innerHTML =
                                '<div class="otp-test-message">Test OTP: <b>' + lastOtp + '</b></div>';
                        } else {
                            otpTestMessageLogin.innerHTML = '';
                        }

                        showOtpForm(phone);

                    } else {

                        loginStatus.innerHTML =
                            '<span class="text-danger">' + (data.message || 'Login failed') + '</span>';

                    }

                })

                .catch(() => {
                    loginStatus.innerHTML =
                        '<span class="text-danger">Server error</span>';
                });

        });

        changePhoneBtn.addEventListener('click', function() {
            showPhoneForm();
            vendorPhoneInput.focus();
        });

        resendOtpBtn.addEventListener('click', function() {
            otpStatus.innerHTML = '';
            otpTestMessageForm.innerHTML = '';
            const phone = otpVendorPhoneInput.value.trim();
            if (!phone) return;

            resendOtpBtn.disabled = true;
            resendOtpBtn.innerText = 'Sending...';

            fetch("{{ route('vendor.resend-otp') }}", {
                    method: "POST",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        vendor_phone: phone
                    })
                })
                .then(async (res) => {
                    const data = await res.json().catch(() => ({}));
                    return { ok: res.ok, status: res.status, data };
                })
                .then(({ ok, data }) => {
                    if (ok && data.success) {
                        lastOtp = data.otp ? data.otp : null;
                        otpStatus.innerHTML =
                            '<span class="text-success">' + (data.message || 'OTP resent') + '</span>';
                        if (lastOtp) {
                            otpTestMessageForm.innerHTML =
                                '<div class="otp-test-message">Test OTP: <b>' + lastOtp + '</b></div>';
                        } else {
                            otpTestMessageForm.innerHTML = '';
                        }
                        resendOtpBtn.innerText = 'Resend OTP';
                        startResendTimer(30);
                    } else {
                        resendOtpBtn.disabled = false;
                        resendOtpBtn.innerText = 'Resend OTP';
                        otpStatus.innerHTML = '<span class="text-danger">' + (data.message || 'Failed to resend OTP') + '</span>';
                        otpTestMessageForm.innerHTML = '';
                    }
                })
                .catch(() => {
                    resendOtpBtn.disabled = false;
                    resendOtpBtn.innerText = 'Resend OTP';
                    otpStatus.innerHTML = '<span class="text-danger">Server error</span>';
                    otpTestMessageForm.innerHTML = '';
                });
        });

        /* =====================
        OTP VERIFY
        ===================== */

        verifyOtpBtn.addEventListener('click', function() {

            otpStatus.innerHTML = '';

            const phone = otpVendorPhoneInput.value.trim();
            const otp = document.getElementById('otp_code').value.trim();

            if (!otp) {
                otpStatus.innerHTML =
                    '<span class="text-danger">Enter OTP</span>';
                return;
            }

            verifyOtpBtn.disabled = true;
            verifyOtpBtn.innerText = "Verifying...";


            fetch("{{ url('/vendor/verify-otp') }}", {

                    method: "POST",

                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },

                    body: JSON.stringify({
                        vendor_phone: phone,
                        otp: otp
                    })

                })

                .then(async (res) => {
                    const data = await res.json().catch(() => ({}));
                    return { ok: res.ok, status: res.status, data };
                })

                .then(({ data }) => {

                    verifyOtpBtn.disabled = false;
                    verifyOtpBtn.innerText = "Verify OTP";


                    if (data.status === 'accepted') {

                        otpStatus.innerHTML =
                            '<span class="text-success">Login successful</span>';

                        setTimeout(() => {
                            window.location.href = "{{ route('vendor.dashboard') }}";
                        }, 1000);

                    } else if (data.status === 'pending') {

                        otpStatus.innerHTML =
                            '<span class="text-warning">Your vendor account is not yet approved</span>';

                    } else if (data.status === 'rejected') {

                        otpStatus.innerHTML =
                            '<span class="text-danger">Your vendor account was rejected</span>';

                    } else if (data.status === 'invalid_otp') {

                        otpStatus.innerHTML =
                            '<span class="text-danger">Invalid OTP</span>';

                    } else {

                        otpStatus.innerHTML =
                            '<span class="text-danger">' + (data.message || 'Unexpected error') + '</span>';

                    }

                })

                .catch(() => {

                    verifyOtpBtn.disabled = false;
                    verifyOtpBtn.innerText = "Verify OTP";

                    otpStatus.innerHTML =
                        '<span class="text-danger">Server error</span>';

                });

        });
    </script>
@endsection