@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-sm-12">
                <div class="card">
                    <!-- /.card-header -->

                    <div class="card-header">
                        @if(auth('subscriber')->check())
                            @if(checkPackage(auth('subscriber')->id() , 'القنوات'))
                                <button class="btn btn-success" data-toggle="modal" data-target="#createNewStatus">اضافه قناه
                                    جديده
                                </button>
                                @include('admin.channels.create')

                            @else
                                <button class="btn btn-success" disabled data-toggle="modal" data-target="#createNewStatus">اضافه قناه
                                    جديده
                                </button>
                            @endif


                        @else

                            <button class="btn btn-success" data-toggle="modal" data-target="#createNewStatus">اضافه قناه
                                جديده
                            </button>
                            @include('admin.channels.create')
                        @endif

                        <button class="btn btn-info">تعين الي موظف</button>
                    </div>

                        <div class="card-body">
                            @include('admin.messages')
                           <div class="row">
    <div class="col-sm-12">
         <div class="table-responsive">
            <table id="example1" class="table table-bordered table-hover reload-table">
                <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="select-all-checkbox">
                    </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>
                            <input type="checkbox" id="{{$row->id}}" class="select-checkbox">
                        </td>
                        <td>{{$loop->index+1}}</td>
                        <td>{{$row->name}}</td>
                        <td>{{$row->notes}}</td>
                        <td>{{$row->phone}}</td>
                        <td>{{$row->number_id}}</td>
                        <td>{{$row->subscriber->name ?? 'اداره فاروق جروب'}}</td>
                        <td>

                            @foreach($row->chanelemployee as $chanelemployee)

                                @if ($chanelemployee->employee_id)
                                    <li>
                                        {{ $chanelemployee?->employee?->name }} ({!!  $chanelemployee->employee->type()  !!})
                                        <a href="{{route('deletedEmployeeChanel',$chanelemployee->id)}}" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i></a>
                                        <br>
                                    </li>
                                    <br>
                                @endif
                            @endforeach

                        </td>
                        <td>
                            <div class="form-check form-switch">
                                <input class="form-check-input"
                                       {{$row->status == "active" ? "checked" : null}} type="checkbox"
                                       role="switch" id="flexSwitchCheckDefault{{$row->id}}"
                                       onchange="updateStatus(this.checked, {{$row->id}})">
                                <label class="form-check-label" for="flexSwitchCheckDefault{{$row->id}}">نشط </label>
                            </div>
                        </td>

                        <td>
                            <a  href="{{route('channels_messages',$row->id)}}">
                                <span class="badge badge-danger"></span>
                                <img src="{{asset('dash/whatsapp.png')}}" width="28px" height="28px" alt="">
                            </a>
                        </td>
                        <td>
                            <button class="btn btn-info btn-sm" title="تعين قناه الي موظف اخر" data-toggle="modal" data-target="#employee{{$row->id}}"><i class="fa fa-eye"></i></button>
                            <button class="btn btn-success btn-sm" data-toggle="modal" data-target="#edit{{$row->id}}"><i class="fa fa-edit"></i></button>
                            <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#delete{{$row->id}}"><i class="fa fa-trash"></i></button>
                        </td>
                        @include('admin.channels.employee')
                        @include('admin.channels.edit')
                        @include('admin.channels.deleted')
                    </tr>
                @endforeach
                </tbody>

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


                    <!-- /.card-body -->
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="confirmationModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">تأكيد التعيين</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                  <div class="row">
                      <div class="col">
                          <label>الموظفين</label>
                          <select class="form-control" name="employee_id" id="employeeSelect" >
                              <option value="" disabled selected>-- اختر من القائمة --</option>
                              @foreach(getInformationData('employee') as $row)
                                  <option value="{{$row->id}}">{{$row->name}} ({!! $row->type() !!})</option>
                              @endforeach
                          </select>
                      </div>
                  </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">إلغاء</button>
                    <button type="button" class="btn btn-primary" id="confirmAssignment" disabled>تأكيد</button>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
    <script>
        var selectAllCheckbox = document.getElementById('select-all-checkbox');

        var checkboxes = document.querySelectorAll('.select-checkbox');

        selectAllCheckbox.addEventListener('click', function() {
            checkboxes.forEach(function(checkbox) {
                checkbox.checked = selectAllCheckbox.checked;
            });
        });
    </script>

    <script>

        var employeeSelect = document.getElementById('employeeSelect');
        var confirmButton = document.getElementById('confirmAssignment');


        employeeSelect.addEventListener('change', function() {
            if (employeeSelect.value !== '') {
                confirmButton.disabled = false;
            } else {
                confirmButton.disabled = true;
            }
        });
    </script>

    <script>

        document.querySelector('.btn-info').addEventListener('click', function() {

            var selectedCheckboxes = document.querySelectorAll('.select-checkbox:checked');
            if (selectedCheckboxes.length > 0) {
                $('#confirmationModal').modal('show');
            } else {
                Swal.fire({
                    icon: 'error',
                    title: 'خطأ !',
                    text: 'لم يتم اختيار اي شي',
                    showConfirmButton: false,
                    timer: 1500
                });
            }
        });

        document.getElementById('confirmAssignment').addEventListener('click', function() {
            var selectedEmployeeId = document.querySelector('select[name="employee_id"]').value;
            var selectedChannels = [];
            document.querySelectorAll('.select-checkbox:checked').forEach(function(checkbox) {
                selectedChannels.push(checkbox.id);
            });

            $.post('{{ route('multipleChanelEmployee') }}', {
                '_token': '{{ csrf_token() }}',
                'employee_id': selectedEmployeeId,
                'channels': selectedChannels
            }, function(response) {
                $('#confirmationModal').modal('hide');
                Swal.fire({
                    icon: 'success',
                    title: 'نجاح!',
                    text: response.message,
                    showConfirmButton: false,
                    timer: 1500
                });
                $('.select-checkbox:checked').prop('checked', false);
                $('#select-all-checkbox').prop('checked', false);
                location.reload();

            }).fail(function() {
                $('#confirmationModal').modal('hide');
                Swal.fire({
                    icon: 'error',
                    title: 'خطأ!',
                    text: "حدث خطأ اثماء عمليه التحويل برجاء التواصل مع المسئول",
                    showConfirmButton: false,
                    timer: 2500
                });
                $('.select-checkbox:checked').prop('checked', false);
                $('#select-all-checkbox').prop('checked', false);
            });

        });


    </script>


<script>
    function updateStatus(checked, id) {
        var status = checked ? "active" : "noActive";

        // إرسال طلب AJAX
        $.ajax({
            url: "{{ route('status_status_channels') }}",
            method: "POST",
            headers: {
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            data: {
                status: status,
                id: id
            },
            success: function (response) {
                Swal.fire({
                    icon: 'success',
                    title: 'نجاح!',
                    text: response.message,
                    showConfirmButton: false,
                    timer: 1500
                });
            },
            error: function () {
                alert("حدث خطأ أثناء تحديث الحالة");
            }
        });
    }


</script>

@endsection