<?php
namespace AroundElementor\Modules\Shapes\Widgets;

use AroundElementor\Base\Base_Widget;
use Elementor\Controls_Manager;
use Elementor\Widget_Base;

if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}

class Shapes extends Base_Widget {

    public function get_name() {
        return 'ar-shapes';
    }

    public function get_title() {
        return __( 'Shapes', 'around-elementor' );
    }

    public function get_icon() {
        return 'eicon-shapes';
    }

 protected function register_controls() {
        
        $this->start_controls_section(
            'section_title', [
                'label' => esc_html__( 'Shapes', 'around-elementor' ),
            ]
        );


         $this->add_control( 'bg_color', [
            'label'     => esc_html__( 'Background Color', 'around-elementor' ),
            'type'      => Controls_Manager::SELECT,
            'default'   => 'dark',
            'options'   => [
                'primary'       => esc_html__( 'Primary', 'around-elementor' ),
                'secondary'     => esc_html__( 'Secondary', 'around-elementor' ),
                'primary_desat' => esc_html__( 'Primary Desat', 'around-elementor' ),
                'success'       => esc_html__( 'Success', 'around-elementor' ),
                'info'          => esc_html__( 'Info', 'around-elementor' ),
                'warning'       => esc_html__( 'Warning', 'around-elementor' ),
                'danger'        => esc_html__( 'Danger', 'around-elementor' ),
                'light'         => esc_html__( 'Light', 'around-elementor' ),
                'dark'          => esc_html__( 'Dark', 'around-elementor' ),
                'black'         => esc_html__( 'Black', 'around-elementor' ),
                'white'         => esc_html__( 'White', 'around-elementor' ),
            ]

        ] );

          $this->add_control( 'bg_shapes', [
            'label'     => esc_html__( 'Shapes', 'around-elementor' ),
            'type'      => Controls_Manager::SELECT,
            'default'   => 'slant_bottom_right',
            'options'   => [
                'slant_bottom_right'       => esc_html__( 'Slant bottom right', 'around-elementor' ),
                'slant_bottom_left'     => esc_html__( 'Slant bottom left', 'around-elementor' ),
                'slant_top_right' => esc_html__( 'Slant top right', 'around-elementor' ),
                'slant_top_left'       => esc_html__( 'Slant top left', 'around-elementor' ),
                'curve_bottom_center'          => esc_html__( 'Curve bottom center', 'around-elementor' ),
                'curve_top_center'       => esc_html__( 'Curve top center', 'around-elementor' ),
                'curve_bottom_right'        => esc_html__( 'Curve bottom right', 'around-elementor' ),
                'curve_bottom_left'         => esc_html__( 'Curve bottom left', 'around-elementor' ),
                'curve_top_right'          => esc_html__( 'Curve top right', 'around-elementor' ),
                'curve_top_left'         => esc_html__( 'Curve top left', 'around-elementor' ),
                'curve_right'         => esc_html__( 'Curve right', 'around-elementor' ),
                'curve_left'         => esc_html__( 'Curve left', 'around-elementor' ),
            ]

        ] );

           $this->end_controls_section();
    }

    protected function slant_bottom_right($color) { ?>

        <div class="bg-<?php echo $color; ?> position-relative py-7">
  <!-- Content goes here -->
  <div class="cs-shape cs-shape-bottom cs-shape-slant bg-body">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 260">
      <polygon fill="currentColor" points="0,257 0,260 3000,260 3000,0"></polygon>
    </svg>
  </div>
</div>
    <?php  }

    protected function slant_bottom_left($color) { ?>

        <div class="bg-<?php echo $color; ?> dark position-relative py-7">
  <!-- Content goes here -->
  <div class="cs-shape cs-shape-bottom cs-shape-slant bg-body">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 260">
      <polygon fill="currentColor" points="0,0 0,260 3000,260 3000,255"></polygon>
    </svg>
  </div>
</div>
<?php   }

    protected function slant_top_right($color) { ?>

        <div class="bg-<?php echo $color; ?> position-relative py-7">
  <!-- Content goes here -->
  <div class="cs-shape cs-shape-top cs-shape-slant bg-body">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 260">
      <polygon fill="currentColor" points="0,0 0,2.4 3000,260 3000,0"></polygon>
    </svg>
  </div>
</div>

  <?php   }

    protected function slant_top_left($color) {?>

        <div class="bg-<?php echo $color; ?> position-relative py-7">
  <!-- Content goes here -->
  <div class="cs-shape cs-shape-top cs-shape-slant bg-body">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 260">
      <polygon fill="currentColor" points="0,0 0,260 3000,2.9 3000,0"></polygon>
    </svg>
  </div>
</div>

  <?php   }

    protected function curve_bottom_center($color) { ?>

    <div class="bg-<?php echo $color; ?> position-relative py-7">
 <!---Content goes here -->
  <div class="cs-shape cs-shape-bottom cs-shape-curve bg-body">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 185.4">
      <path fill="currentColor" d="M3000,0v185.4H0V0c496.4,115.6,996.4,173.4,1500,173.4S2503.6,115.6,3000,0z"></path>
    </svg>
  </div>
</div>

   <?php  }

    protected function curve_top_center($color) { ?>

        <div class="bg-<?php echo $color; ?> position-relative py-7">
  <!-- Content goes here -->
  <div class="cs-shape cs-shape-top cs-shape-curve bg-body">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 185.4">
      <path fill="currentColor" d="M3000,185.4V0H0v185.4C496.4,69.8,996.4,12,1500,12S2503.6,69.8,3000,185.4z"></path>
    </svg>
  </div>
</div>

  <?php }

    protected function curve_bottom_right($color) { ?>

        <div class="bg-<?php echo $color; ?> position-relative py-7">
  <!-- Content goes here -->
  <div class="cs-shape cs-shape-bottom cs-shape-curve-side bg-body">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 250">
      <path fill="currentColor" d="M3000,0v250H0v-51c572.7,34.3,1125.3,34.3,1657.8,0C2190.3,164.8,2637.7,98.4,3000,0z"></path>
    </svg>
  </div>
</div>

<?php   }

    protected function curve_bottom_left($color) { ?>

    <div class="bg-<?php echo $color; ?> position-relative py-7">
  <!-- Content goes here -->
  <div class="cs-shape cs-shape-bottom cs-shape-curve-side bg-body">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 250">
      <path fill="currentColor" d="M0,0l0,250h3000v-51c-572.7,34.3-1125.3,34.3-1657.8,0C809.7,164.8,362.3,98.4,0,0z"></path>
    </svg>
  </div>
</div>

  <?php   }

    protected function curve_top_right($color) { ?>

        <div class="bg-<?php echo $color; ?> position-relative py-7">
  <!-- Content goes here -->
  <div class="cs-shape cs-shape-top cs-shape-curve-side bg-body">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 250">
      <path fill="currentColor" d="M3000,250V0H0v51c572.7-34.3,1125.3-34.3,1657.8,0C2190.3,85.2,2637.7,151.6,3000,250z"></path>
    </svg>
  </div>
</div>
 <?php }

    protected function curve_top_left($color) { ?>

    <div class="bg-<?php echo $color; ?> position-relative py-7">
  <!-- Content goes here -->
  <div class="cs-shape cs-shape-top cs-shape-curve-side bg-body">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 250">
      <path fill="currentColor" d="M0,250L0,0l3000,0v51c-572.7-34.3-1125.3-34.3-1657.8,0C809.7,85.2,362.3,151.6,0,250z"></path>
    </svg>
  </div>
</div>

  <?php   }

    protected function curve_right($color) { ?>

    <div class="bg-<?php echo $color; ?> position-relative py-7">
  <div class="bg-overlay-content">
    <!-- Content goes here -->
  </div>
  <div class="cs-shape cs-shape-right bg-body">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228.4 2500">
      <path fill="currentColor" d="M228.4,0v2500H0c134.9-413.7,202.4-830.4,202.4-1250S134.9,413.7,0,0H228.4z"></path>
    </svg>
  </div>
</div>

  <?php   }

    protected function curve_left($color) { ?>

    <div class="bg-<?php echo $color; ?> position-relative py-7">
  <div class="bg-overlay-content">
    <!-- Content goes here -->
  </div>
  <div class="cs-shape cs-shape-left bg-body">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228.4 2500">
      <path fill="currentColor" d="M0,0l0,2500h228.4C93.5,2086.3,26.1,1669.6,26.1,1250S93.5,413.7,228.4,0L0,0z"></path>
    </svg>
  </div>
</div>

    <?php  }


    protected function render() {

        $settings           = $this->get_settings();
        $shape               = $settings['bg_shapes'];
        $color               = $settings['bg_color'];
       //echo '<pre>'. print_r($settings,1).'</pre>';
          $this->$shape($color);
     }

}