<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Buyer Available Dashboard</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
    body {
        background-color: #f8f9fa;
        font-family: 'Segoe UI', sans-serif;
        padding: 2rem;
    }

    .card {
        border: none;
        border-radius: 1rem;
        box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.05);
    }

    h1 {
        margin-bottom: 2rem;
    }
    </style>
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

    * {
        font-family: "Ubuntu", sans-serif;
        font-weight: 400;
        font-style: normal;
    }

    .rejected {
        color: red;
    }
    </style>
</head>
<?php
$us_states = [
    'AL' => 'Alabama',
    'AK' => 'Alaska',
    'AZ' => 'Arizona',
    'AR' => 'Arkansas',
    'CA' => 'California',
    'CO' => 'Colorado',
    'CT' => 'Connecticut',
    'DE' => 'Delaware',
    'FL' => 'Florida',
    'GA' => 'Georgia',
    'HI' => 'Hawaii',
    'ID' => 'Idaho',
    'IL' => 'Illinois',
    'IN' => 'Indiana',
    'IA' => 'Iowa',
    'KS' => 'Kansas',
    'KY' => 'Kentucky',
    'LA' => 'Louisiana',
    'ME' => 'Maine',
    'MD' => 'Maryland',
    'MA' => 'Massachusetts',
    'MI' => 'Michigan',
    'MN' => 'Minnesota',
    'MS' => 'Mississippi',
    'MO' => 'Missouri',
    'MT' => 'Montana',
    'NE' => 'Nebraska',
    'NV' => 'Nevada',
    'NH' => 'New Hampshire',
    'NJ' => 'New Jersey',
    'NM' => 'New Mexico',
    'NY' => 'New York',
    'NC' => 'North Carolina',
    'ND' => 'North Dakota',
    'OH' => 'Ohio',
    'OK' => 'Oklahoma',
    'OR' => 'Oregon',
    'PA' => 'Pennsylvania',
    'RI' => 'Rhode Island',
    'SC' => 'South Carolina',
    'SD' => 'South Dakota',
    'TN' => 'Tennessee',
    'TX' => 'Texas',
    'UT' => 'Utah',
    'VT' => 'Vermont',
    'VA' => 'Virginia',
    'WA' => 'Washington',
    'WV' => 'West Virginia',
    'WI' => 'Wisconsin',
    'WY' => 'Wyoming'
]; ?>

<body>

    <div class="container">
        <!-- <h1 class="text-center">
            Check All Buyer Availabality <br>
            <small style="font-size: 35%;">Every color change means the value has been updated</small>
        </h1> -->

        <div class="row g-4 mb-4">

            <div class="col-6">
                <div class="card bg-light">
                    <div class="card-body text-center" style="min-height: 145px;">
                        <h5 class="card-title">-
                            <div style="clear: both;">
                                <select name="buyer_state" id="buyer_state" class="form-control"
                                    style="max-width: 30%; float: left;">
                                    <option value="">State</option>
                                    <?php foreach ($us_states as $abbr => $name): ?>
                                    <option value="<?= $abbr ?>"
                                        <?= (isset($_GET['buyer_state']) && $_GET['buyer_state'] == $abbr) ? 'selected' : '' ?>>
                                        <?= $name ?></option>
                                    <?php endforeach; ?>
                                </select>


                                <input type="text" name="buyer_phone" id="buyer_phone" class="form-control"
                                    placeholder="Phone"
                                    value="<?= isset($_GET['buyer_phone']) ? $_GET['buyer_phone'] : '' ?>"
                                    style="max-width: 48%; float: left;">

                                <a href="#" class="btn btn-primary"
                                    style="max-width: 30%; float: left; margin-left: 10px;"
                                    onclick="fetchStatus(); return false;">Check All</a>
                            </div>
                        </h5>

                    </div>
                </div>
            </div>
            <div class="col-12" id="buyer_results">
                Please use form to check All Buyers Status
            </div>
        </div>
        <div class="row g-4">


        </div>
    </div>

    <script>
    function getRandomColor() {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    function fetchStatus() {
        $('#buyer_results').html('Checking...');
        state = $("select#state").val();
        buyer_state = $("select#buyer_state").val();
        buyer_phone = $("input#buyer_phone").val();

        ASBONfetchStatus(state, phone);
    }

    function ASBONfetchStatus(state, phone) {
        $('#buyer_results').html('Checking...');

        $.ajax({
            url: 'buyers_available_server_abs_on.php?state=' + state +
                '&phone=' + phone,
            method: 'GET',
            async: true,
            beforeSend: function() {
                //$('#buyer_aw').html('<div style="">&nbsp;</div>');
            },
            success: function(response) {
                $('#buyer_results').append("<hr>" + response).css('color', getRandomColor());
                setTimeout(function() {
                    //ASBONfetchStatus();
                }, 20 * 1000);
                // setInterval(fetchStatus, 1000);
            },
            error: function() {
                $('#live-status').text('Error').removeClass().addClass('badge bg-danger');
            }
        });
    }
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>