@include('admin.controllers.header')
@include('admin.controllers.upper-header')
@include('admin.controllers.sidebar')
<!-- start sidebar -->

<!-- end sidebar -->
<!-- start admin title -->
<div class="admin-title">
    <div class="container">
        <div class="title-search">
            <div class="admin-title-h">
                <img src="{{asset('admin/images/titles/message.svg')}}" alt="">
                <h4>الرسائل</h4>
            </div>
            {{--            <div class="ad-search">--}}
            {{--                <div class="ad-item-search">--}}
            {{--                    <input type="text" placeholder="ابحث برقم الطلب او التنبية ">--}}
            {{--                    <button>--}}
            {{--                        <img src="./images/s-search.svg" alt="">--}}
            {{--                    </button>--}}
            {{--                </div>--}}
            {{--            </div>--}}

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

<!-- start admin title -->
<!-- start body content -->
<div class="container mb-60 mt-30">
    @forelse($messages as $message)
        <div class="item-message">
            <div class="item-message-status">
                <div class="key-value active">
                    <span>رقم الرسالة :</span>
                    <span>{{$message->code}}</span>
                </div>
                <div class="key-value ">
                    <span>حالة :</span>
                    <span>{{order_status($message->order->status)}}</span>
                </div>
                <div class=""></div>
            </div>
            <div class="item-message-number">
                <div class="key-value">
                    <span>رقم الطلب :</span>
                    <span>{{$message->order->code}}</span>
                </div>
            </div>
        </div>

    @empty
        لا يوجد رسائل
    @endforelse
<div style="display: table">
    {{$messages->links()}}
</div>


    <hr class="mt-50 mb-40">
    <div class="title-icon">
        <img src="{{asset('admin/images/titles/add-circle.svg')}}" alt="">
        <h3>إضافة رسالة</h3>
    </div>
    <form method="post" action="{{route('sendGroupMessage')}}">
        @csrf
        <div class="box-border ">
            <div class="row">
                <div class="col-sm-6">
                    <div class="input-group">
                        <h6><strong>قسم الإرسال</strong></h6>
                        <select id="section" name="section" required class="form-control" >
                            <option selected disabled>يرجي اختيار القسم</option>
                            @foreach($sections as $section=>$value)

                                <option value="{{$section}}">{{$value}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-sm-6">
                    <h6><strong>العملاء - الطلبات</strong></h6>

                    <select  id="orders" class="js-example-basic-multiple form-control" name="ids[]" multiple="multiple">


                    </select>
                </div>
                <div class="col-sm-12 mt-20">
                    <div class="input-group">
                        <h6><strong>نص الرسالة</strong></h6>
                        <textarea required name="message" id="" class="form-control height"
                                  placeholder="برجاء كتابة ملاحظاتك هنا"></textarea>
                    </div>
                </div>


            </div>
        </div>
        <div class="button-sub">
            <button type="submit" class="btn-req">إرسال</button>
        </div>
    </form>


</div>


<!-- start body content -->
<script>

    var expanded = false;

    function showCheckboxes() {
        var checkboxes = document.getElementById("checkboxes");
        if (!expanded) {
            checkboxes.style.display = "block";
            checkboxes.style.position = "absolute";
            checkboxes.style.width = "100%";
            checkboxes.style.zIndex = "44";
            checkboxes.style.background = "#fff";

            expanded = true;
        } else {
            checkboxes.style.display = "none";
            expanded = false;
        }
    }

</script>


@include('admin.controllers.footer')