<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Airtime Sales | Merchant Login</title>
    <!-- Vendor styles -->
    <link rel="stylesheet" href="{{ url('public/theme_assets/vendor/fontawesome/css/font-awesome.css') }}" />
    <link rel="stylesheet" href="{{ url('public/theme_assets/vendor/metisMenu/dist/metisMenu.css') }}" />
    <link rel="stylesheet" href="{{ url('public/theme_assets/vendor/animate.css/animate.css') }}" />
    <link rel="stylesheet" href="{{ url('public/theme_assets/vendor/bootstrap/dist/css/bootstrap.css') }}" />

    <!-- App styles -->
    <link rel="stylesheet" href="{{ url('public/theme_assets/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css') }}" />
    <link rel="stylesheet" href="{{ url('public/theme_assets/fonts/pe-icon-7-stroke/css/helper.css') }}" />
    <link rel="stylesheet" href="{{ url('public/theme_assets/styles/style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
    <style>
        /* Ensures the phone dropdown takes up the full width of the Bootstrap form-control */
        .iti { width: 100%; } 
    </style>
</head>
<body class="blank">

<!-- Simple splash screen-->
<div class="splash"> <div class="color-line"></div><div class="splash-title"><h1>Homer - Responsive Admin Theme</h1><p>Special Admin Theme for small and medium webapp with very clean and aesthetic style and feel. </p><div class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div> </div> </div>
<!--[if lt IE 7]>
<p class="alert alert-danger">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<div class="color-line"></div>

<div class="login-container">

<div class="row">
        <div class="col-md-12">
            <div class="text-center m-b-md">
                <h3>Merchant Login</h3>
                <!-- <small>This is the best app ever!</small> -->
                <div class="text-center w-75 m-auto">
                    <!-- <p class="text-muted mb-4">Admin Panel Login</p> -->
                    @if (Session::has('login-error'))
                    <p class=" text-danger mb-4"> {{ Session::get('login-error') }} </p>
                    @endif
                    @include('commons.notifications')
                </div>
            </div>
            <div class="hpanel">
                <div class="panel-body">
                    <form action="{{ url('merchant/login') }}" id="loginForm" method="POST">
                        {{ csrf_field() }}
                        
                        <div class="form-group">
                            <label class="control-label" for="phone">Phone Number</label>
                            <input type="tel" id="phone" class="form-control" placeholder="" title="Please enter your phone number" required="">
                            <input type="hidden" name="phone_number" id="full_phone_number">
                            
                            <span id="phone-error" class="help-block small text-danger" style="display: none;">Invalid phone number format.</span>
                            
                            <span class="help-block small text-muted">Your registered phone number</span>
                        </div>
                        
                        <div class="form-group">
                            <label class="control-label" for="password">Merchant PIN</label>
                            <input type="password" title="Please enter your PIN" placeholder="******" required="" name="pin" id="password" class="form-control">
                            <span class="help-block small">Your merchant pin</span>
                        </div>
                        
                        <div class="checkbox"></div>
                        
                        <button type="submit" class="btn btn-warning btn-block">Login</button>
                        <p class="text-center" style="padding: 10px;">-- OR --</p>
                        <a class="btn btn-danger btn-block" href="{{ url('merchant/register') }}">Register</a>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 text-center">
            <strong></strong> {{ date('Y') }} Click Mobile Ltd. <br/>
        </div>
    </div>
</div>


<!-- Vendor scripts -->
<script src="{{ url('public/theme_assets/vendor/jquery/dist/jquery.min.js') }}"></script>
<script src="{{ url('public/theme_assets/vendor/jquery-ui/jquery-ui.min.js') }}"></script>
<script src="{{ url('public/theme_assets/vendor/slimScroll/jquery.slimscroll.min.js') }}"></script>
<script src="{{ url('public/theme_assets/vendor/bootstrap/dist/js/bootstrap.min.js') }}"></script>
<script src="{{ url('public/theme_assets/vendor/metisMenu/dist/metisMenu.min.js') }}"></script>
<script src="{{ url('public/theme_assets/vendor/iCheck/icheck.min.js') }}"></script>

<!-- App scripts -->
<script src="{{ url('public/theme_assets/scripts/homer.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script>
    $(document).ready(function() {
        var phoneInputField = document.querySelector("#phone");
        var errorMsg = $("#phone-error");
        var formGroup = $("#phone").closest('.form-group');
        var submitBtn = $('#loginForm button[type="submit"]');

        // 1. Setup CSRF token for Laravel AJAX POST requests
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            }
        });


        var phoneInput = window.intlTelInput(phoneInputField, {
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
            preferredCountries: ["mw", "zm", "bw"],
            separateDialCode: true,
        });

        // 3. Function to perform the AJAX check
        function checkCountrySupport() {
            var countryData = phoneInput.getSelectedCountryData();
            var isoCode = countryData.iso2.toUpperCase();

            // Optional: Change button state to show it's loading
            submitBtn.prop('disabled', true).text('Checking...');

            $.ajax({
                url: "{{ url('/merchant/check-country') }}",
                method: 'POST',
                data: { iso_code: isoCode },
                success: function(response) {
                    if (response.supported) {
                        
                        formGroup.removeClass('has-error');
                        errorMsg.hide();
                        submitBtn.prop('disabled', false).text('Login');
                    } else {
                        
                        formGroup.addClass('has-error');
                        errorMsg.text(response.message).show();
                        submitBtn.text('Login'); // Reset text, but keep disabled
                    }
                },
                error: function() {
                    formGroup.addClass('has-error');
                    errorMsg.text('Could not verify country. Please try again.').show();
                    submitBtn.prop('disabled', false).text('Login');
                }
            });
        }

        $('#phone').on('keyup', function() {
            if (phoneInput.isValidNumber()) {
                checkCountrySupport();
            } else {
                formGroup.removeClass('has-error');
                errorMsg.hide();
                submitBtn.prop('disabled', false).text('Login');
            }
        });

        phoneInputField.addEventListener("countrychange", function() {
            if ($('#phone').val().trim() !== "" && phoneInput.isValidNumber()) {
                checkCountrySupport();
            }
        });


        $('#loginForm').submit(function(e) {
            if (!phoneInput.isValidNumber()) {
                e.preventDefault();
                formGroup.addClass('has-error');
                errorMsg.text('Invalid phone number format.').show();
                return false;
            }


            var countryData = phoneInput.getSelectedCountryData();
            $('<input>').attr({ type: 'hidden', name: 'country_iso', value: countryData.iso2.toUpperCase() }).appendTo('#loginForm');
            $('#full_phone_number').val(phoneInput.getNumber());
        });
        });
</script>
</body>
</html>