@extends('template.'.config('settings.template').'.content.master')
@section('content')


    <div class="container" style="margin-top: 80px;">

        <div class="row">


            <div class="col-12">
                <h1 class="mb-5">{{$content->title}}</h1>

            </div>



            <div class="col-12 col-md-9">





                <div style="position: relative">
                    @if ($content->image)
                        <img class="rounded-top img-fluid" src="{{ asset($content->image) }}" loading="lazy" >
                    @else
                        <img class="rounded-top img-fluid" src="https://picsum.photos/800/400?{{rand(0,100)}}" loading="lazy" width="100%">
                    @endif



                </div>


                <br>
                <br>
                <br>


               
                <p class="fs-5 mt-5">

                    {!! isset($content->data_fields['short_description'])?$content->data_fields['short_description']:'keine Angaben' !!}
                </p>


                @isset($content->data_fields['extensive_description'])
                   <h2 class="fs-4 mt-5 mb-3">Beschreibung</h2>

                <div class="fs-5">
                    {!!$content->data_fields['extensive_description']!!}

                </div>

                @endisset


                @isset($content->data_fields['features'])
                    <h2 class="fs-4 mt-5">Beschreibung</h2>
                <br>

                    <div class="row">

                        @if($content->data_fields['features'] == "Dashboard")
                            <div class="col-2 mb-3 text-center">
                                <div style="background-color: #24052f; height: 120px; width: 120px; margin-bottom: 35px;" class="p-4 rounded-circle text-center align-middle" title="Checkout">
                                    <svg style="fill: white; height: 90%;" 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>
                                </div>
                            </div>
                        @endif


                            <div class="col-2 mb-3 text-center">
                                <div style="background-color: #24052f; height: 120px; width: 120px; margin-bottom: 35px;" class="p-4 rounded-circle text-center align-middle" title="Checkout">
                                    <svg style="fill: white; height: 90%;" 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>
                                </div>
                            </div>

                    </div>

                    <br>
                    <br>
                @endisset

                




            </div>

            <div class="col-12 col-md-3">

                <div class="bg-ci rounded p-3 position-fixed shadow-lg" style="width: 16%;">


                    Hersteller: <a href="{{ route('author.get', [$content->user->slug]) }}" class="text-decoration-none mt-2">
                        <img src="{{ $content->user->gravatar() }}" width="20px" title="{{ $content->user->name }}" class="border rounded img-fluid shadow-sm" alt="Logo {{ $content->user->name }} ">
                        {{ $content->user->name }}
                    </a>
                    <br>
                    Artikelnummer: <a href="">3.2</a>
                    <br>
                    Datenblatt: <a href="">2.93</a>
                    <br>
                    Verfügbarkeit: <a href="">2.93</a>
                    <br>
                    Einzelpreis: <i>{!!$content->data_fields['einzelpreis']!!}</i>

                    <a  class="btn btn-primary d-block mt-4 btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal">

                        
                        Bestellen
                    </a>
                </div>


            </div>

            <div class="col-12">
                <br>
                <br>
                <br>
                <br>
                <br>
                <hr>

                <br>
                <br>
                <br>
                <h2>Andere Produkte</h2>
                <br>
                <br>


            </div>

            <div class="row">
                @foreach($contents as $indexContent => $content)
                    <div class="col-12 col-md-4 col-lg-3 mb-5">
                        <a href="{{ route_content($content) }}" class="text-decoration-none text-dark">
                            <div class="card shadow-lg">

                                @if ($content->image)
                                    <img class="rounded-top img-fluid" src="{{ asset('uploads/' . $content->image) }}" loading="lazy">
                                @else
                                    <img class="rounded-top img-fluid" src="https://picsum.photos/800/400?{{rand(0,100)}}" loading="lazy">
                                @endif

                                <div class="card-body">
                                    <h2 class="fs-5">{{$content->title}}</h2>
                                    <a href="{{ route('author.get', [$content->user->slug]) }}" class="text-decoration-none">
                                        <img src="{{ $content->user->gravatar() }}" width="20px" title="{{ $content->user->name }}" class="border rounded img-fluid shadow-sm" alt="Logo {{ $content->user->name }} ">
                                        {{ $content->user->name }}
                                    </a>
                                    


                                </div>

                            </div>

                        </a>


                    </div>

                @endforeach
            </div>




        </div>
    </div>





    <!-- Modal -->
    <div class="modal fade" id="exampleModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Produkt anfragen</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="col-12 col-md-10 offset-md-1">


<style type="text/css">
    input{
        background-color: #37622736;
    }
</style>

<div class="card" style="background-color: #c9d5c436;">

    <div class="card-body">
        <div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Name</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Max Mustermann">
</div>

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Firma</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Musterfirma GmbH">
</div>

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Telefon</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="0123 456789">
</div>

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">E-Mail Adresse</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Adresse</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Unter den Linden 23, Berlin">
</div>


<div class="text-end">
    <a href="" class="btn btn-primary mt-4"> Anfrage absenden</a>

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


                           
<br>
<br>


<hr>


                            <h5>Bestellablauf</h5>


                            <br>

                            <div class="row">
                                <div class="col-2 offset-1 mb-3">
                                    <div style="background-color: #255306; height: 50px; width: 50px;  color: white" class="p-2 rounded-circle text-center fw-bold fs-5">
                                        1.
                                    </div>
                                </div>
                                <div class="col-9 mt-2">
                                    Bitte stellen Sie Ihre Anfrage

                                </div>


                                <div class="col-2 offset-1 mb-3">
                                    <div style="background-color: #255306; height: 50px; width: 50px;  color: white" class="p-2 rounded-circle text-center fw-bold fs-5">
                                        2.
                                    </div>
                                </div>
                                <div class="col-9 mt-2">
                                    Wir erstellen Ihnen ein persönliches Angebot

                                </div>


                                <div class="col-2 offset-1 mb-3">
                                    <div style="background-color: #255306; height: 50px; width: 50px;  color: white" class="p-2 rounded-circle text-center fw-bold fs-5">
                                        3.
                                    </div>
                                </div>
                                <div class="col-9 mt-2">
                                    Bezahlung

                                </div>


                                <div class="col-2 offset-1 mb-3">
                                    <div style="background-color: #255306; height: 50px; width: 50px;  color: white" class="p-2 rounded-circle text-center fw-bold fs-5">
                                        4.
                                    </div>
                                </div>
                                <div class="col-9 mt-2">
                                    Ware wird geliefert / kann abgeholt werden

                                </div>


                            </div>



                            
                        </div>
                    </div>





                </div>

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

@stop