@extends('layouts.layout-2')

@section('content')

    <style>

        .btn-xs {
            line-height: 1.3em;
        }
        .table tbody + tbody {
            border-top: 1px solid #9c9c9c;
        }
        .table th, .table td {
            border-top: none;
        }
        .table tr.border-none td, .table tr.border-none th  {
            border-top: none;
        }
        .table .thead-dark th {
            color: #4E5155;
            background-color: rgba(24, 28, 33, 0.1);
            border-color: rgba(63, 69, 74, 0.1);
        }

        .input-group-text {
            padding: 0.438rem 0.475rem;
        }

    </style>
    <h4 class="font-weight-bold py-3 mb-1">
        Kunden verwalten
    </h4>

    <input type="hidden" name="id" id="id" value="{{$id}}">

    <div class="card messages-card">
        <div class="row no-gutters">

            <!-- Messages sidebox -->
            <div class="messages-sidebox messages-scroll col">

                <div class="card-body py-3">
                    <div class="media align-items-center">
                        <div class="media-body">
                            <a href="{{$back}}" class="btn btn-default btn-block">{{ __('zurück') }}</a>
                        </div>
                        <a href="javascript:void(0)" class="messages-sidebox-toggler d-lg-none d-block text-muted text-large font-weight-light pl-4">&times;</a>
                    </div>
                </div>
                <hr class="border-light m-0">

                <div class="card-body pt-3">
                  {{--   <input type="text" class="form-control form-control-sm mb-4" placeholder="Search...">

                    <!-- Mail boxes -->
                    <a href="javascript:void(0)" class="d-flex justify-content-between align-items-center text-body font-weight-bold py-2">
                        <div>
                            <i class="ion ion-ios-filing"></i> &nbsp; Inbox
                        </div>
                        <div class="badge badge-primary">15</div>
                    </a>
                    <a href="javascript:void(0)" class="d-flex justify-content-between align-items-center text-muted py-2">
                        <div>
                            <i class="ion ion-ios-mail"></i> &nbsp; Sent
                        </div>
                    </a>
                    <a href="javascript:void(0)" class="d-flex justify-content-between align-items-center text-muted py-2">
                        <div>
                            <i class="ion ion-md-create"></i> &nbsp; Drafts
                        </div>
                    </a>
                    <a href="javascript:void(0)" class="d-flex justify-content-between align-items-center text-muted py-2">
                        <div>
                            <i class="ion ion-md-folder-open"></i> &nbsp; Spam
                        </div>
                    </a>
                    <a href="javascript:void(0)" class="d-flex justify-content-between align-items-center text-muted py-2">
                        <div>
                            <i class="ion ion-md-trash"></i> &nbsp; Trash
                        </div>
                    </a>
                    <!-- / Mail boxes -->

                    <hr class="border-light my-4">

                    <!-- Labels -->
                    <h6 class="text-tiny font-weight-bold">LABELS</h6>
                    <a href="javascript:void(0)" class="d-block text-muted py-1">
                        <span class="badge badge-dot badge-success"></span> &nbsp; Clients
                    </a>
                    <a href="javascript:void(0)" class="d-block text-muted py-1">
                        <span class="badge badge-dot badge-danger"></span> &nbsp; Important
                    </a>
                    <a href="javascript:void(0)" class="d-block text-muted py-1">
                        <span class="badge badge-dot badge-info"></span> &nbsp; Social
                    </a>
                    <a href="javascript:void(0)" class="d-block text-muted py-1">
                        <span class="badge badge-dot badge-warning"></span> &nbsp; Other
                    </a>
                    <!-- / Labels -->
                    --}}
                </div>

            </div>
            <!-- / Messages sidebox -->

            <div class="col">

                <!-- Header -->
                <div class="media p-4">
                    <a href="javascript:void(0)" class="messages-sidebox-toggler d-lg-none d-block align-self-center text-muted text-large pr-3 mr-3"><i class="ion ion-md-more"></i></a>

                    <!-- Sender photo -->
                    <div class="media-body pl-3">
                        <!-- Sender & date -->
                        <div class="mb-1">
                            &lt;<a href="mailto:{{$customer_mail->email}}">{{$customer_mail->email}}</a>&gt; {{$customer_mail->created_at }}
                        </div>

                        <!-- Subject -->
                        <h5 class="line-height-inherit m-0">{{$customer_mail->subject}}</h5>
                    </div>
                </div>
                <hr class="border-light m-0">
                <!-- / Header -->

              {{--   <!-- Controls -->
                <div class="media flex-wrap align-items-center p-2">
                    <div class="media-body d-flex flex-wrap flex-basis-100 flex-basis-sm-auto">
                        <button type="button" class="btn btn-default borderless md-btn-flat icon-btn messages-tooltip text-muted mr-3" title="Back"><i class="ion ion-md-arrow-back"></i></button>
                        <button type="button" class="btn btn-default borderless md-btn-flat icon-btn messages-tooltip text-muted" title="Mark as unread"><i class="ion ion-md-mail-unread"></i></button>
                        <button type="button" class="btn btn-default borderless md-btn-flat icon-btn messages-tooltip text-muted" title="Mark as important"><i class="ion ion-md-alert"></i></button>
                        <button type="button" class="btn btn-default borderless md-btn-flat icon-btn messages-tooltip text-muted" title="Move to spam"><i class="ion ion-md-folder-open"></i></button>
                        <button type="button" class="btn btn-default borderless md-btn-flat icon-btn messages-tooltip text-muted" title="Move to trash"><i class="ion ion-md-trash"></i></button>
                    </div>

                    <div class="d-flex flex-wrap align-items-center ml-auto">
                        <button type="button" class="btn btn-default borderless md-btn-flat text-muted px-3"><i class="ion ion-ios-undo"></i>&nbsp; Reply</button>
                        <div class="text-lighter">|</div>
                        <button type="button" class="btn btn-default borderless md-btn-flat text-muted px-3">Forward &nbsp;<i class="ion ion-ios-redo"></i></button>
                    </div>
                </div>
                <hr class="border-light m-0">
                <!-- / Controls -->
                --}}

                <!-- Message content -->
                <div class="p-4">
                   {!! nl2br($customer_mail->message) !!}
                </div>
                <hr class="border-light m-0">
                <!-- / Message content -->

                <!-- Message attachments -->
                    <div class="px-4 pt-4 pb-2">
                        @if($customer_mail->customer)
                            <p><strong>Kunde: </strong>
                                {{ $customer_mail->customer->salutation->name }} {{ $customer_mail->customer->firstname }}  {{ $customer_mail->customer->name }}
                            </p>
                        @endif
                        @if($customer_mail->booking)
                            <p><strong>Buchung: </strong>
                            {{ $customer_mail->booking_id }}
                            @if($customer_mail->booking->travel_country_id)
                                {{ " | ".$customer_mail->booking->travel_country->name }}
                            @endif
                            @if($customer_mail->booking->travelagenda_id)
                                {{ " | ".$customer_mail->booking->travel_agenda->name }}
                            @endif
                            </p>
                        @endif
                        @if($customer_mail->send)
                            <span class="badge badge-success">Mail gesendet</span>
                            <p>Datum: {{$customer_mail->sent_at}}</p>
                        @endif
                        @if($customer_mail->fail)
                            <span class="badge badge-danger">Mail Fehler</span>
                            <p>{{$customer_mail->error }}</p>
                        @endif
                    </div>

                @if($customer_mail->customer_files)
                <hr class="border-light m-0">

                <div class="px-4 pt-4 pb-2">
                    <h6 class="small font-weight-semibold mb-4">Datei-Anhänge</h6>

                    <div class="row">

                        @foreach($customer_mail->customer_files as $file)
                        <div class="col-sm-6 col-lg-12 col-xl-4">

                            <div class="message-attachment ui-bordered p-2 mr-3 mb-3">
                                <div class="message-attachment-file display-4"><i class="{{$file->getIconExt()}}"></i></div>
                                <div class="media-body ml-3">
                                    <strong class="message-attachment-filename">{{$file->original_name}}</strong>
                                    <div class="text-muted small">{{$file->formatBytes()}}</div>
                                    <div>
                                        <a href="{{$file->getURL()}}" target="_blank" class="mail-att-show">Vorschau</a> &nbsp;
                                    </div>
                                </div>
                            </div>

                        </div>
                        @endforeach

                    </div>
                </div>

                @endif

                {{--
                <!-- Footer -->
                <div class="text-right p-4">
                    <button type="button" class="btn btn-primary"><i class="ion ion-ios-undo"></i>&nbsp; Reply</button>
                    &nbsp;
                    <button type="button" class="btn btn-default">Forward &nbsp;<i class="ion ion-ios-redo"></i></button>
                </div>
                --}}
                <!-- / Footer -->

            </div>

        </div><!-- / .row -->
    </div><!-- / .card -->




    <script>
        $(document).ready(function() {

        });
    </script>

@endsection