<?php

namespace W_RafflePlayWoo_QrCode;

if( ! defined('ABSPATH')) exit;

include_once( RAFFLE_PLAY_WOO_DIR_PATH . '/includes/RafflePlayWoo_Includes.php');
use RafflePlayWoo_Includes\RafflePlayWoo_Includes as RafflePlayWoo_Includes;

class W_RafflePlayWoo_QrCode{

    public static function drp_qrCodePage( $data ){
      
     
    ?>     
        
        <style>
            .nav-item .nav-link.active{
                color: #fff;
                background-color: #0d6efd; 
            }
            .raffle-name{
                margin-left: 50px;
                font-size: 1rem;
            }
            .nav-item{
                border: 2px solid #0d6efd;
                border-bottom: 0px;
                border-radius: 5px;
                margin-left: 5px;
            }
            .p-raffle label{
                min-width: 350px;
            }
        </style>
                

        <div class='wrap qrcode-page'>

            <div class="container-fluid" 
                ref='main_container' 
              
            >


        
                <div class="bmp-set-row">

                    <h3 class='h4'> <?php esc_html_e('QR Code', 'raffle-play-woo'); ?> </h3>
                    <p style='font-size: .85rem;'> 
                        <i> 
                            <?php esc_html_e('Create QR code images for your raffles', 'raffle-play-woo'); ?> 
                        </i> 
                        <br />
                        <i>
                            <b>
                                <?php esc_html_e('Minimum requirements: PHP 8.2 >= , and GD Extension for image processing.', 'raffle-play-woo'); ?>  
                           </b>
                        </i>
                    </p>

                    <p style='font-size: .9rem; margin-top: -7px; font-weight: 600;'> 
                        <i>
                            <a href="https://youtu.be/jIED2NgUrz0" target='_blank'>
                                <?php esc_html_e('Watch Setup video here', 'raffle-play-woo'); ?> 
                            </a>
                        </i> 
                    </p>
                    
                    <p>
                        <span> 
                            <?php RafflePlayWoo_Includes::rpwoo_premium_image(); ?>  
                                <?php esc_html_e('Only Available in Premium Version', 'raffle-play-woo'); ?> 
                            <?php RafflePlayWoo_Includes::rpwoo_premium_image(); ?> 
                        </span>
                    </p>

                    <div>   
                        
                        <ul class="nav nav-tabs" id="myTab" role="tablist">

                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">
                                    <?php esc_html_e('QR Code Raffles', 'raffle-play-woo'); ?>                                
                                </button>
                            </li>

                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">
                                    <?php esc_html_e('Content Settings', 'raffle-play-woo'); ?>
                                </button>
                            </li>

                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">
                                    <?php esc_html_e('QR Code Settings', 'raffle-play-woo'); ?>
                                </button>
                            </li>
   
                        </ul>
                        
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                <!-- raffles -->
                                 <div>
                                    <p><?php esc_html_e('Enable / Disable raffles to create QR Code', 'raffle-playw-woo');?> </p>
                                    <ul>                                  
                                        <p  class='p-raffle'>
                                            <label   style='cursor: pointer;' class='bmp-set-row'>
                                                <input 
                                                    type="checkbox" 
                                                 
                                                                                                
                                                />
        
                                                <span class="raffle-name">
                                                    Default Rafle    
                                                </span>    
                                            </label>
                                        </p>                                          
                                    </ul>
                                 </div>

                            </div>

                            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                      
                                <?php esc_html_e('Info Separator', 'raffle-play-woo');?>                                                           
                                <p><input type="text" value='-' v-model='data.content.info_sep' ></p>

                                <?php esc_html_e('Tickets Separator', 'raffle-play-woo');?>                                                           
                                <p><input type="text" value=',' v-model='data.content.tkt_sep'></p>

                                <p>
                                    <b>
                                    <?php esc_html_e('Not Allowed separators', 'raffle-play-woo');?> <br/>


                                    <span>' " # ; -- /* */ * </span>

                                    </b>
                                </p>

                                <?php esc_html_e('Content to be displayed - in order', 'raffle-play-woo'); ?>   
                                <p>                                                                     
<textarea name="" cols='40' rows='20' id="" ref='display'></textarea>
<textarea name="" cols='40' rows='20' id="" readonly style='margin-left: 10px' title='<?php esc_html_e('Available fields', 'raffle-play-woo');?>' >
first_name
last_name
order_id
raffle_name
tickets
</textarea>
                                </p>                                                                  

                            </div>   
                            
                            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                                <p>
                                    <?php esc_html_e('QR Code settings will be customizable to your desire with filters', 'raffle-play-woo');?>                                    
                                </p>

                                <div class="form-group row">
                                    <label for="bg_color" class="col-sm-2 col-form-label">
                                        <?php esc_html_e('Background Color', 'raffle-play-woo'); ?>
                                    </label>
                                    <div class="col-sm-5">
                                        <input type="text" v-model="data.qc.bg_color"  class="form-control-plaintext" id="bg_color" value='#ffffff' >
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="color" class="col-sm-2 col-form-label">
                                        <?php esc_html_e('Color', 'raffle-play-woo'); ?>
                                    </label>
                                    <div class="col-sm-5">
                                        <input type="text" v-model="data.qc.color" class="form-control-plaintext" id="color" value='#fc031c' >
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="size" class="col-sm-2 col-form-label">
                                        <?php esc_html_e('Size', 'raffle-play-woo'); ?>
                                    </label>
                                    <div class="col-sm-5">
                                        <input type="number" v-model="data.qc.size"  class="form-control-plaintext" id="size" value='900'>
                                    </div>
                                </div>  
                                
                                <div class="form-group row">
                                    <label for="label_text" class="col-sm-2 col-form-label">
                                        <?php esc_html_e('Bottom Label Text', 'raffle-play-woo'); ?>
                                        <code>[raffle_name]</code>                                        
                                    </label>
                                    <div class="col-sm-5">
                                        <input type="text" v-model="data.qc.lbl_text"  class="form-control-plaintext" id="label_text" value='[raffle_name] - Scan the QR code above' >
                                    </div>
                                </div>     
                                
                                <div class="form-group row">
                                    <label for="label_color" class="col-sm-2 col-form-label">
                                        <?php esc_html_e('Bottom Label Color', 'raffle-play-woo'); ?>
                                    </label>
                                    <div class="col-sm-5">
                                        <input type="text" v-model="data.qc.lbl_color"  class="form-control-plaintext" id="label_color" value='#000000' >
                                    </div>
                                </div>   
                                
                                <div class="form-group row">
                                    <label for="label_size" class="col-sm-2 col-form-label">
                                        <?php esc_html_e('Bottom Label Size', 'raffle-play-woo'); ?>
                                    </label>
                                    <div class="col-sm-5">
                                        <input type="number" v-model="data.qc.lbl_size"  class="form-control-plaintext" id="label_size" value='15' >
                                    </div>
                                </div>                             


                            </div>
                        </div>

                        <hr/>

                        <button class='btn btn-primary' >
                             <?php esc_html_e('Save', 'raffle-play-woo'); ?>
                        </button>

                    </div>
                </div>


            </div> <!-- /container-fluid -->
        </div> <!-- /wrap -->

      <?php  
    
    }
}