@section('optional_css')
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="{{ asset('plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
@endsection
@section('optional_js')
    <!-- SweetAlert2 -->
    <script src="{{ asset('plugins/sweetalert2/sweetalert2.min.js') }}"></script>
    <!-- DataTables  & Plugins -->
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>

    <script>
        $(document).ready(function () {
            var table = $('.table').DataTable({
                order: [ 0, "desc" ],
                responsive: true,
            });

            $('a#link_id').click(function(){
                window.open('url', 'window name', 'window settings');
                return false;
            });
        })
    </script>
@endsection

<x-app-layout>
    <x-slot name="header">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">{{ __('WhatsApp Report') }}</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
            </div><!-- /.col -->
        </div><!-- /.row -->
    </x-slot>
    @if(session('success'))
        <x-alert-success>
            {{ session('success') }}
        </x-alert-success>
    @endif
    @if(session('delete'))
        <x-alert-danger>
            {{ session('delete') }}
        </x-alert-danger>
    @endif
    <form class="form-horizontal" action="{{ route('admin.wa-report.update-sender') }}" method="POST" enctype="multipart/form-data">
        <x-card class="col-sm-12">
            <x-slot name="title">{{ __('Nomor Wa') }}</x-slot>
            @csrf
            <div class="form-group row">
                <div class="col-sm-10">
                    <div class="form-group row">
                        <div class="col-sm-12">
                            <x-input id="nomor" placeholder="{{ __('Nomor Wa') }}" class="{{ $errors->has('nomor') ? 'is-invalid' : '' }}" type="text" name="nomor" :value="old('nomor', $status->data->sender)"/>
                            @if ($errors->has('nomor'))
                                <small class="error invalid-feedback">{{ $errors->first('nomor') }}</small>
                            @endif
                            <span class="error text-danger">*Setelah Update Nomor, Tunggu Status Disconnect Kemudian Scan Ulang Kembali Nomor WA Anda</span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <input type="submit" value="{{ __('Update') }}" class="form-control btn-success">
                    </div>
                </div>
            </div>
        </x-card>
    </form>
    <x-card>
        <x-slot name="title">{{ __('WhatsApp Report') }}</x-slot>
        <x-slot name="tools">
            <x-button-link href="{!! $linkscan !!}" target="_blank">Scan Ulang QRCode WA</x-button>
        </x-slot>
        <div class="col-12 table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>{{ __('Tanggal Terkirim') }}</th>
                        <th>{{ __('No Wa') }}</th>
                        <th>{{ __('Pesan') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th>{{ __('Note') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($reports as $report)
                        <tr>
                            <td>{{ date('Y-m-d H:i:s', strtotime($report->date->created)) }}</td>
                            <td>{{ $report->phone->to }}</td>
                            <td>{{ $report->message }}</td>
                            <td>{{ $report->status }}</td>
                            @if($report->status == "cancel")
                                <td>whatsapp number {{ $report->phone->to }} offline / not found, status: 404</td>
                            @elseif($report->status == "pending")
                                <td>pending message</td>
                            @else
                                <td>success sending message</td>
                            @endif
                            
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </x-card>
</x-app-layout>