<?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']}");
$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>