@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')
    <!-- 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">Detail Penerima Broadcast </h4>
                        <a href="{{ url("broadcast_peringatan/detail/$id_pesan") }}" class="btn btn-warning">Kembali</a>
                    </div>
                    
                    @if (session()->get('success'))
                        <div class="alert alert-success m-2 p-1">{{ session()->get('success') }}</div>
                    @endif
                    @if (session()->get('error'))
                        <div class="alert alert-danger m-2 p-1">{{ session()->get('error') }}</div>
                    @endif
                    <div class="card-datatable m-1">
                        <h5>Nama Device : {{ (!empty($nama_device)) ? $nama_device->nama_device : ""; }}</h5>
                        <h5>Status : 

                            @if (!empty($pesan))
                            {{ $pesan->siaga }}
                            @endif
                        </h5>
                        <h5>Group : {{ (!empty($group->group)) ? $group->group : "";}}</h5>
                        <h5>Type Pengiriman : {{ (!empty($pesan->send_by)) ? $pesan->send_by : "";}}</h5>
                        <h5>Tanggal Broadcast : {{ (!empty($pesan)) ? date("d, F Y H:i",strtotime($pesan->date_time)) : "";}}</h5>
                        <div class="table-responsive">
                            <table class=" table-hover table-striped  table tables-responsive" style="width:100% !important" id="table_services">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Nama</th>
                                        <th>Jabatan</th>
                                        <th>No WhatsApp</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection


@section('vendor-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>
         $(document).ready(function() {
             $("#table_services").DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ url('broadcast_peringatan/penerima_pesan_pengguna/' . $id_group . '/' . $id_pesan) }}",
                columns: [{
                        data: "DT_RowIndex",
                        name: "DT_RowIndex",
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'nama',
                        name: 'nama',
                        orderable: false
                    },
                    {
                        data: 'jabatan',
                        name: 'jabatan',
                        orderable: false
                    },
                    {
                        data: 'no_wa',
                        name: 'no_wa',
                        orderable: false
                    }
                ],
            });
        });
    </script>
@endsection