<?php
/**
 * Elementor Widget: GB Destination Gallery
 */

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

class Guide_Benin_Destination_Gallery_Widget extends \Elementor\Widget_Base {

    public function get_name() {
        return 'gb_destination_gallery';
    }

    public function get_title() {
        return __( 'GB Destination Gallery', 'guide-benin' );
    }

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

    public function get_categories() {
        return array( 'guide-benin' );
    }

    protected function register_controls() {
        $this->start_controls_section(
            'section_content',
            array(
                'label' => __( 'Options Galerie', 'guide-benin' ),
            )
        );

        $this->add_control(
            'prefix_id',
            array(
                'label'   => __( 'Préfixe des Slots d\'Images', 'guide-benin' ),
                'type'    => \Elementor\Controls_Manager::TEXT,
                'default' => 'gv-gal',
            )
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        $prefix = esc_attr( $settings['prefix_id'] );

        $gallery_slots = array(
            array('id' => $prefix . '-1', 'col' => 2, 'row' => 2),
            array('id' => $prefix . '-2', 'col' => 2, 'row' => 1),
            array('id' => $prefix . '-3', 'col' => 1, 'row' => 1),
            array('id' => $prefix . '-4', 'col' => 1, 'row' => 1),
            array('id' => $prefix . '-5', 'col' => 2, 'row' => 1),
        );
        ?>
        <style>
            .gal-section-<?php echo esc_attr( $this->get_id() ); ?> .gal-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-auto-rows: 200px;
                gap: 16px;
            }
            @media (max-width: 991px) {
                .gal-section-<?php echo esc_attr( $this->get_id() ); ?> {
                    padding: 30px 24px !important;
                }
                .gal-section-<?php echo esc_attr( $this->get_id() ); ?> .gal-grid {
                    grid-template-columns: repeat(2, 1fr) !important;
                    grid-auto-rows: 180px !important;
                }
                .gal-section-<?php echo esc_attr( $this->get_id() ); ?> .gb-gal {
                    grid-column: span 1 !important;
                    grid-row: span 1 !important;
                }
            }
            @media (max-width: 576px) {
                .gal-section-<?php echo esc_attr( $this->get_id() ); ?> .gal-grid {
                    grid-template-columns: 1fr !important;
                    grid-auto-rows: 220px !important;
                }
                .gal-section-<?php echo esc_attr( $this->get_id() ); ?> .gb-gal {
                    height: 220px !important;
                }
            }
        </style>
        <section class="gal-section-<?php echo esc_attr( $this->get_id() ); ?>" style="max-width:1180px; margin:0 auto; padding:40px 56px;">
          <div class="gal-grid">
            <?php
            foreach ($gallery_slots as $g) {
                $slot_img = function_exists('guide_benin_get_slot_image_src') ? guide_benin_get_slot_image_src($g['id']) : '';
                $bg_style = !empty($slot_img) ? "background-image:url('{$slot_img}');" : "background-color:#3A2415;";
                ?>
                <div class="gb-gal" style="grid-column:span <?php echo $g['col']; ?>; grid-row:span <?php echo $g['row']; ?>; border-radius:18px; position:relative; overflow:hidden;">
                  <div class="gb-galimg" style="position:absolute; inset:0; <?php echo $bg_style; ?> background-size:cover; background-position:center; background-repeat:no-repeat;"></div>
                </div>
                <?php
            }
            ?>
          </div>
        </section>
        <?php
    }
}
