@extends('admin.layouts.master')


@section('title')
    العملاء
@endsection

@section('css')


@endsection


@section('content-header')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">العملاء</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item active">العملاء</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
@endsection


@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <!-- /.card-header -->
                    @if(!auth('employee')->check())
                    <div class="card-header">
                        <a href="{{route('clients.create')}}" class="btn btn-success">
                            اضافه عميل جديد
                        </a>

                        <button type="button" class="btn btn-info" id="btn_delete_all">
                            ارسال رساله خاصه
                        </button>

                        <button type="button" class="btn btn-info" id="btn_delete_employee">
                           تحويل الي موظفين
                        </button>


                    </div>
                    @endif

                    <div class="card-body">
                        @include('admin.messages')
                        <table id="example1" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>
                                    <input name="select_all" id="example-select-all" type="checkbox"
                                           onclick="CheckAll('box1', this)"/>

                                    <label class="form-check-label"
                                           for="example-select-all">
                                        تحديد الكل
                                    </label>
                                </th>


                                <th>اسم العميل</th>
                                <th>رقم العميل</th>
                                <!--<th>تاريخ اليوم العميل</th>-->
                                <th>تاريخ اضافة العميل </th>
                                <th>القناه المشترك فيها</th>
                                <th>حالة العميل </th>
                                {{--                                <th>حاله البوت</th>--}}
                                <th>شاشة المحادثة </th>
                                <th>اسم المشترك </th>
                                <th>اسم الموظف</th>
                                <th>العمليات</th>

                            </tr>
                            </thead>

                            <tbody>
                            @foreach($data as $row)

                                <tr>
                                    <td>{{$loop->index+1}}</td>
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input checkbox-item box1" type="checkbox" name="exampleRadios" id="exampleRadios1_{{$row->uuid}}" value="{{ $row->uuid }}">
                                            <label class="form-check-label" for="exampleRadios1_{{$row->uuid}}">
                                                تحديد
                                            </label>
                                        </div>
                                    </td>
                                    <td>{{$row->name}}</td>
                                    <td>{{$row->phone}}</td>
                                    <td>{{Carbon\Carbon::createFromDate($row->start_date)->format('Y-m-d')}}</td>                                    <td>{{$row->channel->name ?? null}}</td>
                                    <td>{{$row->status->name ?? null}}</td>
                                    <td>
                                        <a  href="{{route('clients.show',$row->uuid)}}">
                                            <span class="badge badge-danger">{{$row->messages_count_noTread()}}</span>
                                            <img src="{{asset('dash/whatsapp.png')}}" width="28px" height="28px" alt="">
                                        </a>


                                    </td>
                                    <td>{{$row->subscriber->name ?? 'الاداراه'}}</td>
                                    <td>{{$row->employee->name ?? 'الاداراه'}}</td>

                                    <td>
                                        <div class="dropdown">
                                            <button class="btn btn-success btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                العمليات
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                <a class="dropdown-item" href="{{route('clients.edit',$row->uuid)}}"> <i class="fa fa-edit text-success mr-2"></i> تعديل </a>
                                                @if(!auth('employee')->id())
                                                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#delete{{$row->uuid}}"> <i class="fa fa-trash text-danger mr-2"></i> حذف </a>

                                                @endif
                                                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#sendboot{{$row->uuid}}"> <i class="fa fa-car-battery text-info mr-2"></i> ارسال بوت </a>
                                                @if(!auth('employee')->check())
                                                    <a class="dropdown-item" href="#" data-toggle="modal" data-target="#change{{$row->uuid}}"> <i class="fa fa-reply text-info mr-2"></i> تحويل العميل </a>

                                                @endif
                                                <a class="dropdown-item" href="#" data-toggle="modal" data-target="#changeStatus{{$row->uuid}}"> <i class="fa fa-venus-mars text-info mr-2"></i> تغير حاله العميل </a>
                                            </div>
                                        </div>

                                    </td>
                                    @include('admin.clients.sendboot')
                                    @include('admin.clients.deleted')
                                    @include('admin.clients.change')
                                    @include('admin.clients.changeStatus')
                                </tr>

                            @endforeach


                            </tbody>
                        </table>
                        {!! $data->appends(['sort' => 'department'])->links() !!}

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

    <div class="modal fade" id="delete_all" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel" style="font-family: 'Cairo', sans-serif;">ارسال </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{route('sendNewMessages')}}" method="post">
                        @csrf
                        <input  type="hidden" id="delete_all_id" name="delete_all_id" value=''>

                        <div class="row">
                            <div class="col">
                                <label>اسم القناه</label>
                                <select class="form-control" name="whatsapp_id" required>
                                    <option value="" disabled selected>-- اختر اسم القناه  --</option>
                                    @foreach (getInformationData('channel') as $ClientWhatsapp)
                                        <option value="{{ $ClientWhatsapp->id }}">{{ $ClientWhatsapp->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <br>

                        <div class="row">
                            <div class="col">
                                <label>نوع الرسالة</label>
                                <select class="form-control" name="type" required onchange="handleAjaxResponse()" id="typeStatus">
                                    <option value="" disabled selected>-- اختر نوع الرد --</option>
                                    <option value="button">بوت</option>
                                    <option value="message">رساله خاصه</option>
                                </select>
                            </div>
                        </div>

                        <br>

                        <div class="row" id="button" style="display: none;">
                            <div class="col">
                                <label>قائمة الزر</label>
                                <select class="form-control" name="send_button_id">
                                    <option value="" disabled selected>-- اختر القائمة --</option>
                                    @foreach(getInformationData('ReplyBoot') as $button)
                                        <option value="{{ $button->id }}">{{ $button->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <br>

                        <div class="row" id="message" style="display: none;">
                            <div class="col">
                                <label>نص الرسالة</label>
                                <textarea class="form-control" name="messages" rows="5"></textarea>
                            </div>
                        </div>


                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">اغلاق</button>
                            <button type="submit" class="btn btn-primary">ارسال البيانات</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @if(!auth('employee')->check())
        <div class="modal fade" id="employee_all" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel" style="font-family: 'Cairo', sans-serif;">ارسال </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form action="{{route('transformationEmployee')}}" method="post">
                            @csrf
                            <input  type="hidden" id="delete_all_id" name="delete_all_id" value=''>

                            <div class="row">
                                <div class="col">
                                    <label>اسم الموظف</label>
                                    <select class="form-control" name="employee_id" required>
                                        <option value="" disabled selected>-- اختر اسم الموظف  --</option>
                                        @foreach (getInformationData('employee') as $employee)
                                            <option value="{{ $employee->id }}">{{ $employee->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>





                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">اغلاق</button>
                                <button type="submit" class="btn btn-primary">ارسال البيانات</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    @endif

@endsection


@section('js')
    <script>
        function CheckAll(className, elem) {
            var elements = document.getElementsByClassName(className);
            var l = elements.length;
            if (elem.checked) {
                for (var i = 0; i < l; i++) {
                    elements[i].checked = true;
                }
            } else {
                for (var i = 0; i < l; i++) {
                    elements[i].checked = false;
                }
            }
        }

        $(function () {
            $("#btn_delete_all").click(function () {
                var selected = new Array();
                $("#example1 input[type=checkbox]:checked").each(function () {
                    if (this.value !== 'on') { // تحقق من عدم وجود القيمة "on"
                        selected.push(this.value);
                    }
                });
                if (selected.length > 0) {
                    $('#delete_all').modal('show');
                    $('input#delete_all_id').val(selected);
                } else {
                    alert('لم يتم تحديد أي شيء');
                }
            });
        });

        $(function () {
            $("#btn_delete_employee").click(function () {
                var selected = new Array();
                $("#example1 input[type=checkbox]:checked").each(function () {
                    if (this.value !== 'on') { // تحقق من عدم وجود القيمة "on"
                        selected.push(this.value);
                    }
                });
                if (selected.length > 0) {
                    $('#employee_all').modal('show');
                    $('input#delete_all_id').val(selected);
                } else {
                    alert('لم يتم تحديد أي شيء');
                }
            });
        });
    </script>


    <script>
        function handleAjaxResponse() {
            var selectedType = document.getElementById('typeStatus').value;

            var buttonDiv = document.getElementById('button');
            var messageDiv = document.getElementById('message');

            // Reset display properties for all divs
            buttonDiv.style.display = 'none';
            messageDiv.style.display = 'none';

            // Show the corresponding div based on the selected type
            if (selectedType === 'button') {
                buttonDiv.style.display = 'block';
            } else if (selectedType === 'message') {
                messageDiv.style.display = 'block';
            }
        }
    </script>
@endsection