<?php
if (!defined('ABSPATH')) exit;

class RTMS_Openingstijden_Wachttijden_Widget extends \Elementor\Widget_Base {

    public function get_name() { return 'rtms_openingstijden_wachttijden'; }
    public function get_title() { return 'RTMS Openingstijden & Wachttijden'; }
    public function get_icon() { return 'eicon-clock-o'; }
    public function get_categories() { return ['rtms']; }
    public function get_keywords() { return ['openingstijden', 'wachttijden', 'rtms', 'vestiging', 'breda']; }

    protected function register_controls() {

        $this->start_controls_section('section_general', [
            'label' => 'Algemeen',
            'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
        ]);

        $this->add_control('vestiging_naam', [
            'label'   => 'Vestiging naam',
            'type'    => \Elementor\Controls_Manager::TEXT,
            'default' => 'Breda',
        ]);

        $this->add_control('contact_url', [
            'label'   => 'Contact link',
            'type'    => \Elementor\Controls_Manager::URL,
            'default' => ['url' => '/contact/'],
        ]);

        $this->add_control('contact_tekst', [
            'label'   => 'Contact knop tekst',
            'type'    => \Elementor\Controls_Manager::TEXT,
            'default' => 'Contact',
        ]);

        $this->add_control('locatie_tekst', [
            'label'   => 'Locatie tekst',
            'type'    => \Elementor\Controls_Manager::TEXT,
            'default' => 'Breda, Nederland',
        ]);

        $this->add_control('telefoon', [
            'label'   => 'Telefoonnummer',
            'type'    => \Elementor\Controls_Manager::TEXT,
            'default' => '088 - 068 06 80',
        ]);

        $this->add_control('telefoon_link', [
            'label'   => 'Telefoonnummer (link)',
            'type'    => \Elementor\Controls_Manager::TEXT,
            'default' => '+31880680680',
        ]);

        $this->end_controls_section();

        $this->start_controls_section('section_openingstijden', [
            'label' => 'Openingstijden',
            'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
        ]);

        $dagen = ['Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag', 'Zondag'];
        $defaults = ['09:00 – 17:00','09:00 – 17:00','09:00 – 17:00','09:00 – 17:00','09:00 – 17:00','Gesloten','Gesloten'];

        foreach ($dagen as $i => $dag) {
            $key = strtolower($dag);
            $this->add_control('oh_' . $key, [
                'label'   => $dag,
                'type'    => \Elementor\Controls_Manager::TEXT,
                'default' => $defaults[$i],
            ]);
        }

        $this->end_controls_section();

        $this->start_controls_section('section_wachttijden', [
            'label' => 'Wachttijden',
            'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
        ]);

        for ($i = 1; $i <= 3; $i++) {
            $this->add_control('stap_heading_' . $i, [
                'label'     => 'Stap ' . $i,
                'type'      => \Elementor\Controls_Manager::HEADING,
                'separator' => 'before',
            ]);
            $this->add_control('stap_titel_' . $i, [
                'label'   => 'Titel',
                'type'    => \Elementor\Controls_Manager::TEXT,
                'default' => $i === 1 ? 'Aanmelding pre-intake' : ($i === 2 ? 'Intake regiebehandelaar' : 'Intake op locatie'),
            ]);
            $this->add_control('stap_omschrijving_' . $i, [
                'label'   => 'Omschrijving',
                'type'    => \Elementor\Controls_Manager::TEXT,
                'default' => $i === 3 ? 'Persoonlijk gesprek in Breda' : 'Telefonisch gesprek',
            ]);
            $this->add_control('stap_duur_' . $i, [
                'label'   => 'Duur',
                'type'    => \Elementor\Controls_Manager::TEXT,
                'default' => $i === 1 ? '2 weken' : ($i === 2 ? '6 weken' : '3 weken later'),
            ]);
        }

        $this->add_control('totale_wachttijd_heading', [
            'type'      => \Elementor\Controls_Manager::HEADING,
            'label'     => 'Totaal',
            'separator' => 'before',
        ]);

        $this->add_control('totale_wachttijd', [
            'label'   => 'Totale wachttijd',
            'type'    => \Elementor\Controls_Manager::TEXT,
            'default' => '11 weken',
        ]);

        $this->end_controls_section();

        $this->start_controls_section('section_style', [
            'label' => 'Kleuren',
            'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
        ]);

        $this->add_control('kleur_primary', [
            'label'   => 'Accent kleur',
            'type'    => \Elementor\Controls_Manager::COLOR,
            'default' => '#EBC84F',
        ]);

        $this->add_control('kleur_bg', [
            'label'   => 'Achtergrond kleur',
            'type'    => \Elementor\Controls_Manager::COLOR,
            'default' => '#F5EFE0',
        ]);

        $this->add_control('kleur_kaart', [
            'label'   => 'Kaart achtergrond',
            'type'    => \Elementor\Controls_Manager::COLOR,
            'default' => '#FFFFFF',
        ]);

        $this->add_control('kleur_tekst', [
            'label'   => 'Tekst kleur',
            'type'    => \Elementor\Controls_Manager::COLOR,
            'default' => '#1E293B',
        ]);

        $this->add_control('kleur_muted', [
            'label'   => 'Secundaire tekst',
            'type'    => \Elementor\Controls_Manager::COLOR,
            'default' => '#7C7C7C',
        ]);

        $this->add_control('kleur_border', [
            'label'   => 'Rand kleur',
            'type'    => \Elementor\Controls_Manager::COLOR,
            'default' => '#E8E3D9',
        ]);

        $this->end_controls_section();
    }

    protected function render() {
        $s = $this->get_settings_for_display();

        $primary = esc_attr($s['kleur_primary']);
        $bg      = esc_attr($s['kleur_bg']);
        $card    = esc_attr($s['kleur_kaart']);
        $text    = esc_attr($s['kleur_tekst']);
        $muted   = esc_attr($s['kleur_muted']);
        $border  = esc_attr($s['kleur_border']);
        $accent_bg = $this->hex_to_light($primary, 0.12);

        $dag_map = [
            0 => 'zondag', 1 => 'maandag', 2 => 'dinsdag', 3 => 'woensdag',
            4 => 'donderdag', 5 => 'vrijdag', 6 => 'zaterdag'
        ];
        $vandaag_key = $dag_map[(int) current_time('w')];

        $dagen = [
            'maandag'    => 'Maandag',
            'dinsdag'    => 'Dinsdag',
            'woensdag'   => 'Woensdag',
            'donderdag'  => 'Donderdag',
            'vrijdag'    => 'Vrijdag',
            'zaterdag'   => 'Zaterdag',
            'zondag'     => 'Zondag',
        ];

        $contact_url = !empty($s['contact_url']['url']) ? esc_url($s['contact_url']['url']) : '#';
        ?>
        <div class="rtms-ow" style="background:<?= $bg ?>;padding:48px 16px;font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;line-height:1.5;color:<?= $text ?>;box-sizing:border-box;">

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin:0 auto;">

                <!-- LEFT: Openingstijden -->
                <div style="background:<?= $card ?>;border-radius:24px;overflow:hidden;box-shadow:0 10px 40px -15px rgba(0,0,0,0.15);display:flex;flex-direction:column;">

                    <div style="display:flex;align-items:center;gap:16px;padding:24px 28px;border-bottom:1px solid <?= $border ?>;margin:0;">
                        <span style="width:48px;height:48px;min-width:48px;border-radius:50%;background:<?= $primary ?>;color:<?= $text ?>;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:0;padding:0;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                        </span>
                        <div style="margin:0;padding:0;">
                            <p style="font-size:18px;font-weight:600;color:<?= $text ?>;margin:0;padding:0;line-height:1.3;border:none;background:none;">Openingstijden</p>
                            <p style="font-size:13px;color:<?= $muted ?>;margin:2px 0 0;padding:0;border:none;background:none;">Vestiging <?= esc_html($s['vestiging_naam']) ?></p>
                        </div>
                    </div>

                    <ul style="list-style:none;margin:0;padding:8px 28px;flex:1;">
                        <?php foreach ($dagen as $key => $label) :
                            $tijden = esc_html($s['oh_' . $key]);
                            $is_vandaag = ($key === $vandaag_key);
                            $is_gesloten = (stripos($tijden, 'gesloten') !== false);
                            $dag_style = 'display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-size:14px;margin:0;';
                            if ($is_vandaag) {
                                $dag_style = 'display:flex;align-items:center;justify-content:space-between;padding:14px 12px;font-size:14px;margin:0 -12px;background:' . $accent_bg . ';border-radius:12px;';
                            } else {
                                $dag_style .= 'border-bottom:1px solid ' . $border . ';';
                            }
                        ?>
                        <li style="<?= $dag_style ?>">
                            <span style="display:flex;align-items:center;gap:8px;font-weight:<?= $is_vandaag ? '600' : '500' ?>;color:<?= $text ?>;margin:0;padding:0;">
                                <?= $label ?>
                                <?php if ($is_vandaag) : ?>
                                    <span style="background:<?= $primary ?>;color:<?= $text ?>;font-size:11px;font-weight:700;padding:3px 10px;border-radius:12px;display:inline-block;margin:0;line-height:1.4;">Vandaag</span>
                                <?php endif; ?>
                            </span>
                            <span style="font-weight:<?= $is_vandaag ? '700' : ($is_gesloten ? '400' : '600') ?>;color:<?= $is_gesloten ? $muted : $text ?>;margin:0;padding:0;">
                                <?= $tijden ?>
                            </span>
                        </li>
                        <?php endforeach; ?>
                    </ul>

                    <div style="border-top:1px solid <?= $border ?>;background:rgba(0,0,0,0.02);padding:20px 28px;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px;margin:0;">
                        <div style="display:flex;flex-direction:column;gap:6px;margin:0;padding:0;">
                            <p style="display:flex;align-items:center;gap:8px;font-size:13px;color:<?= $muted ?>;margin:0;padding:0;border:none;background:none;">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="<?= $primary ?>" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;width:16px;height:16px;"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                                <?= esc_html($s['locatie_tekst']) ?>
                            </p>
                            <p style="display:flex;align-items:center;gap:8px;font-size:13px;color:<?= $muted ?>;margin:0;padding:0;border:none;background:none;">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="<?= $primary ?>" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;width:16px;height:16px;"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
                                <a href="tel:<?= esc_attr($s['telefoon_link']) ?>" style="color:<?= $muted ?>;text-decoration:none;font-size:13px;"><?= esc_html($s['telefoon']) ?></a>
                            </p>
                        </div>
                        <a href="<?= $contact_url ?>" style="display:inline-flex;align-items:center;gap:6px;background:<?= $primary ?>;color:<?= $text ?>;font-size:13px;font-weight:600;padding:10px 20px;border-radius:100px;text-decoration:none;white-space:nowrap;flex-shrink:0;font-family:'Open Sans',-apple-system,sans-serif;line-height:1.4;border:none;box-shadow:none;margin:0;">
                            <?= esc_html($s['contact_tekst']) ?>
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;flex-shrink:0;"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                        </a>
                    </div>
                </div>

                <!-- RIGHT: Wachttijden -->
                <div style="background:<?= $card ?>;border-radius:24px;overflow:hidden;box-shadow:0 10px 40px -15px rgba(0,0,0,0.15);display:flex;flex-direction:column;">

                    <div style="display:flex;align-items:center;gap:16px;padding:24px 28px;border-bottom:1px solid <?= $border ?>;margin:0;">
                        <span style="width:48px;height:48px;min-width:48px;border-radius:50%;background:<?= $primary ?>;color:<?= $text ?>;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin:0;padding:0;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/><path d="M17.7 3.3l2 2M6.3 3.3l-2 2"/></svg>
                        </span>
                        <div style="margin:0;padding:0;">
                            <p style="font-size:18px;font-weight:600;color:<?= $text ?>;margin:0;padding:0;line-height:1.3;border:none;background:none;">Wachttijden</p>
                            <p style="font-size:13px;color:<?= $muted ?>;margin:2px 0 0;padding:0;border:none;background:none;">Indicatief · maandelijks bijgewerkt</p>
                        </div>
                    </div>

                    <ol style="list-style:none;margin:0;padding:16px 28px;flex:1;">
                        <?php for ($i = 1; $i <= 3; $i++) : ?>
                        <li style="display:flex;gap:16px;<?= $i < 3 ? 'padding-bottom:20px;' : '' ?>margin:0;">
                            <div style="display:flex;flex-direction:column;align-items:center;flex-shrink:0;margin:0;padding:0;">
                                <span style="width:32px;height:32px;min-width:32px;border-radius:50%;background:<?= $accent_bg ?>;color:<?= $text ?>;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;margin:0;padding:0;"><?= $i ?></span>
                                <?php if ($i < 3) : ?>
                                    <span style="width:2px;flex:1;background:<?= $border ?>;margin:4px 0 0;min-height:20px;padding:0;"></span>
                                <?php endif; ?>
                            </div>
                            <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex:1;min-width:0;margin:0;padding:0;">
                                <div style="min-width:0;margin:0;padding:0;">
                                    <p style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:<?= $primary ?>;margin:0;padding:0;border:none;background:none;">STAP <?= $i ?></p>
                                    <p style="font-size:15px;font-weight:600;color:<?= $text ?>;margin:2px 0 0;padding:0;border:none;background:none;"><?= esc_html($s['stap_titel_' . $i]) ?></p>
                                    <p style="font-size:13px;color:<?= $muted ?>;margin:2px 0 0;padding:0;border:none;background:none;"><?= esc_html($s['stap_omschrijving_' . $i]) ?></p>
                                </div>
                                <span style="flex-shrink:0;white-space:nowrap;background:<?= $bg ?>;color:<?= $text ?>;font-size:12px;font-weight:600;padding:5px 14px;border-radius:20px;margin:8px 0 0;display:inline-block;"><?= esc_html($s['stap_duur_' . $i]) ?></span>
                            </div>
                        </li>
                        <?php endfor; ?>
                    </ol>

                    <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid <?= $border ?>;background:rgba(0,0,0,0.02);padding:20px 28px;margin:0;">
                        <span style="font-size:14px;font-weight:500;color:<?= $muted ?>;margin:0;padding:0;">Totale wachttijd tot start behandeling</span>
                        <span style="font-size:20px;font-weight:800;color:<?= $text ?>;margin:0;padding:0;"><?= esc_html($s['totale_wachttijd']) ?></span>
                    </div>
                </div>

            </div>
        </div>

        <style>
            @media (max-width: 768px) {
                .rtms-ow > div:first-child {
                    grid-template-columns: 1fr !important;
                }
            }
        </style>
        <?php
    }

    private function hex_to_light($hex, $opacity = 0.12) {
        $hex = ltrim($hex, '#');
        $r = hexdec(substr($hex, 0, 2));
        $g = hexdec(substr($hex, 2, 2));
        $b = hexdec(substr($hex, 4, 2));
        $r = round($r + (255 - $r) * (1 - $opacity));
        $g = round($g + (255 - $g) * (1 - $opacity));
        $b = round($b + (255 - $b) * (1 - $opacity));
        return sprintf('#%02x%02x%02x', $r, $g, $b);
    }
}