@extends('layouts/contentLayoutMaster')

@section('title', 'DataTables')

@section('vendor-style')
    {{-- vendor css files --}}
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/pickers/flatpickr/flatpickr.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
@endsection

@section('page-style')
    {{-- Page Css files --}}
    <link rel="stylesheet" type="text/css" href="{{ asset('css/base/plugins/forms/pickers/form-flat-pickr.css') }}">

@endsection


@section('content')

    <link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
    <!-- Ajax Sourced Server-side -->

    <section id="ajax-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-bottom d-flex " style="justify-content: space-between !important">
                        <h4 class="card-title">Broadcast Pesan Peringatan Ke WhatsApp</h4>
                        <div>
                            <a href="{{ url('broadcast_peringatan/tambah_broadcast') }}" class="btn btn-primary ">Tambah</a>
                            @if ($check)
                                <a href="#" class="btn btn-danger delete-all" style="display: none"
                                    data-bs-toggle="modal" data-bs-target="#hapus">Hapus</a>
                                <div class="modal fade" id="hapus" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog  modal-lg" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="modalFullTitle">Hapus Broadcast Pesan</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="p-2 text-center">
                                                    <h4>Apakah Anda Yakin Ingin Menghapus Data Ini!</h4>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-label-secondary"
                                                    data-bs-dismiss="modal">Close</button>
                                                <a href="#" class="btn btn-primary semua_data"
                                                    data-url="{{ url('broadcast_peringatan/deleted_soft') }}">Hapus</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>

                    
                    @if (session()->get('success'))
                        <div class="alert alert-success m-1 p-1">{{ session()->get('success') }}</div>
                    @endif
                    @if (session()->get('error'))
                        <div class="alert alert-danger m-1 p-1">{{ session()->get('error') }}</div>
                    @endif
                    @if ($errors->any())
                        <div class="alert m-1 p-1 alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="card-datatable m-1">
                        <div class="table-responsive">
                            <table class=" table-hover table-striped  table tables-responsive"
                                style="width:100% !important" id="table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Perangkat</th>
                                        <th>Status Siaga</th>
                                        <th>Judul</th>
                                        <th>Pesan</th>
                                        <th>Grup Penerima</th>
                                        <th>Tanggal Broadcast</th>
                                        <th>Tanggal Kalkulasi</th>
                                        <th>Type Pengiriman</th>
                                        @if ($check)
                                            <th>
                                                <div class='form-check form-check-primary ' id="checkAll">
                                                    <input type='checkbox' class='form-check-input checkall' />
                                                </div>
                                            </th>
                                        @else
                                            <th></th>
                                        @endif
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection


@section('vendor-script')
    <script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM="
        crossorigin="anonymous"></script>
    {{-- vendor files --}}
    <script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/pickers/flatpickr/flatpickr.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
@endsection

@section('page-script')
    {{-- Page js files --}}

    <script src="{{ asset(mix('js/scripts/tables/table-datatables-advanced.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/forms/form-select2.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/components/components-modals.js')) }}"></script>
    <script src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.2/js/dataTables.bootstrap5.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#table").DataTable({
                processing: true,
                serverSide: true,
                // ordering: false,
                ajax: "{{ url('broadcast_peringatan/ambil') }}",
                columns: [{
                        data: "DT_RowIndex",
                        name: "DT_RowIndex",
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'nama_device',
                        name: 'nama_device',
                        orderable: false
                    },
                    {
                        data: 'siaga',
                        name: 'siaga',
                        orderable: false
                    },
                    {
                        data: 'title',
                        name: 'title',
                        orderable: false
                    },
                    {
                        data: 'message',
                        name: 'message',
                        orderable: false
                    },
                    {
                        data: 'uuid_group',
                        name: 'uuid_group',
                        orderable: false
                    },
                    {
                        data: 'date_time',
                        name: 'date_time',
                        orderable: false
                    },
                    {
                        data: 'datetime_calculate',
                        name: 'datetime_calculate',
                        orderable: false
                    },
                    {
                        data: 'send_by',
                        name: 'send_by',
                        orderable: false
                    },
                    {
                        data: 'uuid',
                        name: 'uuid ',
                        orderable: false,
                        searchable: false
                    }
                ],
                drawCallBack: function(setting) {
                    checkedContent();
                    DeleteAll();
                    uncheckedContent();
                }
            });
        });

        let idDelete = [];
        let Otable;

        $(document).on('click', '.semua_data', function(e) {
            e.preventDefault();
            $('.item_checkbox:checked').each(function() {
                idDelete.push($(this).val());
            });
            if (idDelete.length > 0) {
                let url = $(this).data('url');

                $.ajax({
                    type: 'POST',
                    url: url,
                    data: {
                        _method: 'DELETE',
                        id: idDelete,
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {
                        location.reload();
                    }
                });
            } else {
                location.reload();
            }
        });

        $(document).on('change', '.checkboks', function(e) {
            let id = $(this).val();
            if ($(this).is(':checked')) {
                idDelete.push(id);
                checkedContent();
            } else {
                removeA(idDelete, id);
                uncheckedContent();
            }
            DeleteAll();
        });

        $(document).on('click', '.checkall', function(e) {
            var ischecked = $(this).is(':checked');
            if (ischecked) {
                $('input[type=checkbox]').prop('checked', 'checked');
                checkAll();
            } else {
                $('input[type=checkbox]').prop('checked', '');
                uncheckAll();
            }
            DeleteAll();
        });

        function removeA(arr) {
            var what, a = arguments,
                L = a.length,
                ax;
            while (L > 1 && arr.length) {
                what = a[--L];
                while ((ax = arr.indexOf(what)) !== -1) {
                    arr.splice(ax, 1);
                }
            }
            return arr;
        }

        function checkedContent() {
            $.each(idDelete, function(index, value) {
                $('#select' + value).prop("checked", true);
            });

            var numberOfChecked = $('input:checkbox[name=check_data]:checked').length;
            var numberChecked = $('input:checkbox[name=check_data]').length;


            if (numberOfChecked > 0 && numberOfChecked < numberChecked) {
                $('#checkAll').html(
                    '<span id="unchecked" style="cursor: pointer;"><i style="font-size:20px !important;margin-left:-25px !important" class="fas fa-minus-square text-primary"></i></span>'
                );
            }
            if (numberOfChecked === 0) {
                $('#checkAll').html('');
            }

            if (numberChecked > 0 && numberOfChecked <= 0) {
                $('#checkAll').html(`<input type="checkbox" class="checkall form-check-input" id="emailCheck">`);
            }
            if (numberOfChecked === numberChecked) {
                if (numberOfChecked === 0 && numberChecked === 0) {
                    $('#checkAll').html(``);
                } else {
                    $('#checkAll').html(
                        `<input type="checkbox" class="checkall form-check-input" id="emailCheck" checked>`);
                }

            }
        }

        function uncheckedContent() {
            var numberOfChecked = $('input:checkbox[name=check_data]:checked').length;

            var numberChecked = $('input:checkbox[name=check_data]').length;
            if (numberOfChecked === 0) {
                $('#checkAll').html(`<input type="checkbox" class="checkall form-check-input"/>`);
            }
            if (numberOfChecked > 0) {
                $('#checkAll').html(
                    `<span id="unchecked" style="cursor: pointer;"><i style="font-size:20px !important;margin-left:-25px !important" class="fas  fa-minus-square text-primary"></i></span>`
                );
            }
        }

        function checkAll() {
            $("input:checkbox[name=check_data]:checked").each(function() {
                idDelete.push($(this).val());
            });
        }

        function uncheckAll() {
            $("input:checkbox[name=check_data]").each(function() {
                var val = $(this).val();
                idDelete.splice(idDelete.indexOf(val), 1);
            });
        }

        function DeleteAll() {
            if (idDelete.length > 0) {
                $('.delete-all').show();
                $('#lengthcek').html(' ' + idDelete.length);
            } else {
                $('.delete-all').hide();
            }
        }
    </script>
@endsection