@layout("content.master")
@section('head')
<title>{{$content->title}}</title>
<style type="text/css">
    li{list-style: none; margin-bottom: 4px; }
</style>
<meta name="product-id" content="{{$content->id}}">
@stop
@section('content')
<div class="container">
  @if(session()->has('success'))
  <div class="alert alert-success">{{session()->get('success')}}</div>
  @elseif(session()->has('error'))
  <div class="alert alert-danger">{{session()->get('error')}}</div>
  @endif
  <section>
    <div class="row">
      <div class="col-12 col-lg-5">
        @if(empty($content->image))
        <img src="https://picsum.photos/300/200" class="card-img-top img-fluid rounded border"  alt="...">
        @else
        <img src="{{$content->image}}" class="card-img-top img-fluid"  alt="...">
        @endif
      <br>
      <br>
      <br>
    </div>
    <div class="col-12 col-lg-5 offset-lg-1">
      <h1 class="h2">{{$content->title}}</h1>
      <div class="ms-3 mt-3 mb-3">
          <span class="fs-4 fw-bold" style="color: #546c8a;">{{$content->data_fields['preis']}} €</span>
          <span class="text-muted fs-7">Inkl. MwSt.</span>
      </div>
      <div class="ms-3 mt-3 mb-3 fs-6 fw-bolder" style="color: #79b27f;">
          @if(2==2)
              <svg style="fill: currentColor; width: 22px; margin-right: 10px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H112C85.5 0 64 21.5 64 48v48H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h272c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H40c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H64v128c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z"/></svg>
              Sofort verfügbar!
          @elseif(2==3)
              <svg style="fill: currentColor; width: 22px; margin-right: 10px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M624 352h-16V243.9c0-12.7-5.1-24.9-14.1-33.9L494 110.1c-9-9-21.2-14.1-33.9-14.1H416V48c0-26.5-21.5-48-48-48H112C85.5 0 64 21.5 64 48v48H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h272c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H40c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H8c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h208c4.4 0 8 3.6 8 8v16c0 4.4-3.6 8-8 8H64v128c0 53 43 96 96 96s96-43 96-96h128c0 53 43 96 96 96s96-43 96-96h48c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zM160 464c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm320 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48zm80-208H416V144h44.1l99.9 99.9V256z"/></svg>
                Nachschub ist unterwegs. Jetzt vorbestellen!
          @endif
          <br>
          <svg style="fill: currentColor; width:18px; margin-right: 15px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504.99 105.01l-97.9-98c-7.71-7.71-16-7-23.1-7v128h128c0-7.53.64-15.35-7-23zm-153 31V.01H152c-13.3 0-24 10.7-24 24V133c18.3-5 19.58-5 26.45-5 16.23 0 32.1 6.67 43.53 18.3 8.72 9.59 4.41 6.98 18.28 10.76 21.07 5.75 37.64 22.53 43.23 43.8 3.11 13.2.6 8.66 10.75 18.99 15.25 15.51 21.26 38.26 15.7 59.36-3.75 13.23-3.71 8.01 0 22.12 5.57 21.11-.45 43.85-15.69 59.37-9.64 9.36-7.04 4.88-10.75 18.99-4.89 18.59-18.16 33.75-35.5 41.12V512h263.99c13.3 0 24-10.7 24-24V160.01h-136c-13.2 0-24-10.8-24-24zM247.42 338.28c7.4-7.53 10.29-18.5 7.58-28.79-5.43-20.65-5.44-17.74 0-38.42 2.71-10.28-.18-21.26-7.58-28.79-14.86-15.12-13.43-12.61-18.87-33.27-2.71-10.28-10.6-18.32-20.71-21.07-20.28-5.53-17.84-4.1-32.69-19.21-7.4-7.53-18.18-10.47-28.28-7.71-20.32 5.54-17.46 5.53-37.75 0-10.1-2.76-20.88.19-28.28 7.71-14.91 15.18-12.5 13.7-32.69 19.21-10.11 2.76-18 10.79-20.71 21.07-5.46 20.74-4 18.13-18.87 33.27-7.4 7.53-10.29 18.5-7.58 28.79 5.45 20.71 5.42 17.79 0 38.41-2.71 10.28.18 21.26 7.58 28.79 14.85 15.11 13.43 12.61 18.87 33.27 2.71 10.28 10.6 18.32 20.71 21.07 14.31 3.9 11.52 2.97 15.84 5V512l64-32 64 32V397.62c4.31-2.02 1.52-1.1 15.84-5 10.11-2.76 18-10.79 20.71-21.07 5.47-20.74 4.01-18.13 18.88-33.27zM128 352.01c-35.34 0-64-28.65-64-64s28.66-64 64-64 64 28.65 64 64-28.66 64-64 64z"/></svg>
          Kostenloser Anmeldeservice beim Netzbetreiber inklusive
      </div>
      <br>

        <div class="row">
            <div class="col">
                <h5>Kurzbeschreibung</h5>

                {!!$content->data_fields['kurzbeschreibung']!!}
            </div>
        </div>


      <div class="row mt-5">
          <div class="col-6">
            <button style="display: none;" id="btn-add-to-bag" data-id="{{$content->id}}" class="btn btn-outline-success  mb-5" style="padding-top: 6px; padding-bottom: 6px; padding-right: 20px; padding-left: 20px;">
              <svg style="fill: currentColor; width: 19px; margin-right: 8px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>
              In den Einkaufswagen
            </button>
            <button style="display: none;" id="btn-show-bag" type="button" data-bs-toggle="modal" data-bs-target="#ShoppingCart" class="btn btn-success position-relative mb-5">
              Im Warenkorb ansehen
              <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" id="count-items-in-bag"></span>
            </button>
          </div>
          <div style="display: none;" class="col-12 col-md-6">
              <button id="btn-check-out" data-id="{{$content->id}}" class="btn btn-primary  mb-5" style="padding-top: 6px; padding-bottom: 6px; padding-right: 20px; padding-left: 20px;">
                  <svg style="fill: white; width: 19px; margin-right: 8px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 128C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128H0v304c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V128h-96zM224 48c44.112 0 80 35.888 80 80H144c0-44.112 35.888-80 80-80zm176 384c0 17.645-14.355 32-32 32H80c-17.645 0-32-14.355-32-32V176h48v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h160v40c0 13.255 10.745 24 24 24s24-10.745 24-24v-40h48v256z"/></svg>
                  Unverbindlich anfragen
              </button>
          </div>
      </div>



      </div>

        <div class="row">
            <div class="col-12 mt-5">

                <style>
                    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
                        color: var(--bs-nav-pills-link-active-color);
                        background-color:#79b27f ;
                    }
                </style>
                <div class="card">
                    <div class="card-header" style="background-color: #546c8a; color: white;">
                        <nav class="nav nav-pills nav-justified">
                            <a class="nav-link text-light active" href="#" data-bs-toggle="tab" data-bs-target="#bla1" type="button" role="tab" aria-controls="bla1" aria-selected="false">Beschreibung</a>
                            <a class="nav-link text-light" href="#" data-bs-toggle="tab" data-bs-target="#bla2" type="button" role="tab" aria-controls="bla2" aria-selected="false">Technische Daten</a>
                            <a class="nav-link text-light" href="#" data-bs-toggle="tab" data-bs-target="#bla3" type="button" role="tab" aria-controls="bla3" aria-selected="false">Datenblätter & Downloads</a>
                            <a class="nav-link text-light" href="#" data-bs-toggle="tab" data-bs-target="#bla3" type="button" role="tab" aria-controls="bla4" aria-selected="false">Garantien</a>
                        </nav>


                    </div>

                    <div class="tab-content" id="myTabContent">


                        <div class="tab-pane fade show active" id="bla1" role="bla1" aria-labelledby="bla1" tabindex="0">
                            <div class="card-body" style="min-height: 300px;">

                                <h4 class="mt-3 mb-4">Beschreibung</h4>

                                {!!$content->data_fields['beschreibung']!!}
                            </div>
                        </div>

                        <div class="tab-pane fade" id="bla2" role="bla2" aria-labelledby="bla2" tabindex="0">
                            <div class="card-body" style="min-height: 300px;">
                                <h4 class="mt-3 mb-5">Technische Daten</h4>


                                {!!$content->data_fields['technische_daten']!!}



                            </div>
                        </div>

                        <div class="tab-pane fade" id="bla3" role="bla3" aria-labelledby="bla3" tabindex="0">
                            <div class="card-body" style="min-height: 300px;">
                                <h4 class="mt-3 mb-4">Datenbläter & Downloads</h4>

                                <br>

                                <ul>

                                    @if(str_contains($content->title, 'Blue'))
                                        <li class="mb-4">
                                        <a href="" class="mb-4 text-decoration-none">
                                            <svg style="fill: currentColor; width: 12px; margin-bottom: 2px; margin-right: 2px; " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M369.9 97.98L286.02 14.1c-9-9-21.2-14.1-33.89-14.1H47.99C21.5.1 0 21.6 0 48.09v415.92C0 490.5 21.5 512 47.99 512h288.02c26.49 0 47.99-21.5 47.99-47.99V131.97c0-12.69-5.1-24.99-14.1-33.99zM256.03 32.59c2.8.7 5.3 2.1 7.4 4.2l83.88 83.88c2.1 2.1 3.5 4.6 4.2 7.4h-95.48V32.59zm95.98 431.42c0 8.8-7.2 16-16 16H47.99c-8.8 0-16-7.2-16-16V48.09c0-8.8 7.2-16.09 16-16.09h176.04v104.07c0 13.3 10.7 23.93 24 23.93h103.98v304.01zM208 216c0-4.42-3.58-8-8-8h-16c-4.42 0-8 3.58-8 8v88.02h-52.66c-11 0-20.59 6.41-25 16.72-4.5 10.52-2.38 22.62 5.44 30.81l68.12 71.78c5.34 5.59 12.47 8.69 20.09 8.69s14.75-3.09 20.09-8.7l68.12-71.75c7.81-8.2 9.94-20.31 5.44-30.83-4.41-10.31-14-16.72-25-16.72H208V216zm42.84 120.02l-58.84 62-58.84-62h117.68z"/></svg>
                                            PV-Modul: LONGi 60HIH-375M, black frame</a>
                                    </li>
                                    @endif

                                        @if(str_contains($content->title, 'Black'))
                                            <li class="mb-4">
                                            <a href="" class="mb-4 text-decoration-none">
                                                <svg style="fill: currentColor; width: 12px; margin-bottom: 2px; margin-right: 2px; " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M369.9 97.98L286.02 14.1c-9-9-21.2-14.1-33.89-14.1H47.99C21.5.1 0 21.6 0 48.09v415.92C0 490.5 21.5 512 47.99 512h288.02c26.49 0 47.99-21.5 47.99-47.99V131.97c0-12.69-5.1-24.99-14.1-33.99zM256.03 32.59c2.8.7 5.3 2.1 7.4 4.2l83.88 83.88c2.1 2.1 3.5 4.6 4.2 7.4h-95.48V32.59zm95.98 431.42c0 8.8-7.2 16-16 16H47.99c-8.8 0-16-7.2-16-16V48.09c0-8.8 7.2-16.09 16-16.09h176.04v104.07c0 13.3 10.7 23.93 24 23.93h103.98v304.01zM208 216c0-4.42-3.58-8-8-8h-16c-4.42 0-8 3.58-8 8v88.02h-52.66c-11 0-20.59 6.41-25 16.72-4.5 10.52-2.38 22.62 5.44 30.81l68.12 71.78c5.34 5.59 12.47 8.69 20.09 8.69s14.75-3.09 20.09-8.7l68.12-71.75c7.81-8.2 9.94-20.31 5.44-30.83-4.41-10.31-14-16.72-25-16.72H208V216zm42.84 120.02l-58.84 62-58.84-62h117.68z"/></svg>
                                                PV-Modul: JA-Solar JAM60S21 365 /MR FULL BLACK</a>
                                        </li>
                                    @endif

                                        <li class="mb-4">
                                        <a href="" class="mb-4 text-decoration-none">
                                            <svg style="fill: currentColor; width: 12px; margin-bottom: 2px; margin-right: 2px; " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M369.9 97.98L286.02 14.1c-9-9-21.2-14.1-33.89-14.1H47.99C21.5.1 0 21.6 0 48.09v415.92C0 490.5 21.5 512 47.99 512h288.02c26.49 0 47.99-21.5 47.99-47.99V131.97c0-12.69-5.1-24.99-14.1-33.99zM256.03 32.59c2.8.7 5.3 2.1 7.4 4.2l83.88 83.88c2.1 2.1 3.5 4.6 4.2 7.4h-95.48V32.59zm95.98 431.42c0 8.8-7.2 16-16 16H47.99c-8.8 0-16-7.2-16-16V48.09c0-8.8 7.2-16.09 16-16.09h176.04v104.07c0 13.3 10.7 23.93 24 23.93h103.98v304.01zM208 216c0-4.42-3.58-8-8-8h-16c-4.42 0-8 3.58-8 8v88.02h-52.66c-11 0-20.59 6.41-25 16.72-4.5 10.52-2.38 22.62 5.44 30.81l68.12 71.78c5.34 5.59 12.47 8.69 20.09 8.69s14.75-3.09 20.09-8.7l68.12-71.75c7.81-8.2 9.94-20.31 5.44-30.83-4.41-10.31-14-16.72-25-16.72H208V216zm42.84 120.02l-58.84 62-58.84-62h117.68z"/></svg>

                                            Microwechselrichter: Hoymiles HM-600/700/800
                                        </a>
                                    </li>
                                        <li class="mb-4">
                                        <a href="" class="mb-4 text-decoration-none">
                                            <svg style="fill: currentColor; width: 12px; margin-bottom: 2px; margin-right: 2px; " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M369.9 97.98L286.02 14.1c-9-9-21.2-14.1-33.89-14.1H47.99C21.5.1 0 21.6 0 48.09v415.92C0 490.5 21.5 512 47.99 512h288.02c26.49 0 47.99-21.5 47.99-47.99V131.97c0-12.69-5.1-24.99-14.1-33.99zM256.03 32.59c2.8.7 5.3 2.1 7.4 4.2l83.88 83.88c2.1 2.1 3.5 4.6 4.2 7.4h-95.48V32.59zm95.98 431.42c0 8.8-7.2 16-16 16H47.99c-8.8 0-16-7.2-16-16V48.09c0-8.8 7.2-16.09 16-16.09h176.04v104.07c0 13.3 10.7 23.93 24 23.93h103.98v304.01zM208 216c0-4.42-3.58-8-8-8h-16c-4.42 0-8 3.58-8 8v88.02h-52.66c-11 0-20.59 6.41-25 16.72-4.5 10.52-2.38 22.62 5.44 30.81l68.12 71.78c5.34 5.59 12.47 8.69 20.09 8.69s14.75-3.09 20.09-8.7l68.12-71.75c7.81-8.2 9.94-20.31 5.44-30.83-4.41-10.31-14-16.72-25-16.72H208V216zm42.84 120.02l-58.84 62-58.84-62h117.68z"/></svg>
                                            Hoymiles NA-Zertifikat
                                        </a>
                                    </li>
                                        <li class="mb-4">
                                        <a href="" class="mb-4 text-decoration-none">
                                            <svg style="fill: currentColor; width: 12px; margin-bottom: 2px; margin-right: 2px; " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M369.9 97.98L286.02 14.1c-9-9-21.2-14.1-33.89-14.1H47.99C21.5.1 0 21.6 0 48.09v415.92C0 490.5 21.5 512 47.99 512h288.02c26.49 0 47.99-21.5 47.99-47.99V131.97c0-12.69-5.1-24.99-14.1-33.99zM256.03 32.59c2.8.7 5.3 2.1 7.4 4.2l83.88 83.88c2.1 2.1 3.5 4.6 4.2 7.4h-95.48V32.59zm95.98 431.42c0 8.8-7.2 16-16 16H47.99c-8.8 0-16-7.2-16-16V48.09c0-8.8 7.2-16.09 16-16.09h176.04v104.07c0 13.3 10.7 23.93 24 23.93h103.98v304.01zM208 216c0-4.42-3.58-8-8-8h-16c-4.42 0-8 3.58-8 8v88.02h-52.66c-11 0-20.59 6.41-25 16.72-4.5 10.52-2.38 22.62 5.44 30.81l68.12 71.78c5.34 5.59 12.47 8.69 20.09 8.69s14.75-3.09 20.09-8.7l68.12-71.75c7.81-8.2 9.94-20.31 5.44-30.83-4.41-10.31-14-16.72-25-16.72H208V216zm42.84 120.02l-58.84 62-58.84-62h117.68z"/></svg>

                                            Hoymiles Einheitenzertifikat
                                        </a>
                                    </li>
                                    <li class="mb-4">
                                        <a href="" class="mb-4 text-decoration-none">
                                            <svg style="fill: currentColor; width: 12px; margin-bottom: 2px; margin-right: 2px; " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M369.9 97.98L286.02 14.1c-9-9-21.2-14.1-33.89-14.1H47.99C21.5.1 0 21.6 0 48.09v415.92C0 490.5 21.5 512 47.99 512h288.02c26.49 0 47.99-21.5 47.99-47.99V131.97c0-12.69-5.1-24.99-14.1-33.99zM256.03 32.59c2.8.7 5.3 2.1 7.4 4.2l83.88 83.88c2.1 2.1 3.5 4.6 4.2 7.4h-95.48V32.59zm95.98 431.42c0 8.8-7.2 16-16 16H47.99c-8.8 0-16-7.2-16-16V48.09c0-8.8 7.2-16.09 16-16.09h176.04v104.07c0 13.3 10.7 23.93 24 23.93h103.98v304.01zM208 216c0-4.42-3.58-8-8-8h-16c-4.42 0-8 3.58-8 8v88.02h-52.66c-11 0-20.59 6.41-25 16.72-4.5 10.52-2.38 22.62 5.44 30.81l68.12 71.78c5.34 5.59 12.47 8.69 20.09 8.69s14.75-3.09 20.09-8.7l68.12-71.75c7.81-8.2 9.94-20.31 5.44-30.83-4.41-10.31-14-16.72-25-16.72H208V216zm42.84 120.02l-58.84 62-58.84-62h117.68z"/></svg>

                                            Garantiebedingungen Hoymiles
                                        </a>
                                    </li>
                                </ul>

                                <br>
                                <br>
                                <br>
                                <br>
                                <br>
                                <br>






                            </div>
                        </div>

                        <div class="tab-pane fade" id="bla3" role="bla3" aria-labelledby="bla3" tabindex="0">
                            <div class="card-body" style="min-height: 300px;">
                                <h4 class="mt-3 mb-4">Beschreibung</h4>
                                <p>
                                    Bla1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta fugit libero maiores minima nihil. A aspernatur est fugiat hic nihil? Ab expedita facere hic ipsum perspiciatis quaerat quia quod tempore?
                                </p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam consequatur eius fuga impedit ipsum, magni molestiae recusandae saepe sed ullam veniam voluptates. Corporis expedita iusto magni maxime, minus perferendis?</p>

                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam consequatur eius fuga impedit ipsum, magni molestiae recusandae saepe sed ullam veniam voluptates. Corporis expedita iusto magni maxime, minus perferendis?</p>

                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aperiam consequatur eius fuga impedit ipsum, magni molestiae recusandae saepe sed ullam veniam voluptates. Corporis expedita iusto magni maxime, minus perferendis?</p>

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

                </div>




            </div>
        </div>



      </div>
    </div>
  </section>

</div>
@stop
@section('scripts')
<script src="{{storage('assets/js/product.js')}}"></script>
@stop