@extends('layouts.app')
@section('content')
    @include('phoneListWhatsapp.header')
    @include('phoneListWhatsapp.create_modal')    
    @include('phoneListWhatsapp.edit_modal')    
    <div class="px-4">
      <button id="button-create" class="btn btn-sm btn-kreddo float-right text-white" data-toggle="modal" data-target="#createModal">Create New</button>
      <div class="clearfix"></div>
      <div class="card" style="margin-top: 10px; border-radius: 20px; background-color: #F9F9F9">
          <div class="card-body">
            <form id="" class="row align-items-center mb-3 mb-md-0">
              <div class="form-group col-12 col-md-2">
                  <select name="api_service_filter" id="api_service_filter" class="form-control form-select-sm" style="border-radius: 10px">
                      <option value="">API Service</option>
                      @foreach ($vendors as $vendor)
                      <option value="{{ $vendor->id }}">{{ $vendor->name }}</option>
                      @endforeach
                  </select>
              </div>
          </form>

          <div class="table-responsive">
              {{ $dataTable->table() }}
          </div>
        </div>
      </div>
    </div>
@endsection
@push('scripts')
    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}

    <script>
        $(function(){
            $('#api_service_filter').on('change', function(){
              console.log("A");
                    let ajaxUrl = "{{ route('phoneListWhatsapp.index') }}";
              
                    var api_service_filter = $('select#api_service_filter').val();
                    const payload = ajaxUrl + `?api_service_filter=${api_service_filter}` ;
                    window.LaravelDataTables['whatsappbusinessphone-table'].ajax.url(payload).draw()
            })
        })
    </script>
  
    {{-- reload table --}}
    <script>
      function reload(){
        $('#whatsappbusinessphone-table').DataTable().ajax.reload();
      }
    </script>

    {{-- close modal --}}
    <script>
      function closeModalCreate() {
        $('#createModal').modal('hide');
      }
      function closeModalEdit() {
        $('#editModal').modal('hide');
      }
    </script>

    {{-- create function --}}
    <script>
      $('#create').on('submit', function (e) {
          e.preventDefault();

          var phone_name = $('#phone_name').val();
          var api_service = $('#api_service').val();
          var phone_number = $('#phone_number').val();
          var account_id = $('#account_id').val();
          var phone_number_id = $('#phone_number_id').val();
          var token = $('#token').val();

          $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });
          $.ajax({
              method: 'POST',
              url: '{{ route('phoneListWhatsapp.store') }}',
              data: {
                  phone_name: phone_name,
                  vendor_id: api_service,
                  phone_number: phone_number,
                  account_id: account_id,
                  phone_number_id: phone_number_id,
                  token: token
              },
              success: function (response) {
                Swal.fire({
                  position: 'center',
                  icon: 'success',
                  title: response.message,
                  showConfirmButton: false,
                  timer: 2000
                })
                closeModalCreate();
                reload();
                $('#phone_name').val('');
                $('#api_service').val('');
                $('#phone_number').val('');
                $('#account_id').val('');
                $('#phone_number_id').val('');
                $('#token').val('');
              },
              error: function (xhr, status, error) {
                    var response = JSON.parse(xhr.responseText);
                    
                    var errorMessage = response.message;
                    var errors = response.errors;
                    
                    if (errors && errors.password) {
                        errorMessage = errors.password[0];
                    }
                    
                    Swal.fire({
                        position: 'center',
                        icon: 'error',
                        title: errorMessage,
                        showConfirmButton: false,
                        timer: 2500
                    });
            }
          });
      });
    </script>

    {{-- delete function --}}
    <script>
      function deletePhone(id)
      {
        Swal.fire({
          title: 'Are you sure?',
          text: "You won't be able to revert this!",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
          if (result.isConfirmed) {
            deleteFunction(id)
          }
        })
      }
      function deleteFunction(id) {
        $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });
        $.ajax({
            method: 'DELETE',
            url: "{{ url('phoneListWhatsapp') }}/"+id,
            success: function (response) {
              Swal.fire({
                position: 'center',
                icon: 'success',
                title: response.message,
                showConfirmButton: false,
                timer: 2000
              })
              reload();
            },
            error: function (xhr, status, error) {
                    var response = JSON.parse(xhr.responseText);
                    
                    var errorMessage = response.message;
                    var errors = response.errors;
                    
                    if (errors && errors.password) {
                        errorMessage = errors.password[0];
                    }
                    
                    Swal.fire({
                        position: 'center',
                        icon: 'error',
                        title: errorMessage,
                        showConfirmButton: false,
                        timer: 2500
                    });
            }
        });
      }
    </script>

    {{-- edit function --}}
    <script>
      function editPhone(id){
        $.ajax({
          method: 'GET',
          url: "{{ url('phoneListWhatsapp') }}/"+id+'/edit',
          success: function (response) {
              // handle the edit form with the data
              $('#edit_id').val(response.id);
              $('#edit_phone_name').val(response.phone_name);
              $('#edit_api_service').val(response.vendor_id);
              $('#edit_phone_number').val(response.phone_number);
              $('#edit_account_id').val(response.account_id);
              $('#edit_phone_number_id').val(response.phone_number_id);
              $('#edit_token').val(response.token);

              // show the modal
              $('#editModal').modal('show');
          },
          error: function (xhr, status, error) {
                    var response = JSON.parse(xhr.responseText);
                    
                    var errorMessage = response.message;
                    var errors = response.errors;
                    
                    if (errors && errors.password) {
                        errorMessage = errors.password[0];
                    }
                    
                    Swal.fire({
                        position: 'center',
                        icon: 'error',
                        title: errorMessage,
                        showConfirmButton: false,
                        timer: 2500
                    });
            }
        });
      }
    </script>
    {{-- update funtion --}}
    <script>
      $('#edit').on('submit', function (e) {
          e.preventDefault();
          var id = $('#edit_id').val();
          var phone_name = $('#edit_phone_name').val();
          var api_service = $('#edit_api_service').val();
          var phone_number = $('#edit_phone_number').val();
          var account_id = $('#edit_account_id').val();
          var phone_number_id = $('#edit_phone_number_id').val();
          var token = $('#edit_token').val();

          $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });

          $.ajax({
              method: 'PUT',
              url: "{{ url('phoneListWhatsapp') }}/"+id,
              data: {
                  id: id,
                  phone_name: phone_name,
                  vendor_id: api_service,
                  phone_number: phone_number,
                  account_id: account_id,
                  phone_number_id: phone_number_id,
                  token: token
              },
              success: function (response) {
                  closeModalEdit();
                  reload();
                  Swal.fire({
                      position: 'center',
                      icon: 'success',
                      title: response.message,
                      showConfirmButton: false,
                      timer: 1500
                  });
              },
              error: function (xhr, status, error) {
                    var response = JSON.parse(xhr.responseText);
                    
                    var errorMessage = response.message;
                    var errors = response.errors;
                    
                    if (errors && errors.password) {
                        errorMessage = errors.password[0];
                    }
                    
                    Swal.fire({
                        position: 'center',
                        icon: 'error',
                        title: errorMessage,
                        showConfirmButton: false,
                        timer: 2500
                    });
            }
          });
        });
    </script>
@endpush