<div>
    @section('title')
    Send Message
    @endsection

    @section('extra-script')
    <script src="{{asset("public/theme/html/demo1/dist/assets/js/pages/custom/inbox/inbox1894.js?v=7.1.9")}}"></script>
    @endsection
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content" wire:ignore.self>
        <!--begin::Subheader-->
        <div class="subheader py-2 py-lg-6 subheader-solid" id="kt_subheader" wire:ignore.self>
            <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
                <!--begin::Info-->
                <div class="d-flex align-items-center flex-wrap mr-1">
                    <!--begin::Mobile Toggle-->
                    <button class="burger-icon burger-icon-left mr-4 d-inline-block d-lg-none" id="kt_subheader_mobile_toggle">
                        <span></span>
                    </button>
                    <!--end::Mobile Toggle-->
                    <!--begin::Page Heading-->
                    <div class="d-flex align-items-baseline flex-wrap mr-5">
                        <!--begin::Page Title-->
                        <h5 class="text-dark font-weight-bold my-1 mr-5">Inbox</h5>
                        <!--end::Page Title-->
                        <!--begin::Breadcrumb-->
                        <ul class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm">
                            <li class="breadcrumb-item text-muted">
                                <a href="#" class="text-muted">Apps</a>
                            </li>
                            <li class="breadcrumb-item text-muted">
                                <a href="#" class="text-muted">Inbox</a>
                            </li>
                        </ul>
                        <!--end::Breadcrumb-->
                    </div>
                    <!--end::Page Heading-->
                </div>
                <!--end::Info-->
            </div>
        </div>
        <!--end::Subheader-->
        <!--begin::Entry-->
        <div class="d-flex flex-column-fluid">
            <!--begin::Container-->
            <div class="container">
                <!--begin::Inbox-->
                <div class="d-flex flex-row">
                    <!--begin::Aside-->

                    <!--end::Aside-->
                    <!--begin::List-->
                    <div class="flex-row-fluid ml-lg-12 d-block" id="kt_inbox_list" wire:ignore.self>
                        <!--begin::Card-->
                        <div class="card card-custom card-stretch">
                            <!--begin::Header-->
                            <div class="card-header row row-marginless align-items-right flex-wrap py-5 h-auto">
                                <div class="px-4 mt-4 mb-10">
                                    @if(auth()->user()->currentTeam->id==3)
                                    <a href="{{url()->previous()}}" class="btn btn-block btn-warning font-weight-bold text-uppercase py-2 px-4 text-center">Go back</a>
                                    @endif
                                    <a href="#" class="btn btn-block btn-primary font-weight-bold text-uppercase py-4 px-6 text-center" data-toggle="modal" data-target="#kt_inbox_compose">New Message</a>
                                </div>
                                <div class="col-xxl-3 d-flex order-1 order-xxl-2 align-items-center justify-content-center">

                                    <div class="input-group input-group-lg input-group-solid my-2">
                                        <input type="text" class="form-control pl-4" wire:model="q" placeholder="Search..." />
                                        <div class="input-group-append">
                                            <span class="input-group-text pr-3">
                                                <span class="svg-icon svg-icon-lg">
                                                    <!--begin::Svg Icon | path:/metronic/theme/html/demo1/dist/assets/media/svg/icons/General/Search.svg-->
                                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                            <rect x="0" y="0" width="24" height="24" />
                                                            <path d="M14.2928932,16.7071068 C13.9023689,16.3165825 13.9023689,15.6834175 14.2928932,15.2928932 C14.6834175,14.9023689 15.3165825,14.9023689 15.7071068,15.2928932 L19.7071068,19.2928932 C20.0976311,19.6834175 20.0976311,20.3165825 19.7071068,20.7071068 C19.3165825,21.0976311 18.6834175,21.0976311 18.2928932,20.7071068 L14.2928932,16.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
                                                            <path d="M11,16 C13.7614237,16 16,13.7614237 16,11 C16,8.23857625 13.7614237,6 11,6 C8.23857625,6 6,8.23857625 6,11 C6,13.7614237 8.23857625,16 11,16 Z M11,18 C7.13400675,18 4,14.8659932 4,11 C4,7.13400675 7.13400675,4 11,4 C14.8659932,4 18,7.13400675 18,11 C18,14.8659932 14.8659932,18 11,18 Z" fill="#000000" fill-rule="nonzero" />
                                                        </g>
                                                    </svg>
                                                    <!--end::Svg Icon-->
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <!--end::Search-->
                                <!--begin::Pagination-->
                                <div class="col-12 col-sm-6 col-xxl-4 order-2 order-xxl-3 d-flex align-items-center justify-content-sm-end text-right my-2">

                                </div>
                                <!--end::Pagination-->
                            </div>
                            <!--end::Header-->
                            <!--begin::Body-->
                            <div class="card-body table-responsive px-0" wire:ignore.self>
                                <!--begin::Where it is-->
                                <div class="list list-hover min-w-500px" data-inbox="list" wire:ignore.self>
                                    <!--begin::Item-->
                                    @foreach ($messages as $gen)
                                    @foreach ($gen as $message)
                                    @if($message->to_user->id==auth()->user()->id)
                                    @php
                                    $curl=$message->from_user;
                                    @endphp
                                    @else
                                    @php
                                    $curl=$message->to_user;
                                    @endphp
                                    @endif
                                    <div class="d-flex align-items-start list-item card-spacer-x py-3" data-inbox="message" wire:click="curr({{$message->conversation_id}})">
                                        <!--begin::Toolbar-->
                                        <div class="d-flex align-items-center">

                                            <!--end::Actions-->
                                            <!--begin::Author-->
                                            <div class="d-flex align-items-center flex-wrap w-xxl-200px mr-3" data-toggle="view">
                                                <div class="symbol symbol-light-warning symbol-35 mr-3">
                                                    <span class="symbol-label font-weight-bolder">{{count($gen)}}</span>
                                                </div>
                                                <a href="#" class="font-weight-bold text-dark-75 text-hover-primary">{{ucwords($curl->first_name)}} {{ucwords($curl->last_name)}}</a>
                                            </div>
                                            <!--end::Author-->
                                        </div>
                                        <!--end::Toolbar-->
                                        <!--begin::Info-->
                                        <div class="flex-grow-1 mt-2 mr-2" data-toggle="view">
                                            <div>
                                                <span class="font-weight-bolder font-size-lg mr-2">{{Illuminate\Support\Str::words(strip_tags($message->message),10)}}</span>
                                                <span class="text-muted"></span>
                                            </div>
                                        </div>
                                        <!--end::Info-->
                                        <!--begin::Datetime-->
                                        <div class="mt-2 mr-3 font-weight-bolder w-100px text-right" data-toggle="view"> {{$message->created_at->diffForHumans()}}</div>
                                        <!--end::Datetime-->
                                    </div>

                                    @break;

                                    @endforeach
                                    @endforeach


                                    <!--end::Item-->
                                </div>
                                <!--end::Items-->
                            </div>
                            <!--end::Body-->
                        </div>
                        <!--end::Card-->
                    </div>
                    <!--end::List-->
                    <!--begin::View-->
                    <div class="flex-row-fluid ml-lg-8 d-none" id="kt_inbox_view" wire:ignore.self>
                        <!--begin::Card-->
                        <div class="card card-custom card-stretch">
                            <!--begin::Header-->
                            <div class="card-header align-items-center flex-wrap justify-content-between py-5 h-auto">
                                <!--begin::Left-->
                                <div class="d-flex align-items-center my-2">
                                    <a href="#" class="btn btn-clean btn-icon btn-sm mr-6" data-inbox="back">
                                        <i class="ki ki-bold-arrow-back"></i>

                                    </a>

                                </div>

                            </div>

                            <div class="card-body p-0">
                                @if($curr_id!=null)
                                @if($current->first()->to_user->id==auth()->user()->id)
                                @php
                                $curl=$current->first()->from_user;
                                @endphp
                                @else
                                @php
                                $curl=$current->first()->to_user;
                                @endphp
                                @endif
                                @php
                                $this->to=$curl->id;
                                @endphp
                                <div class="d-flex align-items-center justify-content-between flex-wrap card-spacer-x py-5">

                                    <div class="d-flex align-items-center mr-2 py-2">
                                        <div class="font-weight-bold font-size-h3 mr-3"> {{$curl->first_name}} {{$curl->last_name}}</div>

                                    </div>
                                    <!--end::Title-->


                                    <div class="mb-3" style="min-width:100%">
                                        <div class="cursor-pointer shadow-xs toggle-on">

                                            <div class="d-flex card-spacer-x py-6 flex-column flex-md-row flex-lg-column flex-xxl-row justify-content-between">
                                                <div class="d-flex align-items-center">
                                                    <span class="symbol symbol-50 mr-4">
                                                        <span class="symbol-label" style="background-image: url('{{$curl->profile_photo_url}}')"></span>
                                                    </span>
                                                    <div class="d-flex flex-column flex-grow-1 flex-wrap mr-2">
                                                        <div class="d-flex">
                                                            <a href="#" class="font-size-lg font-weight-bolder text-dark-75 text-hover-primary mr-2"></a>
                                                            <div class="font-weight-bold text-muted">
                                                                <span class="label label-success label-dot mr-2"></span>{{$curl->created_at->diffForHumans()}}
                                                            </div>
                                                        </div>
                                                        <div class="d-flex flex-column">
                                                            <div class="toggle-off-item">
                                                                <span class="font-weight-bold text-muted cursor-pointer" data-toggle="dropdown">to me
                                                                    <i class="flaticon2-down icon-xs ml-1 text-dark-50"></i></span>
                                                                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-left p-5">
                                                                    <table>
                                                                        <tr>
                                                                            <td class="text-muted min-w-75px py-2">
                                                                                From</td>
                                                                            <td>{{$curl->first_name}} {{$curl->first_name}}</td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td class="text-muted py-2">Date:</td>
                                                                            <td>{{$curl->created_at}}</td>
                                                                        </tr>

                                                                        <tr>
                                                                            <td class="text-muted py-2">Reply to:
                                                                            </td>
                                                                            <td>{{$curl->email}}</td>
                                                                        </tr>
                                                                    </table>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="d-flex my-2 my-xxl-0 align-items-md-center align-items-lg-start align-items-xxl-center flex-column flex-md-row flex-lg-column flex-xxl-row">
                                                    <div class="font-weight-bold text-muted mx-2">{{$curl->created_at}}
                                                    </div>

                                                </div>
                                            </div>

                                            <div class="card-spacer-x py-3 toggle-off-item" style="max-width:100vw;white-space:initial;">

                                                @foreach ($current as $message)

                                                @if($message->to==auth()->user()->id)
                                                <p style="text-align: left; ">{{$message->from_user->first_name}} {{$message->from_user->last_name}} : {{$message->message}}</p>
                                                @elseif($message->from==auth()->user()->id)
                                                <p style="text-align: right; ">You : {{$message->message}}</p>
                                                @endif

                                                @endforeach
                                            </div>
                                        </div>

                                    </div>
                                    <!--end::Messages-->

                                    <div class="card-spacer mb-3" style="width:100%;" id="kt_inbox_reply">
                                        <div class="card card-custom shadow-sm">
                                            <div class="card-body p-0">

                                                <form id="kt_inbox_reply_form" wire:submit.prevent="send">

                                                    <div class="d-block">

                                                        <div class="d-flex align-items-center border-bottom inbox-to px-8 min-h-50px">
                                                            <div class="text-dark-50 w-75px">Send Reply To:</div>
                                                            <select type="text" class="form-control border-0" name="to" wire:model="to" required>



                                                                <option value="{{$curl->id}}">{{$curl->first_name}} {{$curl->last_name}} - {{$curl->email}}</option>


                                                            </select>

                                                        </div>

                                                        <textarea id="" class="border-0 border-0 px-8 form-control" style="height: 250px; width:100%;" wire:model="message" placeholder="Type your message..." required></textarea>

                                                    </div>
                                                    <!--end::Body-->

                                                    <div class="d-flex align-items-center justify-content-between py-5 pl-8 pr-5 border-top">

                                                        <div class="d-flex align-items-center mr-3">

                                                            <div class="btn-group mr-4">
                                                                <button type="submit" class="btn btn-primary font-weight-bold px-6">Send</button>

                                                                <div class="px-6 py-2" x-data="{ shown: false, timeout: null }" x-init="@this.on('sent', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000);  })" x-show.transition.opacity.out.duration.1500ms="shown" style="display: none;" class='text-sm text-gray-600'>
                                                                    {{ 'Sent.' }}
                                                                </div>

                                                            </div>
                                                            <!--end::Send-->

                                                            <span class="btn btn-icon btn-sm btn-clean mr-2" id="kt_inbox_reply_attachments_select">
                                                                <i class="flaticon2-clip-symbol"></i>
                                                            </span>
                                                            <span class="btn btn-icon btn-sm btn-clean">
                                                                <i class="flaticon2-pin"></i>
                                                            </span>
                                                            <!--end::Other-->
                                                        </div>
                                                        <!--end::Actions-->

                                                        <div class="d-flex align-items-center">
                                                            <span class="btn btn-icon btn-sm btn-clean mr-2" data-toggle="tooltip" title="More actions">
                                                                <i class="flaticon2-settings"></i>
                                                            </span>
                                                            <span class="btn btn-icon btn-sm btn-clean" data-inbox="dismiss" data-toggle="tooltip" title="Dismiss reply">
                                                                <i class="flaticon2-rubbish-bin-delete-button"></i>
                                                            </span>
                                                        </div>
                                                        <!--end::Toolbar-->
                                                    </div>
                                                    <!--end::Footer-->
                                                </form>
                                                <!--end::Form-->
                                            </div>
                                        </div>
                                    </div>
                                    <!--end::Reply-->
                                </div>
                                @endif
                                <!--end::Body-->
                            </div>

                        </div>
                        <!--end::Header-->





                        <!--end::Reply-->
                    </div>
                    <!--end::Body-->
                </div>
                <div class="modal modal-sticky modal-sticky-lg modal-sticky-bottom-right" id="kt_inbox_compose" role="dialog" data-backdrop="false" wire:ignore.self>
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <!--begin::Form-->
                            <form id="kt_inbox_compose_form" wire:submit.prevent="send">
                                <!--begin::Header-->
                                <div class="d-flex align-items-center justify-content-between py-5 pl-8 pr-5 border-bottom">
                                    <h5 class="font-weight-bold m-0">Compose</h5>
                                    <div class="d-flex ml-2">
                                        <span class="btn btn-clean btn-sm btn-icon mr-2">
                                            <i class="flaticon2-arrow-1 icon-1x"></i>
                                        </span>
                                        <span class="btn btn-clean btn-sm btn-icon" data-dismiss="modal">
                                            <i class="ki ki-close icon-1x"></i>
                                        </span>
                                    </div>
                                </div>
                                <!--end::Header-->
                                <!--begin::Body-->
                                <div class="d-block">
                                    <!--begin::To-->
                                    <div class="d-flex align-items-center border-bottom inbox-to px-8 min-h-45px">
                                        <div class="text-dark-50 w-75px">To:</div>
                                        <div class="d-flex align-items-center flex-grow-1">
                                            @if (auth()->user()->currentTeam->id != 1 && auth()->user()->currentTeam->id != 2)
                                            <input name="to" wire:model="to" value="Admin" class="form-control border-0" readonly>
                                            @else
                                            <input name="to" type="text" wire:model="to" class="form-control border-0" placeholder="Enter Phone Number">
                                            @endif

                                            <div class="padding-left:10px;">{!!$nameno!!}</div>
                                        </div>

                                    </div>


                                    <!--begin::Subject-->

                                    <!--end::Subject-->
                                    <!--begin::Message-->

                                    <textarea id="" class="border-0 border-0 px-8 form-control" style="height: 250px; width:100%;" wire:model="message" placeholder="Type your message..." required></textarea>

                                </div>
                                <!--end::Body-->
                                <!--begin::Footer-->
                                <div class="d-flex align-items-center justify-content-between py-5 pl-8 pr-5 border-top">
                                    <!--begin::Actions-->
                                    <div class="d-flex align-items-center mr-3">
                                        <!--begin::Send-->
                                        <div class="btn-group mr-4">
                                            <button class="btn btn-primary font-weight-bold px-6" type="submit">Send</button>

                                            <div class="px-6 py-2" x-data="{ shown: false, timeout: null }" x-init="@this.on('sent', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000);  })" x-show.transition.opacity.out.duration.1500ms="shown" style="display: none;" class='text-sm text-gray-600'>
                                                {{ 'Sent.' }}
                                            </div>


                                        </div>
                                        <!--end::Send-->
                                        <!--begin::Other-->
                                        <span class="btn btn-icon btn-sm btn-clean mr-2" id="kt_inbox_compose_attachments_select">
                                            <i class="flaticon2-clip-symbol"></i>
                                        </span>
                                        <span class="btn btn-icon btn-sm btn-clean">
                                            <i class="flaticon2-pin"></i>
                                        </span>
                                        <!--end::Other-->
                                    </div>
                                    <!--end::Actions-->
                                    <!--begin::Toolbar-->
                                    <div class="d-flex align-items-center">
                                        <span class="btn btn-icon btn-sm btn-clean mr-2" data-toggle="tooltip" title="More actions">
                                            <i class="flaticon2-settings"></i>
                                        </span>
                                        <span class="btn btn-icon btn-sm btn-clean" data-inbox="dismiss" data-toggle="tooltip" title="Dismiss reply">
                                            <i class="flaticon2-rubbish-bin-delete-button"></i>
                                        </span>
                                    </div>
                                    <!--end::Toolbar-->
                                </div>
                                <!--end::Footer-->
                            </form>
                            <!--end::Form-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>
</div>
