<?php
require_once('./pin/header.php');
require_once('./pin/navbar.php');
require_once('./pin/sidebar.php');
?>
<style>
    .account-details-main-div {
        background-color: white;
        padding-left: 20rem;
        padding-top: 7rem;
        padding-bottom: 5rem;
    }

    .report-schedule-main-div {
        width: 55%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .report-schedule-div-2 {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .report-schedule-div-2 div {
        flex: 1;
    }

    .two-factor-auth-div{
        margin-top: 4.5rem;
    }

    .two-factor-auth-div h4 {
        font-size: 1.1rem;
        color: black;
    }

    .two-factor-auth-div h5 {
        font-size: 0.9rem;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 3rem;
        height: 1.5rem;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.4s;
        border-radius: 999px;
    }

    .slider::before {
        position: absolute;
        content: "";
        height: 1.2rem;
        width: 1.2rem;
        left: 0.15rem;
        bottom: 0.15rem;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
    }

    .switch input:checked + .slider {
        background-color: #4caf50;
    }

    .switch input:checked + .slider::before {
        transform: translateX(1.5rem);
    }

    /* reset and save button css */
    .reset-save-button-div {
        text-align: end;
        margin-right: 2rem;
    }

    .reset-save-button-div button:first-child {
        background: none;
        border: none;
        color: grey;
        font-weight: bold;
        cursor: pointer;
    }

    .reset-save-button-div button:last-child {
        margin-left: 10px;
        border: none;
        padding: 8px 3.8rem;
        border-radius: 5px;
        font-weight: bold;
        cursor: pointer;
    }

    #chatbot-div {
        background-color: #66e783;
        width: fit-content;
        border-radius: 50%;
        display: flex;
        padding: 6px 12px;
        border: 1px solid black;
        box-shadow: 2px 2px 10px -3px;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 99;
    }
    #company-logo-img-div{
        width: 8%;
    }
    #company-logo-img-div img{
        width: 100%;
        object-fit: cover;
        border-radius: 50%;
        aspect-ratio: 1;
        cursor: pointer;
    }

    .i-icon{
        background-color: dimgrey;
        color: white;
        border-radius: 50%;
        padding: 0px 5px;
        font-size: xx-small;
    }

    @media (max-width: 480px){
        .switch {
            width: 2.5rem;
            height: 1.2rem;
        }

        .slider::before {
            width: 1rem;
            height: 1rem;
            left: 0.1rem;
            bottom: 0.1rem;
        }

        .switch input:checked + .slider::before {
            transform: translateX(1.3rem);
        }
    }
    @media (max-width:575px){
        .account-details-main-div{
            background-color: white;
            padding: 0rem 2rem;
            padding-top: 7rem;
            padding-bottom: 5rem;
        }
        #company-logo-img-div {
            width: 40%;
        }
        #create-schedule-btn{
            font-size: 12px;
        }
        .reset-save-btn-div{
            text-align: center !important;
            margin: 0rem !important;
            margin-top: 2rem !important;
        }
        .reset-save-btn-div button{
            font-size: 15px;
        }
        .two-factor-label{
            font-size: x-small !important;
        }
        .two-factor-auth-div h5{
            font-size: smaller;
        }
        .report-schedule-div-2 div:last-child{
            margin-left: unset !important;
        }
        .create-schedule-btn{
            font-size: 10px;
        }
        .schedule-div span{
            font-size: 0.75rem !important;
        }
        .report-schedule-main-div{
            width: unset;
        }
        .report-schedule-div-2{
            flex-direction: column;
            align-items: flex-start;
        }
    }   
    @media (min-width:576px) and (max-width:800px){
        .account-details-main-div {
            background-color: white;
            padding-left: 5rem;
            padding-top: 7rem;
            padding-bottom: 5rem;
        }
        #company-logo-img-div {
            width: 15%;
        }
        .two-factor-auth-div h5{
            font-size: small;
        }
        .report-schedule-main-div{
            width: 70%;
        }
    }
    @media (min-width: 801px) and (max-width:1039px) {
        .account-details-main-div{
            padding-left: 5rem;
        }
    }
</style>
<div class="account-details-main-div">
    <form>
        <div>
            <!-- Comany logo && send report-->
            <div class="d-flex flex-column gap-3">
                <!-- Company Logo -->
                <div>
                    <!-- <h3 class="text-black fw-bold fs-5">Company Logo</h3> -->
                    <h3 class="fw-bold">Company Logo</h3>
                </div>

                <!-- Logo Image -->
                <div id="company-logo-img-div">

                </div>
                <input type="file" onchange="handleCompanyLogoImg(event)" hidden accept="image/webp" id="company-logo-input">

                <!-- Send Report Schedule Section -->
                <div class="d-flex align-items-center gap-3 schedule-div">
                    <!-- <span class="text-black fw-bold fs-6">Send report schedule:</span> -->
                    <span class="fw-bold fs-6">Send report schedule:</span>
                    <button class="btn btn-success" id="create-schedule-btn">Create schedule</button>
                </div>
            </div>

            <!-- report schedule  -->
            <div class="mt-5 report-schedule-main-div">
                <div class="col-sm-4" style="width:100%">
                    <div class="mb-3">
                        <label for="customer-timezone" class="form-label fw-bold">Customer TimeZone</label>
                        <select class="form-select inputbgcolor" name="customer-timezone" id="customer-timezone">
                            <option value="(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi">(GMT+05:30) Chennai, Kolkata, Mumbai, New Delhi</option>                    
                            <option value="(GMT+00:00) London, Accra, Lisbon">(GMT+00:00) London, Accra, Lisbon</option>
                            <option value="(GMT+01:00) Paris, Berlin, Rome">(GMT+01:00) Paris, Berlin, Rome</option>
                            <option value="(GMT+03:00) Nairobi, Baghdad, Moscow">(GMT+03:00) Nairobi, Baghdad, Moscow</option>
                            <option value="(GMT+07:00) Bangkok, Jakarta, Hanoi">(GMT+07:00) Bangkok, Jakarta, Hanoi</option>
                            <option value="(GMT+08:00) Beijing, Singapore, Kuala Lumpur">(GMT+08:00) Beijing, Singapore, Kuala Lumpur</option>
                            <option value="(GMT+09:00) Tokyo, Seoul, Pyongyang">(GMT+09:00) Tokyo, Seoul, Pyongyang</option>
                            <option value="(GMT+10:00) Sydney, Melbourne, Brisbane">(GMT+10:00) Sydney, Melbourne, Brisbane</option>
                            <option value="(GMT-03:00) Buenos Aires, São Paulo, Montevideo">(GMT-03:00) Buenos Aires, São Paulo, Montevideo</option>
                            <option value="(GMT-05:00) New York, Toronto, Lima">(GMT-05:00) New York, Toronto, Lima</option>
                            <option value="(GMT-06:00) Chicago, Mexico City, Guatemala City">(GMT-06:00) Chicago, Mexico City, Guatemala City</option>
                            <option value="(GMT-08:00) Los Angeles, San Francisco, Vancouver">(GMT-08:00) Los Angeles, San Francisco, Vancouver</option>
                        </select>

                    </div>
                </div>
                <div class="col-sm-4 report-schedule-div-2">
                    <div class="mb-3">
                        <label for="language" class="form-label fw-bold"><span>Language <span style="color:red;"> *</span></span></label>
                        <select class="form-select inputbgcolor" name="language" id="language">
                            <option value="">Select Language</option>
                            <option value="10">Arabic</option>
                            <option value="12">Bengali</option>
                            <option value="6">Chinese</option>
                            <option value="1">English</option>
                            <option value="4">French</option>
                            <option value="5">German</option>
                            <option value="2">Hindi</option>
                            <option value="13">Italian</option>
                            <option value="7">Japanese</option>
                            <option value="8">Korean</option>
                            <option value="11">Portuguese</option>
                            <option value="9">Russian</option>
                            <option value="3">Spanish</option>
                            <option value="15">Turkish</option>
                            <option value="14">Urdu</option>
                        </select>
                    </div>
                    <div class="mb-3" style="margin-left: 10px;">
                        <label for="category" class="form-label fw-bold"><span>Support button enabled <span style="color:red;"> *</span></span></label>
                        <select class="form-select inputbgcolor" name="support-btn-enabled" id="support-btn-enabled">
                            <option value="yes">Yes</option>
                            <option value="no">No</option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="mb-3">
                        <label for="category" class="form-label fw-bold"><span>Content direction<span style="color:red;"> *</span></span></label>
                        <select class="form-select inputbgcolor" name="content-direction" id="content-direction">
                            <option value="">Initial</option>
                            <option value="left-to-right">Left to right</option>
                            <option value="right-to-left">Right to left</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Two-factor authentication (2FA) -->
            <div class="two-factor-auth-div">
                <h4>Two-Factor Authentication (2FA)</h4>
                <h5>To enhance security, enforce 2FA for all users in your organisation. Once enabled, users will be required to set up 2FA immediately.</h5>
                <div style="display: flex; gap:10px; align-items: center;">
                    <label class="switch">
                        <input type="checkbox" id="two-factor-auth-input">
                        <span class="slider"></span>
                    </label>
                    <div style="display: flex; align-items: baseline; gap: 5px;">
                        <label class="form-check-label two-factor-label" for="flexSwitchCheckDefault">Ennforce Two-Factor Authentication (2FA) on all users</label>
                        <span class="i-icon">i</span>
                    </div>
                </div>
            </div>

            <div class="text-end mt-4 me-4 reset-save-btn-div">
                <button class="btn btn-outline-success me-2">Reset</button>
                <button class="btn btn-success" id="save-submit" onclick="handlePageData(event)">Save</button>
            </div>

            <!-- chatbot -->
            <div id="chatbot-div">
                <span class="mdi mdi-message-reply-outline" style="font-size:20px;"></span>
            </div>
        </div>
    </form>
    <footer class="footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col fs-13 text-muted text-center">
                    © <script>
                        document.write(new Date().getFullYear())
                    </script>2025 - Made with <span class="mdi mdi-heart text-danger"></span> by <a href="#!" class="text-reset fw-semibold">Watify.io</a>
                </div>
            </div>
        </div>
    </footer>
</div>

<script>
    document.addEventListener('DOMContentLoaded',()=>{
        const companyLogoCon = document.getElementById('company-logo-img-div');
        const customerTimezone = document.getElementById('customer-timezone');
        const language = document.getElementById('language');
        const supportBtnEnabled = document.getElementById('support-btn-enabled');
        const contentDirection = document.getElementById('content-direction');
        const twoFactorAuthInput = document.getElementById('two-factor-auth-input');

        // fetch account details
        $.ajax({
            url: "https://app.watify.io/server/account-details?isFetchData=1",
            method: 'GET',
            processData: false,
            contentType: 'application/json',
            success: function(res){
                const data = res.data[0];
                console.log(res);
                const div = document.createElement('div');
                //https://app.watify.io/client_media/company_logo/dummy_image.webp
                div.innerHTML = `
                    <label for="company-logo-input">
                        <img src=${data.company_logo} alt="error" id="company-logo">
                    </label>
                `;
                companyLogoCon.appendChild(div.firstElementChild);
                customerTimezone.value = data.customer_timezone;
                language.value = data.language;
                supportBtnEnabled.value = data.support_button_enabled;
                contentDirection.value = data.content_direction;
                twoFactorAuthInput.checked = data.two_factor_authentication=="1"?true:false
            },
            error: function(xhr, status, error){
                console.error("Raw Response:", xhr.responseText);
                console.error("Status:", status);
                console.error("Error:", error);
            }
        })
    });

    function handleCompanyLogoImg(e){
        const file = e.target.files[0];
        const fileExtension = file.name.split('.');
        const fileSize = file.size;

        // Restrictions that image extenstion must be webp and size not more than 2mb
        if(fileExtension[fileExtension.length-1] !== "webp"){
            alert('Image extension should be webp');
            return;
        }else if(fileSize > 2 * 1024 * 1024){
            alert('Image size should be not more than 2mb');
            return;
        }

        const imageURL = URL.createObjectURL(file);
        const imageElm = document.querySelector('#company-logo-img-div img');

        imageElm.src = imageURL;
    }

    function handlePageData(e){
        e.preventDefault();
        const formTag = e.currentTarget.closest('form');
        const formData = new FormData(formTag);
        // const companyLogoImg = document.getElementById('company-logo').src;
        const companyLogoFile = document.getElementById('company-logo-input').files[0];
        const twoFactorAuthInput = document.getElementById('two-factor-auth-input').checked;

        // Validate data        
        if(!formData.get('language')){
            alert('Please Select Language');
            return;
        }else if(!formData.get('content-direction')){
            alert("Please Select Content Direction");
            return;
        }
        formData.append('is-company-logo-file',0);
        
        if(companyLogoFile){
            formData.append('company-logo', companyLogoFile);
            formData.append('is-company-logo-file',1);
        }
        formData.append('two-factor-auth',twoFactorAuthInput);
        formData.append('account-detail-insert',1);
        for(let [key,value] of formData.entries()){
            console.log(`${key} => ${value}`);
        }

        $.ajax({
            url:"https://app.watify.io/server/account-details",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(res){
                alert(res.message);
                // window.location.reload();
            },
            error: function(xhr, status, error){
                const res = JSON.parse(xhr.responseText);
                alert(res.message);
                console.error("Raw Response:", xhr.responseText);
                console.error("Status:", status);
                console.error("Error:", error);
            }
        });
    }
</script>

<?php
    require_once('./pin/footer.php');
?>