<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<?php
global $wpdb;
$tables  = ROS_DB::get_tables();
$edit_id = intval( $_GET['edit'] ?? 0 );
$editing = $edit_id ? $wpdb->get_row( $wpdb->prepare( "SELECT * FROM {$wpdb->prefix}ros_tables WHERE id=%d", $edit_id ), ARRAY_A ) : null;

// Shape definitions: key => [label, seats_default]
$shapes = [
  'rect_2'    => [ 'label' => 'Rechthoek — 2 pers.',  'seats' => 2  ],
  'rect_4'    => [ 'label' => 'Rechthoek — 4 pers.',  'seats' => 4  ],
  'rect_6'    => [ 'label' => 'Rechthoek — 6 pers.',  'seats' => 6  ],
  'rect_8'    => [ 'label' => 'Rechthoek — 8 pers.',  'seats' => 8  ],
  'rect_10'   => [ 'label' => 'Rechthoek — 10 pers.', 'seats' => 10 ],
  'oval_4'    => [ 'label' => 'Ovaal — 4 pers.',      'seats' => 4  ],
  'oval_6'    => [ 'label' => 'Ovaal — 6 pers.',      'seats' => 6  ],
  'oval_8'    => [ 'label' => 'Ovaal — 8 pers.',      'seats' => 8  ],
  'round_4'   => [ 'label' => 'Rond — 4 pers.',       'seats' => 4  ],
  'round_6'   => [ 'label' => 'Rond — 6 pers.',       'seats' => 6  ],
  'round_8'   => [ 'label' => 'Rond — 8 pers.',       'seats' => 8  ],
  'round_10'  => [ 'label' => 'Rond — 10 pers.',      'seats' => 10 ],
  'square_4'  => [ 'label' => 'Vierkant — 4 pers.',   'seats' => 4  ],
  'u_10'      => [ 'label' => 'U-vorm — 10 pers.',    'seats' => 10 ],
  'u_12'      => [ 'label' => 'U-vorm — 12 pers.',    'seats' => 12 ],
];
?>
<div class="ros-admin-wrap">
  <div class="ros-admin-header">
    <h1>🪑 Tafel Beheer</h1>
    <a href="<?php echo admin_url( 'admin.php?page=ros-tables&edit=new' ); ?>" class="ros-btn ros-btn-primary">+ Tafel Toevoegen</a>
  </div>
  <?php if ( isset( $_GET['saved'] ) ): ?><div class="notice notice-success"><p>✅ Opgeslagen!</p></div><?php endif; ?>

  <?php if ( isset( $_GET['edit'] ) ): ?>
  <div class="ros-form-card">
    <h2><?php echo $editing ? 'Tafel Bewerken' : 'Nieuwe Tafel'; ?></h2>
    <form method="post" action="<?php echo admin_url( 'admin-post.php' ); ?>">
      <?php wp_nonce_field( 'ros_table' ); ?>
      <input type="hidden" name="action" value="ros_save_table">
      <input type="hidden" name="table_id" value="<?php echo esc_attr( $editing['id'] ?? 0 ); ?>">

      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:20px">
        <div class="ros-field">
          <label>Tafelnaam</label>
          <input type="text" name="name" value="<?php echo esc_attr( $editing['name'] ?? '' ); ?>" required placeholder="bijv. Tafel 1">
        </div>
        <div class="ros-field">
          <label>Aantal Personen</label>
          <input type="number" name="seats" id="ros-seats-input" min="1" max="30" value="<?php echo esc_attr( $editing['seats'] ?? 4 ); ?>">
        </div>
        <div class="ros-field">
          <label>Volgorde</label>
          <input type="number" name="sort_order" value="<?php echo esc_attr( $editing['sort_order'] ?? 0 ); ?>">
        </div>
      </div>

      <input type="hidden" name="shape" id="ros-shape-input" value="<?php echo esc_attr( $editing['shape'] ?? 'rect_4' ); ?>">

      <div class="ros-field">
        <label style="font-size:0.85rem;font-weight:700;margin-bottom:12px;display:block">Tafel Vorm — klik om te kiezen</label>
        <div class="ros-shape-grid" id="ros-shape-grid">
          <?php foreach ( $shapes as $key => $def ): ?>
            <?php $active = ( ( $editing['shape'] ?? 'rect_4' ) === $key ) ? 'ros-shape-active' : ''; ?>
            <div class="ros-shape-tile <?php echo $active; ?>" data-shape="<?php echo esc_attr($key); ?>" data-seats="<?php echo esc_attr($def['seats']); ?>" title="<?php echo esc_attr($def['label']); ?>">
              <div class="ros-shape-svg"><?php echo ros_table_svg( $key, '#1A1A1A', 'rgba(0,0,0,0.12)' ); ?></div>
              <div class="ros-shape-label"><?php echo esc_html($def['label']); ?></div>
            </div>
          <?php endforeach; ?>
        </div>
      </div>

      <div style="margin-top:20px">
        <button type="submit" class="ros-btn ros-btn-primary">Opslaan</button>
        <a href="<?php echo admin_url( 'admin.php?page=ros-tables' ); ?>" class="ros-btn ros-btn-secondary">Annuleren</a>
      </div>
    </form>
  </div>

  <style>
  .ros-shape-grid { display:flex; flex-wrap:wrap; gap:10px; }
  .ros-shape-tile {
    width:110px; padding:12px 8px 8px; border-radius:10px; text-align:center;
    border:2px solid #e0e0e0; cursor:pointer; transition:all 0.18s; background:#fafafa;
  }
  .ros-shape-tile:hover { border-color:#C9A96E; background:#fffbf4; transform:translateY(-2px); }
  .ros-shape-tile.ros-shape-active { border-color:#1A1A1A; background:#1A1A1A; }
  .ros-shape-tile.ros-shape-active .ros-shape-label { color:#C9A96E; }
  .ros-shape-tile.ros-shape-active svg path,
  .ros-shape-tile.ros-shape-active svg rect,
  .ros-shape-tile.ros-shape-active svg ellipse,
  .ros-shape-tile.ros-shape-active svg circle { stroke:#C9A96E !important; fill:rgba(201,169,110,0.08) !important; }
  .ros-shape-tile.ros-shape-active .ros-shape-chair { stroke:#C9A96E !important; fill:rgba(201,169,110,0.15) !important; }
  .ros-shape-svg { width:70px; height:60px; margin:0 auto 6px; display:flex; align-items:center; justify-content:center; }
  .ros-shape-svg svg { width:100%; height:100%; }
  .ros-shape-label { font-size:0.68rem; font-weight:600; color:#555; line-height:1.3; }
  </style>

  <script>
  jQuery(function($){
    $('.ros-shape-tile').on('click', function(){
      $('.ros-shape-tile').removeClass('ros-shape-active');
      $(this).addClass('ros-shape-active');
      $('#ros-shape-input').val($(this).data('shape'));
      // Auto-fill seats with shape default
      var seats = $(this).data('seats');
      if(seats) $('#ros-seats-input').val(seats);
    });
  });
  </script>
  <?php endif; ?>

  <table class="widefat ros-table">
    <thead><tr><th>Vorm</th><th>Naam</th><th>Personen</th><th>Status</th><th>Volgorde</th><th>Acties</th></tr></thead>
    <tbody>
    <?php foreach ( $tables as $t ): ?>
      <tr>
        <td style="width:70px">
          <div style="width:54px;height:46px"><?php echo ros_table_svg( $t['shape'] ?? 'rect_4', '#333', '#eee' ); ?></div>
        </td>
        <td><strong><?php echo esc_html( $t['name'] ); ?></strong></td>
        <td><?php echo esc_html( $t['seats'] ); ?> personen</td>
        <td><span class="ros-status-pill ros-status-<?php echo esc_attr( $t['status'] ); ?>"><?php echo esc_html( ucfirst( $t['status'] ) ); ?></span></td>
        <td><?php echo esc_html( $t['sort_order'] ); ?></td>
        <td>
          <a href="<?php echo admin_url( 'admin.php?page=ros-tables&edit=' . $t['id'] ); ?>" class="button button-small">Bewerken</a>
          <a href="<?php echo wp_nonce_url( admin_url( 'admin-post.php?action=ros_delete_table&id=' . $t['id'] ), 'ros_del_table' ); ?>"
             class="button button-small ros-btn-danger-sm" onclick="return confirm('Tafel verwijderen?')">Verwijderen</a>
        </td>
      </tr>
    <?php endforeach; ?>
    </tbody>
  </table>
</div>
<?php

/**
 * Generate SVG for a table shape.
 * Uses top-down floor-plan view with chairs around the table.
 */
function ros_table_svg( $shape, $table_color = '#C9A96E', $chair_color = 'rgba(201,169,110,0.3)' ) {
    $tc  = esc_attr( $table_color );
    $cc  = esc_attr( $chair_color );
    $sw  = '1.5'; // stroke-width
    $out = '<svg viewBox="0 0 70 60" xmlns="http://www.w3.org/2000/svg" style="overflow:visible">';

    switch ( $shape ) {
        // ── RECTANGULAR ──────────────────────────────────────────────
        case 'rect_2':
            $out .= ros_svg_rect( 15,18,40,24, $tc, $sw );
            // 1 chair top, 1 bottom
            $out .= ros_svg_chair_h( 27,5, $cc, $sw );
            $out .= ros_svg_chair_h( 27,49, $cc, $sw );
            break;
        case 'rect_4':
            $out .= ros_svg_rect( 10,15,50,30, $tc, $sw );
            $out .= ros_svg_chair_h( 22,3, $cc, $sw );
            $out .= ros_svg_chair_h( 42,3, $cc, $sw );
            $out .= ros_svg_chair_h( 22,51, $cc, $sw );
            $out .= ros_svg_chair_h( 42,51, $cc, $sw );
            break;
        case 'rect_6':
            $out .= ros_svg_rect( 8,14,54,32, $tc, $sw );
            $out .= ros_svg_chair_h( 16,2, $cc, $sw );
            $out .= ros_svg_chair_h( 32,2, $cc, $sw );
            $out .= ros_svg_chair_h( 48,2, $cc, $sw );
            $out .= ros_svg_chair_h( 16,51, $cc, $sw );
            $out .= ros_svg_chair_h( 32,51, $cc, $sw );
            $out .= ros_svg_chair_h( 48,51, $cc, $sw );
            break;
        case 'rect_8':
            $out .= ros_svg_rect( 8,14,54,32, $tc, $sw );
            $out .= ros_svg_chair_h( 16,2, $cc, $sw );
            $out .= ros_svg_chair_h( 32,2, $cc, $sw );
            $out .= ros_svg_chair_h( 48,2, $cc, $sw );
            $out .= ros_svg_chair_h( 16,51, $cc, $sw );
            $out .= ros_svg_chair_h( 32,51, $cc, $sw );
            $out .= ros_svg_chair_h( 48,51, $cc, $sw );
            $out .= ros_svg_chair_v( 0,21, $cc, $sw );
            $out .= ros_svg_chair_v( 59,21, $cc, $sw );
            break;
        case 'rect_10':
            $out .= ros_svg_rect( 8,14,54,32, $tc, $sw );
            $out .= ros_svg_chair_h( 14,2, $cc, $sw );
            $out .= ros_svg_chair_h( 28,2, $cc, $sw );
            $out .= ros_svg_chair_h( 42,2, $cc, $sw );
            $out .= ros_svg_chair_h( 56,2, $cc, $sw );
            $out .= ros_svg_chair_h( 14,51, $cc, $sw );
            $out .= ros_svg_chair_h( 28,51, $cc, $sw );
            $out .= ros_svg_chair_h( 42,51, $cc, $sw );
            $out .= ros_svg_chair_h( 56,51, $cc, $sw );
            $out .= ros_svg_chair_v( 0,21, $cc, $sw );
            $out .= ros_svg_chair_v( 59,21, $cc, $sw );
            break;
        // ── OVAL ─────────────────────────────────────────────────────
        case 'oval_4':
            $out .= ros_svg_oval( 35,30,28,16, $tc, $sw );
            $out .= ros_svg_chair_h( 22,3, $cc, $sw );
            $out .= ros_svg_chair_h( 42,3, $cc, $sw );
            $out .= ros_svg_chair_h( 22,51, $cc, $sw );
            $out .= ros_svg_chair_h( 42,51, $cc, $sw );
            break;
        case 'oval_6':
            $out .= ros_svg_oval( 35,30,30,16, $tc, $sw );
            $out .= ros_svg_chair_h( 14,2, $cc, $sw );
            $out .= ros_svg_chair_h( 32,2, $cc, $sw );
            $out .= ros_svg_chair_h( 50,2, $cc, $sw );
            $out .= ros_svg_chair_h( 14,51, $cc, $sw );
            $out .= ros_svg_chair_h( 32,51, $cc, $sw );
            $out .= ros_svg_chair_h( 50,51, $cc, $sw );
            break;
        case 'oval_8':
            $out .= ros_svg_oval( 35,30,30,16, $tc, $sw );
            $out .= ros_svg_chair_h( 14,2, $cc, $sw );
            $out .= ros_svg_chair_h( 32,2, $cc, $sw );
            $out .= ros_svg_chair_h( 50,2, $cc, $sw );
            $out .= ros_svg_chair_h( 14,51, $cc, $sw );
            $out .= ros_svg_chair_h( 32,51, $cc, $sw );
            $out .= ros_svg_chair_h( 50,51, $cc, $sw );
            $out .= ros_svg_chair_v( 1,22, $cc, $sw );
            $out .= ros_svg_chair_v( 59,22, $cc, $sw );
            break;
        // ── ROUND ────────────────────────────────────────────────────
        case 'round_4':
            $out .= ros_svg_circle( 35,30,16, $tc, $sw );
            $out .= ros_svg_chair_h( 27,3, $cc, $sw );
            $out .= ros_svg_chair_h( 27,50, $cc, $sw );
            $out .= ros_svg_chair_v( 1,23, $cc, $sw );
            $out .= ros_svg_chair_v( 57,23, $cc, $sw );
            break;
        case 'round_6':
            $out .= ros_svg_circle( 35,30,17, $tc, $sw );
            for($i=0;$i<6;$i++){
                $angle = deg2rad($i*60 - 90);
                $ox = round(35 + 28*cos($angle),1);
                $oy = round(30 + 28*sin($angle),1);
                $out .= ros_svg_chair_dot($ox,$oy,$cc);
            }
            break;
        case 'round_8':
            $out .= ros_svg_circle( 35,30,17, $tc, $sw );
            for($i=0;$i<8;$i++){
                $angle = deg2rad($i*45 - 90);
                $ox = round(35 + 27*cos($angle),1);
                $oy = round(30 + 27*sin($angle),1);
                $out .= ros_svg_chair_dot($ox,$oy,$cc);
            }
            break;
        case 'round_10':
            $out .= ros_svg_circle( 35,30,17, $tc, $sw );
            for($i=0;$i<10;$i++){
                $angle = deg2rad($i*36 - 90);
                $ox = round(35 + 27*cos($angle),1);
                $oy = round(30 + 27*sin($angle),1);
                $out .= ros_svg_chair_dot($ox,$oy,$cc);
            }
            break;
        // ── SQUARE ───────────────────────────────────────────────────
        case 'square_4':
            $out .= ros_svg_rect( 16,14,38,32, $tc, $sw );
            $out .= ros_svg_chair_h( 27,2, $cc, $sw );
            $out .= ros_svg_chair_h( 27,51, $cc, $sw );
            $out .= ros_svg_chair_v( 1,23, $cc, $sw );
            $out .= ros_svg_chair_v( 57,23, $cc, $sw );
            break;
        // ── U SHAPE ──────────────────────────────────────────────────
        case 'u_10':
            // U shape: 3 sides
            $out .= '<rect x="8" y="8" width="14" height="44" rx="2" fill="'.$chair_color.'" stroke="'.$tc.'" stroke-width="'.$sw.'"/>';
            $out .= '<rect x="48" y="8" width="14" height="44" rx="2" fill="'.$chair_color.'" stroke="'.$tc.'" stroke-width="'.$sw.'"/>';
            $out .= '<rect x="8" y="44" width="54" height="14" rx="2" fill="'.$chair_color.'" stroke="'.$tc.'" stroke-width="'.$sw.'"/>';
            // Chairs along outside
            $out .= ros_svg_chair_v( 0,12, $cc, $sw );
            $out .= ros_svg_chair_v( 0,28, $cc, $sw );
            $out .= ros_svg_chair_v( 59,12, $cc, $sw );
            $out .= ros_svg_chair_v( 59,28, $cc, $sw );
            $out .= ros_svg_chair_h( 14,55, $cc, $sw );
            $out .= ros_svg_chair_h( 28,55, $cc, $sw );
            $out .= ros_svg_chair_h( 42,55, $cc, $sw );
            $out .= ros_svg_chair_h( 56,55, $cc, $sw );
            break;
        case 'u_12':
            $out .= '<rect x="8" y="8" width="14" height="44" rx="2" fill="'.$chair_color.'" stroke="'.$tc.'" stroke-width="'.$sw.'"/>';
            $out .= '<rect x="48" y="8" width="14" height="44" rx="2" fill="'.$chair_color.'" stroke="'.$tc.'" stroke-width="'.$sw.'"/>';
            $out .= '<rect x="8" y="44" width="54" height="14" rx="2" fill="'.$chair_color.'" stroke="'.$tc.'" stroke-width="'.$sw.'"/>';
            $out .= ros_svg_chair_v( 0,10, $cc, $sw );
            $out .= ros_svg_chair_v( 0,24, $cc, $sw );
            $out .= ros_svg_chair_v( 0,38, $cc, $sw );
            $out .= ros_svg_chair_v( 59,10, $cc, $sw );
            $out .= ros_svg_chair_v( 59,24, $cc, $sw );
            $out .= ros_svg_chair_v( 59,38, $cc, $sw );
            $out .= ros_svg_chair_h( 12,55, $cc, $sw );
            $out .= ros_svg_chair_h( 24,55, $cc, $sw );
            $out .= ros_svg_chair_h( 36,55, $cc, $sw );
            $out .= ros_svg_chair_h( 48,55, $cc, $sw );
            $out .= ros_svg_chair_h( 60,55, $cc, $sw );
            break;
        default:
            $out .= ros_svg_rect( 10,14,50,32, $tc, $sw );
            $out .= ros_svg_chair_h( 22,2, $cc, $sw );
            $out .= ros_svg_chair_h( 42,2, $cc, $sw );
            $out .= ros_svg_chair_h( 22,51, $cc, $sw );
            $out .= ros_svg_chair_h( 42,51, $cc, $sw );
    }

    $out .= '</svg>';
    return $out;
}

// ── SVG primitive helpers ──
function ros_svg_rect($x,$y,$w,$h,$c,$sw){
    return "<rect x='$x' y='$y' width='$w' height='$h' rx='3' fill='rgba(0,0,0,0.04)' stroke='$c' stroke-width='$sw'/>";
}
function ros_svg_oval($cx,$cy,$rx,$ry,$c,$sw){
    return "<ellipse cx='$cx' cy='$cy' rx='$rx' ry='$ry' fill='rgba(0,0,0,0.04)' stroke='$c' stroke-width='$sw'/>";
}
function ros_svg_circle($cx,$cy,$r,$c,$sw){
    return "<circle cx='$cx' cy='$cy' r='$r' fill='rgba(0,0,0,0.04)' stroke='$c' stroke-width='$sw'/>";
}
// Chair above/below (horizontal placement)
function ros_svg_chair_h($cx,$y,$c,$sw){
    $x = $cx - 6; $w = 12; $h = 7;
    return "<rect x='$x' y='$y' width='$w' height='$h' rx='2' class='ros-shape-chair' fill='rgba(0,0,0,0.06)' stroke='$c' stroke-width='$sw'/>";
}
// Chair left/right (vertical placement)
function ros_svg_chair_v($x,$cy,$c,$sw){
    $y = $cy - 6; $w = 7; $h = 12;
    return "<rect x='$x' y='$y' width='$w' height='$h' rx='2' class='ros-shape-chair' fill='rgba(0,0,0,0.06)' stroke='$c' stroke-width='$sw'/>";
}
// Radial chair dot for round tables
function ros_svg_chair_dot($cx,$cy,$c){
    return "<circle cx='$cx' cy='$cy' r='4' class='ros-shape-chair' fill='rgba(0,0,0,0.06)' stroke='$c' stroke-width='1.2'/>";
}
