@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">Pengaturan Token Whatsapp</h4>
                        {{-- <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#tambah">Tambah</a> --}}
                    </div>
                    <div class="card">
                        @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
        @if ($errors->any())
                        <div class="alert m-2 p-1 alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                        
                        <div class="row ">
                          <div class="col-md-5 ">
                            <div class="card-body">
                              <!-- form -->
                              <form id="createApiForm" action="{{ url("wa/update_token") }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                @method("PUT")
                                @if ($count)  
                                <div class="mb-2">
                                  <label for="nameApiKey" class="form-label"><h5>Username*</h5></label>
                                  <input
                                    class="form-control @error('username')
                                        is-invalid
                                    @enderror"
                                    type="text"
                                    name="username"
                                    required
                                    placeholder="Username"
                                    id="nameApiKey"
                                    value="{{ $first->username }}"
                                    data-msg="username"
                                  />
                                  @error('username')
                                    <small class="text-danger">{{ $message }}</small>
                                  @enderror
                                </div>
                                <div class="mb-2">
                                  <label for="nameApiKey" class="form-label"><h5>Token Whatsapp*</h5></label>
                                  <input
                                    class="form-control @error('token')
                                    is-invalid
                                    @enderror"
                                    type="text"
                                    required
                                    value="{{ $first->token }}"
                                    name="token"
                                    placeholder="Token Whatsapp"
                                    id="nameApiKey"
                                    data-msg="Please enter API key name"
                                  />
                                  @error('token')
                                    <small class="text-danger">{{ $message }}</small>
                                  @enderror
                                </div>
                                @else
                                <div class="mb-2">
                                  <label for="nameApiKey" class="form-label"><h5>Username</h5></label>
                                  <input
                                    class="form-control @error('username')
                                        is-invalid
                                    @enderror"
                                    type="text"
                                    name="username"
                                    required
                                    placeholder="Username"
                                    id="nameApiKey"
                                    value=""
                                    data-msg="username"
                                  />
                                  @error('username')
                                    <small class="text-danger">{{ $message }}</small>
                                  @enderror
                                </div>
                                <div class="mb-2">
                                  <label for="nameApiKey" class="form-label"><h5>Token Whatsapp</h5></label>
                                  <input
                                    class="form-control @error('token')
                                    is-invalid
                                    @enderror"
                                    type="text"
                                    required
                                    value=""
                                    name="token"
                                    placeholder="Token Whatsapp"
                                    id="nameApiKey"
                                    data-msg="Please enter API key name"
                                  />
                                  @error('token')
                                    <small class="text-danger">{{ $message }}</small>
                                  @enderror
                                </div>
                                @endif
                                {{-- <div class="mb-1">
                                  @if ($api == null || $api['result'] == "false")
                                  <span class="badge badge-pill bg-danger badge-danger">STATUS :   DISCONNECT  <i class="fas fa-times"></i></span>
                                  @else
                                  <span class="badge badge-pill bg-success badge-success">STATUS :   CONNECTED  <i class="fas fa-check"></i></span>
                                  @endif
                                </div> --}}
                                <button type="submit" class="btn btn-primary w-100">Simpan</button>
                              </form>
                            </div>
                          </div>
                          <div class="col-md-7 mt-1" >
                            {{-- <div class="text-center">
                              <img
                                class="img-fluid text-center"
                                src="{{asset('images/illustration/pricing-Illustration.svg')}}"
                                alt="illustration"
                                width="310"
                              />
                            </div> --}}
                            <div class="card-body">
                              <div class="row">
                                <div class="col-md-3">
                                  STATUS
                                </div>
                                <div class="col-md-9">
                                  @if ($api == null || $api['result'] == "false")
                                  <span class="badge bg-danger badge-pill">
                                    DISCONNECT
                                  </span>
                                  @else
                                  <span class="badge bg-success badge-pill">
                                    CONNECTED
                                  </span>
                                  @endif
                                </div>
                              </div>
                              {{-- @dd($api) --}}
                              <div class="row mt-2">
                                <div class="col-md-3">
                                  ID
                                </div>
                                <div class="col-md-9">
                                  @if ($api == null || $api['result'] == "false")
                                  <span class="text-wrap">
                                    -
                                  </span>
                                  @else
                                  <span class="text-wrap">
                                    {{ $api['devices'][0]['id']}}
                                  </span>
                                  @endif
                                </div>
                              </div>
                              <div class="row mt-2">
                                <div class="col-md-3">
                                  NAMA
                                </div>
                                <div class="col-md-9">
                                  @if ($api == null || $api['result'] == "false")
                                  <span class="text-wrap">
                                    -
                                  </span>
                                  @else
                                  <span class="text-wrap">
                                    {{ $api['nama']}}
                                  </span>
                                  @endif
                                </div>
                              </div>
                              <div class="row mt-2">
                                <div class="col-md-3">
                                  PAKET
                                </div>
                                <div class="col-md-9">
                                  @if ($api == null || $api['result'] == "false")
                                  <span class="text-wrap">
                                    -
                                  </span>
                                  @else
                                  <span class="text-wrap">
                                    {{ $api['devices'][0]['paket']}}
                                  </span>
                                  @endif
                                </div>
                              </div>
                              <div class="row mt-2">
                                <div class="col-md-3">
                                  EXPIRED
                                </div>
                                <div class="col-md-9">
                                  @if ($api == null || $api['result'] == "false")
                                  <span class="text-wrap">
                                    -
                                  </span>
                                  @else
                                  <span class="text-wrap">
                                    {{ date("d, F Y H:i",strtotime($api['devices'][0]['expired'])) }}
                                  </span>
                                  @endif
                                </div>
                              </div>
                              {{-- @dd($api) --}}
                              <div class="row mt-2">
                                <div class="col-md-3">
                                  PESAN
                                </div>
                                <div class="col-md-9">
                                  @if ($api == null)
                                  <span class="text-wrap">
                                    -
                                  </span>
                                  @else
                                  <span class="text-wrap">
                                      {{ $api['message'] }}
                                  </span>
                                  @endif
                                </div>
                              </div>
                            </div>
                          </div>
                        </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").DataTable();
        });
    </script>
@endsection