<?php
/* Smarty version 3.1.30, created on 2026-06-27 05:56:50
  from "/var/www/clients/client1/web17/web/includes/templates/templates/broker/booking.tpl" */

/* @var Smarty_Internal_Template $_smarty_tpl */
if ($_smarty_tpl->_decodeProperties($_smarty_tpl, array (
  'version' => '3.1.30',
  'unifunc' => 'content_6a3f4a0279cb82_65483531',
  'has_nocache_code' => false,
  'file_dependency' => 
  array (
    'ee95fd8830cdf825436970caf0077d414a3acb5a' => 
    array (
      0 => '/var/www/clients/client1/web17/web/includes/templates/templates/broker/booking.tpl',
      1 => 1780694932,
      2 => 'file',
    ),
  ),
  'includes' => 
  array (
  ),
),false)) {
function content_6a3f4a0279cb82_65483531 (Smarty_Internal_Template $_smarty_tpl) {
?>

<link rel="stylesheet" href="<?php echo @constant('SITE_URL');?>
/assets/css/cockpit.css?v=<?php echo filemtime((@constant('PATH_SYSTEM')).('/assets/css/cockpit.css'));?>
">
<style>
.bkbk .bk-section{ background:var(--bg-surface,#fff); border:1px solid var(--border-color,#e6e7eb); border-radius:12px; padding:16px; margin-bottom:14px; }
.bkbk .bk-section-h{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem; color:var(--text,#1e2633); margin-bottom:12px; }
.bkbk .bk-section-h .material-icons{ font-size:19px; color:var(--primary,#0b4677); }
.bkbk .form-label{ font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.3px; color:var(--text-muted,#8a909d); margin-bottom:3px; }
.bkbk .input-group-text{ background:var(--bg-surface-secondary,#f6f8fb); color:var(--text-muted,#8a909d); }
.bkbk .input-group-text .material-icons{ font-size:17px; }
.bkbk .bk-plate{ text-transform:uppercase; font-weight:600; letter-spacing:.5px; }
/* Stellplatz als Segmented-Control */
.bkbk .bk-seg{ display:inline-flex; width:100%; }
.bkbk .bk-seg .btn{ flex:1; border:1px solid var(--border-color,#e6e7eb); color:var(--text,#1e2633); background:var(--bg-surface,#fff); font-weight:500; }
.bkbk .bk-seg .btn-check:checked + .btn{ background:var(--primary,#0b4677); border-color:var(--primary,#0b4677); color:#fff; }
/* Reiselänge / Dauer als Pill */
.bkbk .bk-pill{ display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:600; color:var(--primary,#0b4677); background:var(--primary-lt,rgba(11,70,119,.07)); border-radius:20px; padding:6px 14px; }
.bkbk .bk-pill .material-icons{ font-size:16px; }
/* Zusatzleistungen */
.bkbk .bk-prod-row{ display:flex; align-items:center; gap:8px; padding:9px 11px; border:1px solid var(--border-color,#e6e7eb); border-radius:8px; height:100%; transition:border-color .12s,background-color .12s; }
.bkbk .bk-prod-row:hover{ border-color:var(--primary,#0b4677); background:var(--bg-surface-secondary,#f6f8fb); }
.bkbk .bk-prod-row .form-check-input{ -webkit-appearance:auto; appearance:auto; width:1.15em; height:1.15em; min-height:auto; margin:0; flex:0 0 auto; box-shadow:none; cursor:pointer; }
.bkbk .bk-prod-row label{ margin:0; cursor:pointer; }
/* Zusammenfassung */
.bkbk .bk-summary{ background:linear-gradient(180deg, var(--primary-lt,rgba(11,70,119,.05)), var(--bg-surface,#fff)); border:1px solid var(--primary-lt,#d7e3ee); border-radius:12px; overflow:hidden; }
.bkbk .bk-summary-h{ background:var(--primary,#0b4677); color:#fff; padding:12px 16px; font-weight:600; display:flex; align-items:center; gap:8px; }
.bkbk .bk-summary-h .material-icons{ font-size:18px; }
.bkbk .bk-summary-b{ padding:16px; }
.bkbk .bk-kv{ display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; border-bottom:1px dashed var(--border-color-light,#eef0f3); }
.bkbk .bk-kv:last-of-type{ border-bottom:0; }
.bkbk .bk-kv .k{ color:var(--text-secondary,#626d7d); font-size:.85rem; }
.bkbk .bk-kv .v{ font-weight:700; }
.bkbk .bk-kv.bk-gross .v{ font-size:1.15rem; color:var(--primary,#0b4677); }
.bkbk .bk-kv.bk-comm .v{ color:var(--green,#2fb344); }
</style>

<div class="bkbk">
  <div class="page-header">
    <div class="stat-label">Vermittler-Portal</div>
    <h1 class="h3 mb-0">Buchung anlegen</h1>
    <div class="text-muted small mt-1">Neue Buchung zu festen Systempreisen erfassen.</div>
  </div>

  <form id="brokerBookingForm" autocomplete="off">
    <div class="row g-3">

      
      <div class="col-12 col-xl-8">
        <div class="bk-section">
          <div class="bk-section-h"><i class="material-icons">event</i> Reisedaten</div>
          <div class="row g-3">
            <div class="col-12 col-md-6">
              <label class="form-label">Event / Schiff</label>
              <input type="text" id="bkEvent" name="event" class="form-control" list="bkEventList" placeholder="Event wählen oder eingeben">
              <datalist id="bkEventList"></datalist>
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">Anreise (von)</label>
              <input type="date" id="bkBegin" name="begin" class="form-control" required>
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">Abreise (bis)</label>
              <input type="date" id="bkEnd" name="end" class="form-control" required>
            </div>
            <div class="col-12 col-md-6">
              <label class="form-label">Stellplatz</label>
              <div class="bk-seg" role="group" aria-label="Stellplatz">
                <input type="radio" class="btn-check" name="type" id="bkType1" value="1" checked>
                <label class="btn" for="bkType1"><i class="material-icons sm" style="vertical-align:-3px;">warehouse</i> Halle</label>
                <input type="radio" class="btn-check" name="type" id="bkType2" value="2">
                <label class="btn" for="bkType2"><i class="material-icons sm" style="vertical-align:-3px;">wb_sunny</i> Außen</label>
              </div>
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">Gäste</label>
              <input type="number" id="bkGuests" name="guests" class="form-control" min="1" value="2">
            </div>
            <div class="col-6 col-md-3">
              <label class="form-label">Reiselänge</label>
              <div><span class="bk-pill"><i class="material-icons">schedule</i> <span id="bkDuration">– Tage</span></span></div>
            </div>
          </div>

          <div class="mt-3">
            <label class="form-label">Zusatzleistungen</label>
            <div id="bkProducts" class="row g-2"><div class="text-muted small">Wird geladen …</div></div>
          </div>
        </div>

        <div class="bk-section">
          <div class="bk-section-h"><i class="material-icons">person</i> Fahrzeug &amp; Kunde</div>
          <div class="row g-3">
            <div class="col-12 col-md-4">
              <label class="form-label">Kennzeichen</label>
              <div class="input-group"><span class="input-group-text"><i class="material-icons sm">directions_car</i></span><input type="text" name="plate" class="form-control bk-plate" placeholder="HRO AB 123"></div>
            </div>
            <div class="col-6 col-md-4">
              <label class="form-label">Nachname *</label>
              <input type="text" name="customer_lastname" class="form-control" required>
            </div>
            <div class="col-6 col-md-4">
              <label class="form-label">Vorname</label>
              <input type="text" name="customer_firstname" class="form-control">
            </div>
            <div class="col-12 col-md-6">
              <label class="form-label">Straße &amp; Nr.</label>
              <input type="text" name="customer_street" class="form-control" autocomplete="off" data-addr-street data-addr-zip="[name=customer_zipcode]" data-addr-city="[name=customer_city]">
            </div>
            <div class="col-4 col-md-2">
              <label class="form-label">PLZ</label>
              <input type="text" name="customer_zipcode" class="form-control">
            </div>
            <div class="col-8 col-md-4">
              <label class="form-label">Ort</label>
              <input type="text" name="customer_city" class="form-control">
            </div>
            <div class="col-12 col-md-6">
              <label class="form-label">E-Mail</label>
              <div class="input-group"><span class="input-group-text"><i class="material-icons sm">mail</i></span><input type="email" name="customer_email" class="form-control"></div>
            </div>
            <div class="col-12 col-md-6">
              <label class="form-label">Telefon</label>
              <div class="input-group"><span class="input-group-text"><i class="material-icons sm">call</i></span><input type="text" name="customer_phone" class="form-control"></div>
            </div>
          </div>
        </div>
      </div>

      
      <div class="col-12 col-xl-4">
        <div class="bk-summary position-sticky" style="top:70px;">
          <div class="bk-summary-h"><i class="material-icons">receipt_long</i> Zusammenfassung</div>
          <div class="bk-summary-b">
            <div id="bkPositions" class="small mb-2 text-muted">Bitte Reisezeitraum &amp; Stellplatz wählen.</div>
            <div class="bk-kv"><span class="k">Netto</span><span class="v" id="bkNet">–</span></div>
            <div class="bk-kv bk-gross"><span class="k">Brutto (inkl. MwSt)</span><span class="v" id="bkGross">–</span></div>
            <div class="bk-kv bk-comm"><span class="k">Ihre Provision <span id="bkRate" class="text-muted"></span></span><span class="v" id="bkCommission">–</span></div>
            <div class="js-broker-status small mt-2"></div>
            <button type="submit" class="btn btn-primary w-100 mt-3" id="bkSubmit"><i class="material-icons sm">check_circle</i> Buchung anlegen</button>
          </div>
        </div>
      </div>

    </div>
  </form>
</div>


<div class="modal fade" id="bkDoneModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title"><i class="material-icons">check_circle</i> Buchung angelegt</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <div class="modal-body" id="bkDoneBody"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light" data-bs-dismiss="modal" id="bkNew">Weitere Buchung</button>
        <a class="btn btn-primary" href="<?php echo @constant('SITE_URL');?>
/broker/bookings/">Zu meinen Buchungen</a>
      </div>
    </div>
  </div>
</div>

<?php echo '<script'; ?>
 src="<?php echo @constant('SITE_URL');?>
/assets/js/day-broker.js?v=<?php echo filemtime((@constant('PATH_SYSTEM')).('/assets/js/day-broker.js'));?>
"><?php echo '</script'; ?>
>
<?php }
}