@extends('admin.layouts.index')

@push('css')
    <style type="text/css">
        .direct-chat-primary .right>.direct-chat-text {
            background: #3c8dbc;
            border-color: #3c8dbc;
            color: #fff;
        }

        .right .direct-chat-text {
            margin-right: 50px;
            margin-left: 0;
        }
    </style>
@endpush

@section('title')
    <h1>
        Pesan
        <small>{{ $action }} Data</small>
    </h1>
@endsection

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ site_url($controller) }}">Pesan</a></li>
    <li class="active">{{ $action }} Data</li>
@endsection

@section('content')
    @include('admin.layouts.components.notifikasi')
    @include('admin.layouts.components.asset_tinymce')

    <div class="box box-info">
        <div class="box-header with-border">
            <a href="{{ site_url('opendk_pesan') }}" class="btn btn-social btn-flat btn-info btn-sm btn-sm visible-xs-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
                <i class="fa fa-arrow-circle-left "></i>Kembali ke Pesan
            </a>
        </div>

        <div class="box-body no-padding">
            <div class="mailbox-controls">
                &nbsp;
                {{ $pesan->detailPesan()->paginate(20)->links('vendor.pagination.pesan') }}
            </div>
            <div class="mailbox-read-info">
                <h3 class="text-bold">Judul Pesan : {{ $pesan->judul }}</h3>
                <h5>
                    @if ($pesan->jenis === 'Pesan Masuk')
                        Dari
                    @else
                        Ditujukan untuk
                    @endif:
                    Desa {{ $pesan->dataDesa->nama }}
                    <span class="mailbox-read-time pull-right">{{ $pesan->custom_date }}</span>
                </h5>
            </div>
            @foreach ($pesan->detailPesan()->paginate(20) as $key => $data)
                <div class="mailbox-read-message">
                    <div class="row">
                        <div class="col-xs-1">
                            <div class="card img-thumbnail profil">
                                @if ($data->pengirim == 'kecamatan')
                                    <img class="img-responsive" src="{{ Foto_Default('kuser.png', $sex = 1) }}">
                                @else
                                    <img class="img-responsive" src="{{ gambar_desa($desa['logo']) }}">
                                @endif
                            </div>
                        </div>
                        <div class="col-xs-11">
                            <h5>
                                <span class="username ">
                                    <span class="text-bold">{{ $data->nama_pengirim }}</span>
                                    <span class="text-muted pull-right">{{ $data->created_at }}</span>
                                </span>
                            </h5>
                            {!! $data->text !!}
                        </div>
                    </div>
                </div>
            @endforeach
            @if ($pesan->diarsipkan == '0')
                <div class="form-group" style="padding: 20px;">
                    {!! form_open($form_action, 'class="form-horizontal" id="validasi"') !!}
                    <div class="col-sm-12">
                        <div class="form-group">
                            <textarea class="form-control" id="pesan" name="pesan"></textarea>
                        </div>
                        <div class="form-group">
                            <button id="action-reply" type="submit" class="btn btn-default"><i class="fa fa-reply"></i> Balas</button>
                        </div>
                    </div>
                    </form>
                </div>
            @endif
        </div>
    @endsection

    @push('scripts')
        <script type="text/javascript">
            $(function() {
                $('#prev-links').click(function() {
                    let page = $(this).data('currentPage');
                    if (page <= 1) {
                        return;
                    } else {
                        window.location = window.location.origin +
                            window.location.pathname + '?' + $.param({
                                page: page - 1
                            })
                    }
                })

                $('#next-links').click(function() {
                    let last = $(this).data('lastPage');
                    let page = $(this).data('currentPage');
                    if (last <= page) {
                        return;
                    } else {
                        window.location = window.location.origin +
                            window.location.pathname + '?' + $.param({
                                page: page + 1
                            })
                    }
                })

                tinymce.init({
                    selector: 'textarea',
                    height: 300,
                    promotion: false,
                    theme: 'silver',
                    plugins: [
                        'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'print', 'preview', 'hr', 'anchor', 'pagebreak',
                        'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'insertdatetime', 'media', 'nonbreaking',
                        'table', 'contextmenu', 'directionality', 'emoticons', 'paste', 'textcolor', 'code'
                    ],
                    toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | blocks",
                    toolbar2: "| link unlink anchor | image media | forecolor backcolor | print preview code | fontfamily fontsize",
                    image_advtab: true,
                    templates: [{
                            title: 'Test template 1',
                            content: 'Test 1'
                        },
                        {
                            title: 'Test template 2',
                            content: 'Test 2'
                        }
                    ],
                    content_css: [
                        '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
                        '//www.tinymce.com/css/codepen.min.css'
                    ],
                    skin: 'tinymce-5',
                    relative_urls: false,
                    remove_script_host: false
                });
            });
        </script>
    @endpush