<?php
include "classes/class.loader.php";
$html = new html();
$html->bacground_emoji();
$calls = new functions();
$db = new db();
$user_data_1 = $db->query("SELECT * FROM users WHERE record_id = {$_SESSION['user_id']}");
$user_data = $user_data_1->fetch_assoc();
$user_extended_data_1 = $db->query("SELECT * FROM user_data_1 WHERE user_id = {$_SESSION['user_id']}");
if(!isset($_SESSION['user_id'])){
    echo "<script>window.location.href='login.php';</script>";
}
$user_extended_data = $user_extended_data_1->fetch_assoc();
// $breed_res = $db->query("SELECT DISTINCT breed FROM user_animals WHERE 1");
// $breeder_list = "<datalist id='breeder_list'>";
// while ($breed = $breed_res->fetch_assoc()) {
//     $breeder_list .= "<option value='" . $breed['breed'] . "'>" . $breed['breed'] . "</option>";
// }
// echo "</datalist>" . $breeder_list;
$html->header();

$DashboardWidget = new DashboardWidget();
echo DashboardWidget::includeAssets();
?>
<style>
    body {
        background-color: #bebebee7;
        color: white;
    }
</style>

<div class="home_container">

    <div class="container_wide">
        <h2>USER INFORMATION</h2>
        <div class="line"></div>
        <label>USERNAME</label>
        <input type="text" id="username" name="username" onchange="change_user_details(this, 'users')"
            value="<?php echo $user_data['username']; ?>" required />
        <label>EMAIL</label>
        <input type="text" id="email" name="email" onchange="change_user_details(this, 'users')"
            value="<?php echo $user_data['email']; ?>" required />
        <br>
        <a href="forgot_password.php">CHANGE PASSWORD?</a>
        <br>

    </div>
    <div class="container_wide">
        <h2>PERSONAL INFORMATION</h2>
        <label>FIRST NAME</label>
        <input type="text" id="first_name" name="first_name" onchange="change_user_info_1(this, 'user_data_1')"
            value="<?php echo $user_extended_data['first_name']; ?>" required />
        <label>LAST NAME</label>
        <input type="text" id="last_name" name="last_name" onchange="change_user_info_1(this, 'user_data_1')"
            value="<?php echo $user_extended_data['last_name']; ?>" required />
        <label>CELL NUMBER</label>
        <input type="text" id="cell_number" name="cell_number" onchange="change_user_info_1(this, 'user_data_1')"
            value="<?php echo $user_extended_data['cell_number']; ?>" required />
        <label>ADDRESS</label>
        <input type="text" id="home_address" onchange="change_user_info_1(this, 'user_data_1')" name="home_address"
            value="<?php echo $user_extended_data['home_address']; ?>" required />
        <script>
            function change_user_info_1(input, table_name) {
                var value = input.value;
                var column = input.id;
                var where = "user_id = <?php echo $_SESSION['user_id']; ?>";

                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'ajax/database_update_inputs.php', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === XMLHttpRequest.DONE) {
                        if (xhr.status === 200) {
                            console.log(xhr.responseText);
                            if (xhr.responseText === '1') {
                                input.style.border = "2px solid green";
                            } else {
                                input.style.border = "2px solid red";

                            }
                        }
                    }
                };
                xhr.send('value=' + encodeURIComponent(value) + '&column=' + encodeURIComponent(column) + '&table_name=' + encodeURIComponent(table_name) + '&where=' + encodeURIComponent(where));
            }
            function change_user_details(input, table_name) {
                var value = input.value;
                var column = input.id;
                var where = "user_id = <?php echo $_SESSION['user_id']; ?>";

                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'ajax/database_update_inputs.php', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === XMLHttpRequest.DONE) {
                        if (xhr.status === 200) {
                            console.log(xhr.responseText);
                            if (xhr.responseText === '1') {
                                input.style.border = "2px solid green";
                            } else {
                                input.style.border = "2px solid red";

                            }
                        }
                    }
                };
                xhr.send('value=' + encodeURIComponent(value) + '&column=' + encodeURIComponent(column) + '&table_name=' + encodeURIComponent(table_name) + '&where=' + encodeURIComponent(where));
            }
        </script>

    </div>


    <di class="container_wide" id="dogs_container">
        <h2>YOUR DOGS</h2>
        <div class="line"></div>
        <div class="data_container_for_adding">
            <?php
            $breeder_datalist_res = $db->query("SELECT * FROM breeder_info WHERE 1");
            $breed_select = "<option value='0'>SELECT BREED</option>";
            while ($breeder_datalist = $breeder_datalist_res->fetch_assoc()) {
                $breed_select .= "<option value='" . $breeder_datalist['record_id'] . "'>" . $breeder_datalist['name'] . "</option>";
            }
            $dog_res = $db->query("SELECT * FROM user_animals WHERE user_id = {$_SESSION['user_id']}");

            if ($dog_res->num_rows > 0) {

                while ($dog = $dog_res->fetch_assoc()) {
                    ?>

                    <div class="dogs_data_row" id="dog_<?php echo $dog['record_id']; ?>" style="height: 19vh;overflow: hidden">

                        <button onclick="show_hide_dogs('dog_<?php echo $dog['record_id']; ?>',this)">SHOW</button>

                        <div class="dogs_data_row_number">
                            <label id="dog_form">NAME</label>
                            <input type="text" id="name"
                                onchange="change_dog_info(this, 'user_animals', '<?php echo $dog['record_id']; ?>')" name="name"
                                value="<?php echo @$dog['name']; ?>" />
                            <label class="show_hide_element">BREED</label>
                            <input type="text" id="breed" class="show_hide_element"
                                onchange="change_dog_info(this, 'user_animals', '<?php echo $dog['record_id']; ?>')"
                                name="breed" value="<?php echo @$dog['breed']; ?>" list="breed" />
                            <label class="show_hide_element">BREEDER</label>
                            <!-- <select type="text" class="show_hide_element" id="breeder_id" class="input"
                                onchange="change_dog_info(this, 'user_animals', '<?php echo $dog['record_id']; ?>')"
                                name="breeder_id<?php echo $dog['record_id']; ?>"><?php echo $breed_select; ?></select> -->
                            <input class="show_hide_element" type="breeder" id="breeder"
                                onchange="change_dog_info(this, 'user_animals', '<?php echo $dog['record_id']; ?>')"
                                name="breeder" value="<?php echo @$dog['breeder']; ?>" />
                                <!-- <script>
                                document.getElementsByName('breeder_id<?php echo $dog['record_id']; ?>')[0].value = '<?php echo $dog['breeder_id']; ?>';
                            </script> -->
                            <label class="show_hide_element">DATE OF BIRTH</label>
                            <input class="show_hide_element" type="date" id="date_of_birth"
                                onchange="change_dog_info(this, 'user_animals', '<?php echo $dog['record_id']; ?>')"
                                name="date_of_birth" value="<?php echo @$dog['date_of_birth']; ?>" />
                            <label class="show_hide_element">AGE</label>
                            <input class="show_hide_element" type="number" id="age"
                                onchange="change_dog_info(this, 'user_animals', '<?php echo $dog['record_id']; ?>')" name="age"
                                value="<?php echo @$dog['age']; ?>" />
                            <label class="show_hide_element">SEX</label>
                            <input class="show_hide_element" type="text" id="sex"
                                onchange="change_dog_info(this, 'user_animals', '<?php echo $dog['record_id']; ?>')" name="sex"
                                value="<?php echo @$dog['sex']; ?>" />
                            <label class="show_hide_element">COLOR</label>

                            <select id="color" class="show_hide_element" name="color"
                                onchange="change_dog_info(this, 'user_animals', '<?php echo $dog['record_id']; ?>')">
                                <option value="black" <?php echo ($dog['color'] == 'black') ? 'selected' : ''; ?>>Black</option>
                                <option value="white" <?php echo ($dog['color'] == 'white') ? 'selected' : ''; ?>>White</option>
                                <option value="brown" <?php echo ($dog['color'] == 'brown') ? 'selected' : ''; ?>>Brown</option>
                                <option value="golden" <?php echo ($dog['color'] == 'golden') ? 'selected' : ''; ?>>Golden
                                </option>
                                <option value="grey" <?php echo ($dog['color'] == 'grey') ? 'selected' : ''; ?>>Grey</option>
                                <option value="other" <?php echo ($dog['color'] == 'other') ? 'selected' : ''; ?>>Other</option>
                            </select>

                            <label class="show_hide_element">SPAY NEUTERED</label>
                            <input class="show_hide_element" type="text" id="spay_neutered"
                                onchange="change_dog_info(this, 'user_animals', '<?php echo $dog['record_id']; ?>')"
                                name="spay_neutered" value="<?php echo @$dog['spay_neutered']; ?>" />
                            <label class="show_hide_element">LAST VACCINATION DATE</label>
                            <input class="show_hide_element" type="date" id="last_vaccination_date"
                                onchange="change_dog_info(this, 'user_animals', '<?php echo $dog['record_id']; ?>')"
                                name="last_vaccination_date" value="<?php echo @$dog['last_vaccination_date']; ?>" />
                            <label class="show_hide_element">REGULAR VETERINARIAN</label>
                            <input class="show_hide_element" type="text" id="regular_veterinarian"
                                onchange="change_dog_info(this, 'user_animals', '<?php echo $dog['record_id']; ?>')"
                                name="regular_veterinarian" value="<?php echo @$dog['regular_veterinarian']; ?>" />
                            <label class="show_hide_element">CONTACT NUMBER</label>
                            <input class="show_hide_element" type="text" id="contact_number"
                                onchange="change_dog_info(this, 'user_animals', '<?php echo $dog['record_id']; ?>')"
                                name="contact_number" value="<?php echo @$dog['contact_number']; ?>" />
                            <label class="show_hide_element">INSURANCE NAME</label>
                            <input class="show_hide_element" type="text" id="insurance_name"
                                onchange="change_dog_info(this, 'user_animals', '<?php echo $dog['record_id']; ?>')"
                                name="insurance_name" value="<?php echo @$dog['insurance_name']; ?>" />
                            <label class="show_hide_element">INSURANCE CONTACT</label>
                            <input class="show_hide_element" type="text" id="insurance_contact"
                                onchange="change_dog_info(this, 'user_animals', '<?php echo $dog['record_id']; ?>')"
                                name="insurance_contact" value="<?php echo @$dog['insurance_contact']; ?>" />
                        </div>
                        <div class="show_hide_element">
                            <img class="dog_image" src="upload_dogs/<?php echo $dog['image_file']; ?>"
                                id="image<?php echo $dog['record_id']; ?>" alt="Click To Change" style="cursor: pointer;" />
                            <br>
                            <form action="" method="post" id="news_form<?php echo $dog['record_id']; ?>"
                                enctype="multipart/form-data">
                                <input type="file" name="file" hidden required id="file<?php echo $dog['record_id']; ?>"
                                    accept="image/*" />
                                <input type="text" name="record_id" hidden value="<?php echo $dog['record_id']; ?>" />
                            </form>
                            <div class="progress" style="display: none;">
                                <div class="progress-bar" role="progressbar" style="width: 0%;">0%</div>
                            </div>
                        </div>

                        <script>
                            document.addEventListener("DOMContentLoaded", function () {
                                const form = document.getElementById('news_form<?php echo $dog['record_id']; ?>');
                                const fileInput = document.getElementById('file<?php echo $dog['record_id']; ?>');
                                const image = document.getElementById('image<?php echo $dog['record_id']; ?>');
                                const progress = document.querySelector(`#news_form<?php echo $dog['record_id']; ?> + .progress`);

                                // When image is clicked, trigger file input
                                image.addEventListener('click', function () {
                                    fileInput.click();
                                });

                                // When file is selected, submit the form via AJAX
                                fileInput.addEventListener('change', function () {
                                    if (fileInput.files.length > 0) {
                                        // alert("Uploading...");
                                        let formData = new FormData(form);
                                        let xhr = new XMLHttpRequest();
                                        xhr.open('POST', 'upload_dog_image.php', true);
                                        xhr.upload.addEventListener('progress', function (e) {
                                            if (e.lengthComputable) {
                                                let percentage = Math.round((e.loaded / e.total) * 100);
                                                progress.style.display = "block";
                                                progress.querySelector('.progress-bar').style.width = percentage + '%';
                                                progress.querySelector('.progress-bar').textContent = percentage + '%';
                                            }
                                        });
                                        xhr.onload = function () {
                                            console.log(xhr.responseText);
                                            if (xhr.status >= 200 && xhr.status < 400) {
                                                if (xhr.responseText.length > 0) {
                                                    // alert("Uploaded");
                                                    form.reset();
                                                    image.src = "upload_dogs/" + xhr.responseText + "?t=" + new Date().getTime(); // Cache busting
                                                    progress.style.display = "none";
                                                }
                                            }
                                        };
                                        xhr.send(formData);
                                    }
                                });
                            });
                        </script>

                    </div>
                <?php }
            } else {
                echo "<h2>NO DOGS ADDED YET</h2>";
            }
            ?>
        </div>
        <br>
        <button onclick="add_row_dogs()">ADD NEW DOG</button>
        <script>

            document.querySelectorAll(".show_hide_element").forEach(el => {
                el.hidden = true;
            });

            function show_hide_dogs(id, button) {
                const dogRow = document.getElementById(id);
                const isCollapsed = dogRow.style.height === "19vh";

                dogRow.style.height = isCollapsed ? "auto" : "19vh";
                button.innerHTML = isCollapsed ? "HIDE" : "SHOW";

                // Toggle visibility of all .dog_details inside this specific dog row
                dogRow.querySelectorAll(".show_hide_element").forEach(el => {
                    el.hidden = !isCollapsed;
                });
            }
            function add_row_dogs() {
                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'ajax/add_new_dog.php', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === XMLHttpRequest.DONE) {
                        if (xhr.status === 200) {
                            console.log(xhr.responseText);
                            if (xhr.responseText == 1) {
                                // window.location.assign("profile.php#dogs_container");     
                                window.location.reload();
                            } else if (xhr.responseText == 2) {
                                alert("PLEASE FILL IN THE NEW DOGS INFORMATION");
                                document.getElementById("dog_form").focus();

                            } else {
                                alert("SOMETHING WENT WRONG");

                            }
                        }
                    }
                };
                xhr.send();
            }
            function change_dog_info(input, table_name, dog_id) {
                var value = input.value;
                var column = input.id;
                var where = "user_id = <?php echo $_SESSION['user_id']; ?> AND record_id = " + dog_id;

                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'ajax/database_update_inputs.php', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === XMLHttpRequest.DONE) {
                        if (xhr.status === 200) {
                            console.log(xhr.responseText);
                            if (xhr.responseText === '1') {
                                input.style.border = "2px solid green";
                            } else {
                                input.style.border = "2px solid red";

                            }
                        }
                    }
                };
                xhr.send('value=' + encodeURIComponent(value) + '&column=' + encodeURIComponent(column) + '&table_name=' + encodeURIComponent(table_name) + '&where=' + encodeURIComponent(where));
            }

        </script>

        <br>
        <div class="container_wide">
            <h1>BOOKING HISTORY</h1>
            <?php $booking_res = $db->query("SELECT * FROM bookings WHERE user_id = " . $_SESSION['user_id'] . " ORDER BY record_id DESC LIMIT 15");
            while ($booking = $booking_res->fetch_assoc()) {

                if ($booking['status'] == 0) {
                    $status = "PENDING PAYMENT";
                } else if ($booking['status'] == 1) {
                    $status = "PENDING APPROVAL";
                } else if ($booking['status'] == 2) {
                    $status = "APPROVED";
                } else {
                    $status = "CANCELLED";
                }
                ?>
                <div class="dogs_data_row">
                    <div class="dogs_data_row_number">
                        <h2>BOOKING NO : <?php echo $booking['record_id']; ?></h2>
                    </div>
                    <div class="dogs_data_row_number">
                        <h2>DATE : <?php echo $booking['date_of_booking']; ?></h2>
                    </div>
                    <div class="dogs_data_row_number">
                        <h2>TIME : <?php echo $booking['time_start']; ?></h2>
                    </div>
                    <div class="dogs_data_row_number">
                        <h2>STATUS : <?php echo $status; ?></h2>
                    </div>
                    <div class="dogs_data_row_number">
                        <h2>TYPE : <?php echo $booking['type']; ?></h2>
                    </div>
                    <div class="dogs_data_row_number">
                        <h2>DOGS : <?php echo $booking['dog_ids']; ?></h2>
                    </div>
                </div>
            <?php } ?>
        </div>
        <br><br><br>
        <div class="container_wide">
            <h1>PAYMENT HISTORY</h1>
            <?php $booking_res = $db->query("SELECT * FROM payments WHERE user_id = " . $_SESSION['user_id'] . " ORDER BY record_id DESC LIMIT 15");
            while ($booking = $booking_res->fetch_assoc()) {
                ?>
                <div class="dogs_data_row">
                    <div class="dogs_data_row_number">
                        <h2>DATE : <b><?php echo $booking['date_time']; ?></b></h2>
                    </div>
                    <div class="dogs_data_row_number">
                        <h2>ZAR : <b>R <?php echo $booking['zar']; ?></b></h2>
                    </div>
                    <div class="dogs_data_row_number">
                        <?php
                        if ($booking['booking_id'] == 0) {
                            echo "<h2>PAYMENT RECEVIED</h2>";
                        } else if ($booking['booking_id'] > 0) {
                            echo "<h2>BOOKING NUMBER : " . $booking['booking_id'] . "</h2>";
                        } else {
                            echo "<h2>CREDITS BAUGHT</h2>";
                        }
                        ?>

                    </div>
                </div>
            <?php } ?>
        </div>
</div>
</div>

<div class="whatsapp-label">HELP</div>

<!-- Floating button -->
<a class="whatsapp-float" id="whatsappBtn" title="Message us on WhatsApp" target="_blank" rel="noopener noreferrer"
    href="#" aria-label="Open WhatsApp chat">
    <!-- WhatsApp SVG icon (official-looking) -->
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
        <path
            d="M20.52 3.48A11.9 11.9 0 0 0 12 0C5.373 0 .003 5.373.003 12 0 13.987.44 15.9 1.27 17.6L0 24l6.66-1.76a11.94 11.94 0 0 0 5.34 1.38h.01c6.627 0 12-5.373 12-12 0-3.19-1.24-6.18-3.48-8.04z"
            fill="#25D366" />
        <path
            d="M17.56 14.1c-.32-.16-1.9-.94-2.2-1.04-.3-.11-.52-.16-.74.16-.22.32-.86 1.04-1.06 1.25-.19.19-.39.21-.72.07-.32-.13-1.37-.51-2.61-1.62-.97-.86-1.62-1.92-1.81-2.24-.19-.32-.02-.49.14-.65.14-.14.32-.36.48-.54.16-.19.21-.32.32-.53.11-.21.05-.39-.03-.55-.08-.16-.74-1.78-1.02-2.44-.27-.64-.55-.55-.74-.56-.19-.01-.41-.01-.63-.01-.22 0-.58.08-.88.39-.3.31-1.15 1.12-1.15 2.73 0 1.6 1.18 3.14 1.34 3.36.16.22 2.32 3.66 5.62 5.12 3.3 1.46 3.3 0.97 3.9 0.91.6-.07 1.92-.78 2.19-1.53.27-.74.27-1.38.19-1.53-.08-.15-.3-.24-.62-.4z"
            fill="#fff" />
    </svg>
</a>

<script>
    // PHONE: user-provided local number (0645010642).
    // For reliable behaviour with wa.me we convert to international format.
    // South Africa country code = 27; remove leading zero from the local number.
    const localNumber = "0645010642";
    const intlNumber = localNumber.replace(/^0+/, ""); // removes leading zero(s)
    // If your country is South Africa, add 27 before the number:
    const countryCode = "27";
    const phoneForWA = countryCode + intlNumber; // -> "27645010642"

    // Prefilled message (exact text provided by user)
    const msg = "Good day Team, Please help with the following:";

    // Build links: prefer whatsapp:// for mobile apps, fallback to https://wa.me/ for web/mobile
    const encodedMsg = encodeURIComponent(msg);
    const waAppLink = "whatsapp://send?phone=" + phoneForWA + "&text=" + encodedMsg;
    const waWebLink = "https://wa.me/" + phoneForWA + "?text=" + encodedMsg;

    // Use web link by default (works on desktop & mobile); on some mobile browsers whatsapp:// may work.
    const anchor = document.getElementById("whatsappBtn");

    // Attempt to open app link on mobile — but final href will be web fallback.
    // We'll set href to web link so it also works in desktop browsers.
    anchor.href = waWebLink;

    // Optional: on mobile, try to open the app first then fallback to web.
    // (We do this by attempting to navigate to app scheme for short time.)
    function openWhatsAppPreferApp(e) {
        // On touch devices, try app; on desktop, just open web
        const isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        if (!isMobile) return; // let default anchor behavior open new tab

        e.preventDefault();
        // Try app scheme
        const appUrl = waAppLink;
        const webUrl = waWebLink;

        // Create invisible iframe to try app URL (older technique)
        const start = Date.now();
        let didOpen = false;

        // For modern browsers, direct location change is OK.
        window.location = appUrl;

        // After short delay, navigate to web link (works as fallback)
        setTimeout(function () {
            // If still on the page, open web link
            // We guard to avoid double navigation in some environments
            if (Date.now() - start < 2000) {
                window.location = webUrl;
            }
        }, 1500);
    }

    // Use the mobile-prefer behavior on click
    anchor.addEventListener("click", openWhatsAppPreferApp, { passive: false });