@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">
                    <div class="card-header">
                        <form action="{{ route('post_status') }}" method="post">
                            @csrf

                            <div class="row">
                                <div class="col">
                                    <label>الحالات</label>
                                    <select class="form-control" name="status_id" required>
                                        <option value="" disabled selected>-- اختر من القائمه --</option>
                                        <option value="0" {{ isset($data) && $status == 0 ? 'selected' : null }}>الكل
                                        </option>
                                        @foreach (getStatusData() as $row)
                                            <option value="{{ $row->id }}"
                                                {{ isset($data) && $row->id == $status ? 'selected' : null }}>
                                                {{ $row->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <br>

                            <div class="row">
                                <div class="col">
                                    <label>تاريخ البدايه</label>
                                    <input type="datetime-local" name="start_data" class="form-control"
                                        value="{{ isset($data) ? $start_data : null }}">
                                </div>

                                <div class="col">
                                    <label>تاريخ النهايه</label>
                                    <input type="datetime-local" name="end_data" class="form-control"
                                        value="{{ isset($data) ? $end_data : null }}">
                                </div>
                            </div>

                            <br>


                            <div class="row">
                                <div class="col">
                                    <button class="btn btn-success">بحث</button>
                                </div>
                            </div>

                        </form>
                    </div>
                    <hr>

                    <div class="card-body">
                        @isset($data)
                            <div class="row">

                                <div class="col">
                                    <form action="{{ route('download_data_status') }}" method="post">
                                        @csrf

                                        <input type="hidden" name="status_id" value="{{ isset($data) ? $status : null }}">
                                        <input type="hidden" name="start_data" value="{{ isset($data) ? $start_data : null }}">
                                        <input type="hidden" name="end_data" value="{{ isset($data) ? $end_data : null }}">
                                        <button type="submit" class="btn btn-info" id="btn_download_status_information">تنزيل
                                            قاعدة البيانات</button>
                                    </form>
                                </div>



                                @if (!$status == 0)
                                    <div class="col">
                                        <form action="{{ route('download_count_status') }}" method="post">
                                            @csrf

                                            <input type="hidden" name="status_id" value="{{ isset($data) ? $status : null }}">
                                            <input type="hidden" name="start_data"
                                                value="{{ isset($data) ? $start_data : null }}">
                                            <input type="hidden" name="end_data"
                                                value="{{ isset($data) ? $end_data : null }}">
                                            <button class="btn btn-danger">
                                                تنزيل اعداد العملاء
                                            </button>
                                        </form>
                                    </div>
                                @endif


                            </div>

                            <br>

                            <br>
                            <div class="row">




                                <div class="col-lg-3 col-6">
                                    <!-- small box -->
                                    <div class="small-box bg-warning">
                                        <div class="inner">
                                            <h3>{{ $data->count() }}</h3>

                                            <p>عدد العملاء </p>
                                        </div>
                                        <div class="icon">
                                            <i class="ion ion-person-add"></i>
                                        </div>
                                    </div>
                                </div>





                            </div>

                            <br>





                            <br>
                        @endisset
                    </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>
@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('لم يتم تحديد أي شيء');
                }
            });
        });
    </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>


    <script>
        var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
        var donutData = {
            labels: [
                'Chrome',
                'IE',
                'FireFox',
                'Safari',
                'Opera',
                'Navigator',
            ],
            datasets: [{
                data: [700, 500, 400, 600, 300, 100],
                backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de'],
            }]
        }
        var donutOptions = {
            maintainAspectRatio: false,
            responsive: true,
        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        new Chart(donutChartCanvas, {
            type: 'doughnut',
            data: donutData,
            options: donutOptions
        })
    </script>




@endsection