<div class="card mb-2">
    <h6 class="card-header bg-primary text-white py-2" data-toggle="collapse" data-target="#collapseBookingMails" aria-expanded="false" aria-controls="collapseBookingMails">
        <strong style="line-height: 1.6em">E-Mails</strong>
        <span class="badge badge-secondary">{{ $booking->customer_mails->count() }}</span>

    </h6>
    <div class="collapse" id="collapseBookingMails">
        <div class="container-fluid d-flex align-items-stretch flex-grow-1 p-0">

            <!-- `.messages-wrapper` fills all available space of container -->
            <div class="messages-wrapper">
                <!-- Messages sidebox -->
                <div class="messages-sidebox messages-scroll bg-body border-right">

                    <div class="py-3 px-4">
                        <div class="media align-items-center">
                            <div class="media-body text-center">
                                <button type="button" class="btn btn-sm btn-secondary mb-3 btn-compare-customer-mails" data-toggle="modal"
                                        data-target="#modals-load-content"
                                        data-id="new-send"
                                        data-model="CustomerMail"
                                        data-action="new-customer-mail"
                                        data-url="{{route('customer_mail_send_mail')}}"
                                        data-redirect="back"
                                        data-booking_id="{{$booking->id}}"
                                        data-customer_mail_dir="0"
                                        data-customer_mail_subdir="0"
                                        data-route="{{ route('booking_modal_load') }}"><i class="ion ion-md-mail-open"></i>&nbsp;E-Mail schreiben</button>

                                <button type="button" class="btn btn-sm btn-next btn-compare-customer-mails" data-toggle="modal"
                                        data-target="#modals-load-content"
                                        data-id="new-save"
                                        data-model="CustomerMail"
                                        data-action="reply-customer-mail"
                                        data-url="{{route('customer_mail_reply_mail')}}"
                                        data-redirect="back"
                                        data-booking_id="{{$booking->id}}"
                                        data-customer_mail_dir="0"
                                        data-customer_mail_subdir="0"
                                        data-route="{{ route('booking_modal_load') }}"><i class="ion ion-md-mail-unread"></i>&nbsp;Antwort speichern</button>
                            </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 mx-4 mt-0 mb-4">

                    <style>
                        .sidebox-nav-item {
                            color: #838387 !important;
                        }
                        .sidebox-nav-item_sub {
                            color: #a3a4a6 !important;
                        }
                        .sidebox-nav-item[href]:hover,
                        .sidebox-nav-item[href]:focus {
                            color: #606265 !important;
                        }
                        .sidebox-nav-item.active .item {
                            color: #3e4244 !important;
                            font-weight: 700 !important;
                        }
                    </style>
                    <!-- Mail boxes -->

                    @foreach(\App\Services\Booking::getCustomerMailDirs() as $customer_mail_dir)
                        @php($badge = $customer_mail_dir->pos === 0 ? "badge-primary" : "badge-outline-primary")
                        <a href="javascript:void(0)" class="d-flex justify-content-between align-items-center py-2 px-4 sidebox-nav-item @if($customer_mail_dir->pos === 0) active @endif"
                           data-dir="{{$customer_mail_dir->pos}}" data-subdir="0" data-icon="{{$customer_mail_dir->getArrayContent('icon')}}" data-name="{{$customer_mail_dir->name}}">
                            <div class="item">
                                <i class="ion {{$customer_mail_dir->getArrayContent('icon')}}"></i> {{$customer_mail_dir->name}}
                            </div>
                            <div class="badge {{$badge}}">{{$booking->countCustomerMailsBy($customer_mail_dir->pos)}}</div>
                        </a>
                        @foreach($booking->travel_country->getMailDirs($customer_mail_dir->pos) as $mail_dir_id)
                            @php ($mail_dir_name = \App\Services\Booking::getCustomerMailName($customer_mail_dir, $mail_dir_id))
                            <a href="javascript:void(0)" class="d-flex justify-content-between align-items-center py-1 px-4 sidebox-nav-item sidebox-nav-item_sub"
                               data-dir="{{$customer_mail_dir->pos}}" data-subdir="{{$mail_dir_id}}" data-icon="{{$customer_mail_dir->getArrayContent('icon')}}" data-name="{{$mail_dir_name}}">
                                <div class="item pl-2">
                                    <i class="ion {{$customer_mail_dir->getArrayContent('icon')}}"></i> {{$mail_dir_name}}
                                </div>
                                <div class="badge {{$badge}}">{{$booking->countCustomerMailsBy($customer_mail_dir->pos, $mail_dir_id)}}</div>
                            </a>
                        @endforeach
                    @endforeach
                    @foreach($booking::$customer_mail_dirs as $dir_id => $customer_mail_dir)
                        <a href="javascript:void(0)" class="d-flex justify-content-between align-items-center py-2 px-4 sidebox-nav-item"
                           data-dir="{{$dir_id}}" data-subdir="0" data-icon="{{$customer_mail_dir['icon']}}" data-name="{{$customer_mail_dir['name']}}">
                            <div class="item">
                                <i class="ion {{$customer_mail_dir['icon']}}"></i> {{$customer_mail_dir['name']}}
                            </div>
                            <div class="badge {{$badge}}">{{$booking->countCustomerMailsBy($dir_id)}}</div>
                        </a>
                    @endforeach
                    <hr class="border-light m-4">
                </div>
                <!-- / Messages sidebox -->

                <!-- Messages content wrapper -->
                <div class="d-flex flex-column w-100">
                    <!-- Header -->
                    <div class="flex-grow-0">
                        <h4 class="media align-items-center font-weight-bold container-p-x py-3 py-lg-4 m-0">
                            <a href="javascript:void(0)" class="messages-sidebox-toggler d-lg-none d-block align-self-center text-muted px-3 mr-3"><i class="ion ion-md-more"></i></a>
                            <div class="media-body">&nbsp;
                                <i id="message-sidebox-title-icon" class="ion ion-ios-filing"></i> <span id="message-sidebox-title-name">Reisender</span>
                            </div>
                            <input type="text" class="form-control form-control-sm" placeholder="Suche ..." style="max-width: 10rem;" id="dataTableInputSearchField">
                        </h4>
                        <hr class="border-light m-0">
                    </div>
                    <!-- / Header -->
                    <style>
                        div.dataTables_info, div.dataTables_paginate {
                            padding: 10px;
                        }
                    </style>
                    <!-- Wrap `.messages-scroll` to properly position scroll area. Remove this wrapper if you don't need scroll -->
                    <div class="flex-grow-1 position-relative">
                        <!-- Remove `.messages-scroll` and add `.flex-grow-1` if you don't need scroll -->
                        <div class="messages-content flex-grow-1">

                            <div class="table-responsive" id="customer_mails_table">
                                <input type="hidden" name="booking_id" value="{{$booking->id}}">
                                <input type="hidden" name="customer_mail_dir" value="0">
                                <input type="hidden" name="customer_mail_subdir" value="">
                                <table id="datatables-customer-mails" class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th>&nbsp;</th>
                                        {{--   <th>{{__('E-Mail')}}</th> --}}
                                        <th>{{__('Betreff')}}</th>
                                        <th>{{__('Datum')}}</th>
                                        <th style="width: 100px">{{__('#')}}</th>
                                    </tr>
                                    </thead>
                                    <tbody class="">
                                    </tbody>
                                </table>
                            </div>

                        </div><!-- / .messages-content -->
                    </div>
                </div>
            </div><!-- / .messages-wrapper -->
        </div>
    </div>
</div>