<link rel="stylesheet" href="<?php echo plugins_url('opay/');?>css/settings.css?ver=<?php echo $rand;?>" />

<?php

$majorp = vp_option_array($option_array,"opay_major_primary");
$minorp = vp_option_array($option_array,"opay_minor_primary");
$majors = vp_option_array($option_array,"opay_major_secondary");
$minors = vp_option_array($option_array,"opay_minor_secondary");


$opay_account_bank = vp_option_array($option_array,"opay_account_bank");
$opay_account_name = vp_option_array($option_array,"opay_account_name");
$opay_account_number = vp_option_array($option_array,"opay_account_number");

$theme_max_screen = vp_option_array($option_array,"opay_theme_max_screen");
$ads_banner_link = vp_option_array($option_array,"opay_ads_banner_link");
$ads_banner_image = vp_option_array($option_array,"opay_ads_banner_image");

?>

        <div class="container template-settings" id="main-page">

            <div id="airtime-page-header" class="row p-4 bg-white">
                <div class="col d-flex flex-row justify-content-start align-items-start">
                   <span class="general-text">Template Settings</span>
                </div>
            </div>

            <span class="d-flex mt-2 sec-top mx-3 d-flex justify-content-start align-items-center">
                <i class="fa-solid fa-palette me-2 txt"></i> 
                <span class="txt">Color Blending</span>
            </span>

            <div class="lower-part-1 mt-2 mx-3 bg-white px-4 py-4 m-auto">

                <span class=" d-flex justify-content-end align-items-center mb-2">
                    <i class="fa-solid reset-template-color fa-clock-rotate-left me-2"></i> 
                    <span class="reset-text reset-template-color">Reset To Default</span>
                </span>

                <div class="row">
                    <div class="col d-flex flex-column align-items-start justify-content-center">
                            <span class="icon me-3 d-flex align-items-center label"><span>Major Primary Color:</span> <input type="color" class="color" value="<?php echo $majorp;?>"  for="opay_major_primary"> </span>
                        <span class="icon-text flex-grow-1 d-flex flex-column">
                            <input type="text" class="inptcol form-control" name="opay_major_primary" value="<?php echo $majorp;?>">
                            <small>This is the major color of the theme e.g the major icon color </small>
                        </span>
                    </div>
                    <div class="col d-flex flex-column align-items-start justify-content-center">
                        <span class="icon me-3 d-flex align-items-center label"><span>Minor Primary Color:</span>  <input type="color" class="color" value="<?php echo $minorp;?>"  for="opay_minor_primary"> </span>
                        <span class="icon-text flex-grow-1 d-flex flex-column">
                            <input  value="<?php echo $minorp;?>" type="text" class="inptcol form-control" name="opay_minor_primary">
                            <small>This should be a more lighter/fainter color of the Major color. take for instance the background color of icons</small>
                        </span>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col d-flex flex-column align-items-start justify-content-center">
                        <span class="icon me-3 d-flex align-items-center label"><span>Major Secondary Color:</span>  <input type="color" class="color" value="<?php echo $majors;?>"  for="opay_major_secondary"></span>
                        <span class="icon-text flex-grow-1 d-flex flex-column">
                            <input  value="<?php echo $majors;?>" type="text" class="inptcol form-control"  name="opay_major_secondary" value="">
                            <small>This is the major color of e.g the footer icons and they default strong grey colors </small>
                        </span>
                    </div>
                    <div class="col d-flex flex-column align-items-start justify-content-center">
                        <span class="icon me-3 d-flex align-items-center label"><span>Minor Secondary Color:</span>  <input type="color" class="color" value="<?php echo $minors;?>" for="opay_minor_secondary"></span>
                        <span class="icon-text flex-grow-1 d-flex flex-column">
                            <input  value="<?php echo $minors;?>" type="text" class="inptcol form-control"  name="opay_minor_secondary">
                            <small>This should be a more lighter/fainter color of the Sec. Major color. take for instance the background color of your whole theme which are lighter grey</small>
                        </span>
                    </div>
                </div>



            </div>

            <span class="d-flex mt-2 sec-top mx-3 d-flex justify-content-start align-items-center">
                <i class="fa-solid fa-building-columns txt me-2"></i> 
                <span class="txt">Themeing</span>
            </span>
            <div class="lower-part-1 mt-2 mx-3 bg-white px-4 py-4 m-auto">


            <div class="row">
                    <div class="col-12 col-md my-1 d-flex flex-column align-items-start justify-content-center">
                        <span class="icon me-3 d-flex align-items-center label">Max Width On Bigger Screen:</span>
                        <span class="icon-text flex-grow-1 d-flex flex-column">
                            <input type="text" class="form-control" name="opay_theme_max_screen" value="<?php echo $theme_max_screen;?>">
                        </span>
                    </div>
                    <div class="col-12 col-md my-1 d-flex flex-column align-items-start justify-content-center">
                        <span class="icon me-3 d-flex align-items-center label">Ads Banner Image:</span>
                        <span class="icon-text flex-grow-1 d-flex flex-column">
                            <input type="text" class="form-control" name="opay_ads_banner_image"  value="<?php echo $ads_banner_image;?>">
                        </span>
                    </div>
                    <div class="col-12 col-md my-1 d-flex flex-column align-items-start justify-content-center">
                        <span class="icon me-3 d-flex align-items-center label">Ads Banner Link:</span>
                        <span class="icon-text flex-grow-1 d-flex flex-column">
                            <input type="text" class="form-control" name="opay_ads_banner_link"  value="<?php echo $ads_banner_link;?>">
                        </span>
                    </div>
                </div>
            </div>

            <span class="d-flex mt-2 sec-top mx-3 d-flex justify-content-start align-items-center">
                <i class="fa-solid fa-building-columns txt me-2"></i> 
                <span class="txt">Bank Account</span>
            </span>

            <div class="lower-part-1 mt-2 mx-3 bg-white px-4 py-4 m-auto">


                <div class="row">
                    <div class="col-12 col-md my-1 d-flex flex-column align-items-start justify-content-center">
                        <span class="icon me-3 d-flex align-items-center label">Account Name:</span>
                        <span class="icon-text flex-grow-1 d-flex flex-column">
                            <input type="text" class="form-control" name="opay_account_name" value="<?php echo $opay_account_name;?>">
                        </span>
                    </div>
                    <div class="col-12 col-md my-1 d-flex flex-column align-items-start justify-content-center">
                        <span class="icon me-3 d-flex align-items-center label">Account Number:</span>
                        <span class="icon-text flex-grow-1 d-flex flex-column">
                            <input type="number" class="form-control" name="opay_account_number"  value="<?php echo $opay_account_number;?>">
                        </span>
                    </div>
                    <div class="col-12 col-md my-1 d-flex flex-column align-items-start justify-content-center">
                        <span class="icon me-3 d-flex align-items-center label">Bank Name:</span>
                        <span class="icon-text flex-grow-1 d-flex flex-column">
                            <input type="name" class="form-control" name="opay_account_bank"  value="<?php echo $opay_account_bank;?>">
                        </span>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col">
                        <span class="icon-text flex-grow-1 d-flex flex-column">
                            <button class="btn btn-primary save-settings">Save Changes</button>
                        </span>
                    </div>
                </div>

            </div>


        </div>

        <script>



            jQuery("input.color").on("input",function(){
                //jQuery(this).next().val(jQuery(this).val());

                var forCol = jQuery(this).attr("for");

                jQuery("input[name="+forCol+"]").val(jQuery(this).val());

            });

            jQuery("input.inptcol").on("input",function(){
                //jQuery(this).next().val(jQuery(this).val());

                var forCol = jQuery(this).attr("name");


                jQuery("input[for="+forCol+"]").val(jQuery(this).val());

            });


            jQuery(".reset-template-color").on("click",function(){
                var major_pry = "#00b875";
                var minor_pry = "#e1f5ea";

                var major_sec = "#818181";
                var minor_sec = "#f8f8fa";

                jQuery("[name=opay_major_primary]").val(major_pry);
                jQuery("[name=opay_minor_primary]").val(minor_pry);
                jQuery("[name=opay_major_secondary]").val(major_sec);
                jQuery("[name=opay_minor_secondary]").val(minor_sec);

                jQuery("[for=opay_major_primary]").val(major_pry);
                jQuery("[for=opay_minor_primary]").val(minor_pry);
                jQuery("[for=opay_major_secondary]").val(major_sec);
                jQuery("[for=opay_minor_secondary]").val(minor_sec);

            });


            jQuery(".save-settings").on("click",function(){

                jQuery(".save-settings").text("Saving...");

                showLoader();

                var major_pry = jQuery("[name=opay_major_primary]").val();
                var minor_pry = jQuery("[name=opay_minor_primary]").val();
                var major_sec = jQuery("[name=opay_major_secondary]").val();
                var minor_sec = jQuery("[name=opay_minor_secondary]").val();
                var account_name = jQuery("[name=opay_account_name]").val();
                var account_number = jQuery("[name=opay_account_number]").val();
                var account_bank = jQuery("[name=opay_account_bank]").val();
                var opay_theme_max_screen = jQuery("[name=opay_theme_max_screen]").val();
                var opay_ads_banner_link = jQuery("[name=opay_ads_banner_link]").val();
                var opay_ads_banner_image = jQuery("[name=opay_ads_banner_image]").val();
                jQuery.ajax({
                    url:"/wp-content/plugins/opay/saves/save-template-settings.php",
                    method:"POST",
                    data:{
                        'opay_major_primary':major_pry,
                        'opay_minor_primary':minor_pry,
                        'opay_major_secondary':major_sec,
                        'opay_minor_secondary':minor_sec,
                        'opay_account_name':account_name,
                        'opay_account_number':account_number,
                        'opay_account_bank':account_bank,
                        'opay_theme_max_screen':opay_theme_max_screen,
                        'opay_ads_banner_link':opay_ads_banner_link,
                        'opay_ads_banner_image':opay_ads_banner_image
                    },
                    success:function(data){
                        hideLoader();

                            jQuery(".save-settings").text("Saved!");

                            setTimeout(function(){
                                jQuery(".save-settings").text("Save Changes");
                            },2000);

                            location.reload();

                    }
                });

            });
        </script>

