areya-energy/content/contents/solarmodule.blade.php

231 lines
14 KiB
PHP
Raw Normal View History

2022-08-30 10:49:27 +00:00
@layout("content.master")
@section('head')
<title>{{$content->title}}</title>
<style type="text/css">
li{list-style: none; margin-bottom: 4px; }
</style>
2022-09-05 08:55:38 +00:00
<meta name="product-id" content="{{$content->id}}">
2022-08-30 10:49:27 +00:00
@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">
2022-09-02 10:33:29 +00:00
<div class="col-12 col-lg-5">
2022-09-01 18:20:10 +00:00
@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
2022-08-30 10:49:27 +00:00
<br>
<br>
<br>
</div>
2022-09-02 10:33:29 +00:00
<div class="col-12 col-lg-5 offset-lg-1">
2022-08-30 10:49:27 +00:00
<h1 class="h2">{{$content->title}}</h1>
<div class="ms-3 mt-3 mb-3">
2022-09-04 17:28:39 +00:00
<span class="fs-4 fw-bold" style="color: #546c8a;">{{$content->data_fields['preis']}} </span>
2022-08-30 10:49:27 +00:00
<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
2022-09-04 17:28:39 +00:00
2022-08-30 10:49:27 +00:00
</div>
2022-09-04 17:28:39 +00:00
2022-09-04 19:45:21 +00:00
<div class="row">
@isset($content->data_fields['preis_5'])
<div class="col-6">
2022-09-04 18:06:54 +00:00
2022-09-04 19:45:21 +00:00
<p>
<button class="btn btn-link text-muted text-decoration-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
<svg style="fill: currentColor; width: 20px; margin-right: 2px; margin-bottom: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M349.66 173.65l-11.31-11.31c-3.12-3.12-8.19-3.12-11.31 0l-164.7 164.69c-3.12 3.12-3.12 8.19 0 11.31l11.31 11.31c3.12 3.12 8.19 3.12 11.31 0l164.69-164.69c3.13-3.12 3.13-8.18.01-11.31zM240 192c0-26.47-21.53-48-48-48s-48 21.53-48 48 21.53 48 48 48 48-21.53 48-48zm-64 0c0-8.83 7.19-16 16-16s16 7.17 16 16-7.19 16-16 16-16-7.17-16-16zm144 80c-26.47 0-48 21.53-48 48s21.53 48 48 48 48-21.53 48-48-21.53-48-48-48zm0 64c-8.81 0-16-7.17-16-16s7.19-16 16-16 16 7.17 16 16-7.19 16-16 16zm192-80c0-35.5-19.4-68.2-49.6-85.5 9.1-33.6-.3-70.4-25.4-95.5s-61.9-34.5-95.5-25.4C324.2 19.4 291.5 0 256 0s-68.2 19.4-85.5 49.6c-33.6-9.1-70.4.3-95.5 25.4s-34.5 61.9-25.4 95.5C19.4 187.8 0 220.5 0 256s19.4 68.2 49.6 85.5c-9.1 33.6.3 70.4 25.4 95.5 26.5 26.5 63.4 34.1 95.5 25.4 17.4 30.2 50 49.6 85.5 49.6s68.1-19.4 85.5-49.6c32.7 8.9 69.4.7 95.5-25.4 25.1-25.1 34.5-61.9 25.4-95.5 30.2-17.3 49.6-50 49.6-85.5zm-91.1 68.3c5.3 11.8 29.5 54.1-6.5 90.1-28.9 28.9-57.5 21.3-90.1 6.5C319.7 433 307 480 256 480c-52.1 0-64.7-49.5-68.3-59.1-32.6 14.8-61.3 22.2-90.1-6.5-36.8-36.7-10.9-80.5-6.5-90.1C79 319.7 32 307 32 256c0-52.1 49.5-64.7 59.1-68.3-5.3-11.8-29.5-54.1 6.5-90.1 36.8-36.9 80.8-10.7 90.1-6.5C192.3 79 205 32 256 32c52.1 0 64.7 49.5 68.3 59.1 11.8-5.3 54.1-29.5 90.1 6.5 36.8 36.7 10.9 80.5 6.5 90.1C433 192.3 480 205 480 256c0 52.1-49.5 64.7-59.1 68.3z"/></svg>
Mengenrabate
</button>
</p>
</div>
@endisset
<div class="col-6">
2022-09-04 18:06:54 +00:00
2022-09-04 19:45:21 +00:00
<p>
<button class="btn btn-link text-muted text-decoration-none" type="button" data-bs-toggle="modal" data-bs-target="#price_timeline">
<svg style="fill: currentColor; width: 20px; margin-right: 2px; margin-bottom: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 416H32V72c0-4.42-3.58-8-8-8H8c-4.42 0-8 3.58-8 8v360c0 8.84 7.16 16 16 16h488c4.42 0 8-3.58 8-8v-16c0-4.42-3.58-8-8-8zM98.34 263.03c-3.12 3.12-3.12 8.19 0 11.31l11.31 11.31c3.12 3.12 8.19 3.12 11.31 0l72.69-72.01 84.69 84.69c6.25 6.25 16.38 6.25 22.63 0l93.53-93.53 44.04 44.04c4.95 4.95 11.03 7.16 17 7.16 12.48 0 24.46-9.7 24.46-24.34V112.19c0-8.94-7.25-16.19-16.19-16.19H344.34c-21.64 0-32.47 26.16-17.17 41.46l44.71 44.71-82.22 82.22-84.63-84.63c-6.23-6.23-16.32-6.25-22.57-.05l-84.12 83.32zM362.96 128H448v85.04L362.96 128z"/></svg>
Preisverlauf
</button>
</p>
<!-- Modal -->
<div class="modal fade" id="price_timeline" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header" style="background-color: #546c8a; color: white;">
<h5 class="modal-title" id="exampleModalLabel">Preisverlauf</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
2022-09-05 08:55:38 +00:00
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: 'Modulpreis in €',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
}
});
</script>
2022-09-04 19:45:21 +00:00
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="collapse" id="collapseWidthExample">
<div class="card card-body mb-5">
<table class="table">
<thead>
<tr>
<th scope="col">Abnahme</th>
<th scope="col">Preis pro Einheit</th>
2022-09-05 11:10:04 +00:00
<th scope="col">Rabatt</th>
2022-09-04 19:45:21 +00:00
</tr>
</thead>
<tbody>
@isset($content->data_fields['preis_5'])
<tr>
<td>ab 5 Stück</td>
<td>{{$content->data_fields['preis_5']}} </td>
2022-09-05 11:10:04 +00:00
<td><span class="badge text-bg-dark">{{(($content->data_fields['preis_5']-$content->data_fields['preis'])*100)/$content->data_fields['preis']}} %</span></td>
2022-09-04 19:45:21 +00:00
</tr>
@endisset
@isset($content->data_fields['preis_10'])
<tr>
<td>ab 10 Stück</td>
<td>{{$content->data_fields['preis_10']}} </td>
2022-09-05 11:10:04 +00:00
<td><span class="badge text-bg-dark">{{(($content->data_fields['preis_10']-$content->data_fields['preis'])*100)/$content->data_fields['preis']}} %</span></td>
2022-09-04 19:45:21 +00:00
</tr>
@endisset
@isset($content->data_fields['preis_palette'])
<tr>
<td>Palette ({{$content->data_fields['module_pro_palette']}} Stück)</td>
<td>{{$content->data_fields['preis_palette']}} </td>
2022-09-05 11:10:04 +00:00
<td><span class="badge text-bg-dark">{{(($content->data_fields['preis_palette']-$content->data_fields['preis'])*100)/$content->data_fields['preis']}} %</span></td>
2022-09-04 19:45:21 +00:00
</tr>
@endisset
</tbody>
</table>
</div>
2022-09-04 18:06:54 +00:00
</div>
2022-09-04 17:28:39 +00:00
</div>
2022-09-04 19:45:21 +00:00
</div>
2022-09-04 18:06:54 +00:00
2022-09-04 18:49:58 +00:00
<table class="table">
2022-09-04 18:06:54 +00:00
2022-09-04 18:49:58 +00:00
<tbody>
2022-09-04 17:28:39 +00:00
2022-09-04 18:49:58 +00:00
@isset($content->data_fields['hersteller'])
<tr>
<td>Hersteller</td>
<td>{{$content->data_fields['hersteller']}}</td>
</tr>
@endisset
2022-09-04 18:57:50 +00:00
@isset($content->data_fields['leistung'])
2022-09-04 18:49:58 +00:00
<tr>
<td>Leisung:</td>
2022-09-04 18:57:50 +00:00
<td>{{$content->data_fields['leistung']}} Watt</td>
2022-09-04 18:49:58 +00:00
</tr>
@endisset
<tr>
<td>Zellstruktur:</td>
<td>Monokristalin</td>
</tr>
</tbody>
</table>
2022-09-04 17:38:37 +00:00
2022-08-30 10:49:27 +00:00
2022-09-04 17:47:21 +00:00
2022-09-02 10:33:29 +00:00
<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>
2022-08-30 10:49:27 +00:00
</div>
<hr class="mt-5">
</div>
</div>
</section>
</div>
@stop
@section('scripts')
2022-09-02 09:49:28 +00:00
<script src="{{storage('assets/js/product.js')}}"></script>
2022-08-30 10:49:27 +00:00
@stop