@extends('layouts.app')
@section('content')
    @include('client.clientPhoneList.header')  
    @include('client.clientPhoneList.filter_modal')  
    <div class="px-4">
      <button id="button-create" class="btn btn-sm btn-kreddo float-right text-white" data-toggle="modal" data-target="#businessPhonesModal">Add New</button>
      <div class="clearfix"></div>
      <div class="card" style="margin-top: 10px; border-radius: 20px; background-color: #F9F9F9">
          <div class="card-body">
              <div class="table-responsive">
                  {{ $dataTable->table() }}
              </div>
          </div>
      </div>
    </div>
@endsection
@push('scripts')
    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}

    <script>
      function reload(){
        $('#phonebyclient-table').DataTable().ajax.reload();
      }
    </script>

    <script>
      $(document).ready(function () {
          // get ID WhatsApp Business Phone
          var clientPhoneIds = @json($clientPhones->pluck('id'));
  
          // get all checkbox in modal table
          var checkboxes = $('#businessPhonesTable tbody input[type="checkbox"]');
  
          // checking the checkbox
          checkboxes.each(function () {
              var phoneId = parseInt($(this).val());
              if (clientPhoneIds.includes(phoneId)) {
                  $(this).prop('checked', true);
              }
          });
  
          // handle the changes in modal
          $('#businessPhonesModal').on('hidden.bs.modal', function () {
              // clear the value when modal closed
              clientPhoneIds = [];
              // research the selected value on checkbox
              checkboxes.each(function () {
                  if ($(this).prop('checked')) {
                      clientPhoneIds.push(parseInt($(this).val()));
                  }
              });
          });

          var successMessage = @json(session('success'));

          if (successMessage) {
              Swal.fire({
                  position: 'center',
                  icon: 'success',
                  title: successMessage,
                  showConfirmButton: false,
                  timer: 1500
              });
          }
      });
    </script>
    <script>
      function deletePhoneClient(phone_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(phone_id)
          }
        })
      }
      function deleteFunction(phone_id) {
        var client_base = {!! json_encode($client) !!};
        $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });
        $.ajax({
            method: 'DELETE',
            url: "{{ url('client') }}/"+client_base.id+'/phoneList/?phone='+phone_id,
            success: function (response) {
              Swal.fire({
                position: 'center',
                icon: 'success',
                title: response.message,
                showConfirmButton: false,
                timer: 2000
              })
              reload();
              location.reload();
            },
            error: function (xhr, status, error) {
                if (xhr.status === 422) {
                    var response = JSON.parse(xhr.responseText);
                    if (response && response.errors && response.errors.phone_number) {
                        alert(response.errors.phone_number[0]);
                    } else {
                        alert('something wrong.');
                    }
                } else {
                    alert('something wrong.');
                }
            }
        });
      }
    </script>
@endpush