@extends('layouts.app')
@section('content')
    @include('client.header')
    @include('client.create_modal')    
    @include('client.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="filter_industry" id="filter_industry" class="form-control" style="border-radius: 10px">
                  <option value="">Industry</option>
                  @foreach ($industries as $key => $industry)
                  <option value="{{ $key }}">{{ $industry }}</option>
                  @endforeach
                </select>
            </div>
            <div class="form-group col-12 col-md-2">
                <select name="filter_field" id="filter_field" class="form-control" style="border-radius: 10px">
                  <option value="">Field</option>
                  @foreach ($fields as $key => $field)
                  <option value="{{ $key }}">{{ $field }}</option>
                  @endforeach
                </select>
            </div>
          </form>
          <div class="table-responsive">
              {{ $dataTable->table() }}
          </div>
        </div>
      </div>
    </div>
@endsection
@push('scripts')
    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}
    <script>
        var filter_industry = '';
        var filter_field = '';
        $(function(){
            $('#filter_industry').on('change', function(){
                    let ajaxUrl = "{{ route('client.index') }}";
                    var filter_industry = $('select#filter_industry').val();
                    const payload = ajaxUrl + `?filter_industry=${filter_industry}&?filter_field=${filter_field}` ;
                    window.LaravelDataTables['client-table'].ajax.url(payload).draw()
            })
        })
    
        $(function(){
            $('#filter_field').on('change', function(){
                    let ajaxUrl = "{{ route('client.index') }}";
                    var filter_field = $('select#filter_field').val();
                    const payload = ajaxUrl + `?filter_field=${filter_field}&?filter_industry=${filter_industry}`;
                    window.LaravelDataTables['client-table'].ajax.url(payload).draw()
            })
        })
    </script>  
    <script>
      // Fungsi untuk menghasilkan UUID
      function generateUUID() {
          var dt = new Date().getTime();
          var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
              var r = (dt + Math.random() * 16) % 16 | 0;
              dt = Math.floor(dt / 16);
              return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
          });
          return uuid;
      }

      // Menggunakan jQuery untuk menangani klik tombol "button-create"
      $('#button-create').click(function() {
          // Menghasilkan UUID
          var accessKey = generateUUID();
          var secretKey = generateUUID();

          // Mengisi input dengan UUID yang dihasilkan
          $('#access_key').val(accessKey);
          $('#secret_key').val(secretKey);
      });
    </script>

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


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


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

          var name = $('#name').val();
          var website = $('#website').val();
          var industry = $('#industry').val();
          var field = $('#field').val();
          var address = $('#address').val();
          var pic_name = $('#pic_name').val();
          var pic_number = $('#pic_number').val();
          var pic_email = $('#pic_email').val();
          var access_key = $('#access_key').val();
          var secret_key = $('#secret_key').val();
          var callback_url = $('#callback_url').val();

          $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });
          $.ajax({
              method: 'POST',
              url: '{{ route('client.store') }}',
              data: {
                  name: name,
                  website: website,
                  industry: industry,
                  field: field,
                  address: address,
                  pic_name: pic_name,
                  pic_number: pic_number,
                  pic_email: pic_email,
                  access_key: access_key,
                  secret_key: secret_key,
                  callback_url: callback_url
              },
              success: function (response) {
                console.log(response);
                Swal.fire({
                  position: 'center',
                  icon: 'success',
                  title: response.message,
                  showConfirmButton: false,
                  timer: 2000
                })
                closeModalCreate();
                reload();
                $('#name').val('');
                $('#website').val('');
                $('#industry').val('');
                $('#field').val('');
                $('#address').val('');
                $('#pic_name').val('');
                $('#pic_number').val('');
                $('#pic_email').val('');
                $('#access_key').val('');
                $('#secret_key').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>


    <script>
      function deleteClient(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('client') }}/"+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>

    <script>
      function editClient(id){
        $.ajax({
          method: 'GET',
          url: "{{ url('client') }}/"+id+'/edit',
          success: function (response) {
              // handle the edit form with the data
              $('#edit_id').val(response.id);
              $('#edit_name').val(response.name);
              $('#edit_website').val(response.website);
              $('#edit_industry').val(response.industry);
              $('#edit_field').val(response.field);
              $('#edit_address').val(response.address);
              $('#edit_pic_name').val(response.pic_name);
              $('#edit_pic_number').val(response.pic_number);
              $('#edit_pic_email').val(response.pic_email);
              $('#edit_access_key').val(response.access_key);
              $('#edit_secret_key').val(response.secret_key);
              $('#edit_callback_url').val(response.callback_url);

              // 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>

    <script>
      $('#edit').on('submit', function (e) {
          e.preventDefault();
          var id = $('#edit_id').val();
          var name = $('#edit_name').val();
          var website = $('#edit_website').val();
          var industry = $('#edit_industry').val();
          var field = $('#edit_field').val();
          var address = $('#edit_address').val();
          var pic_name = $('#edit_pic_name').val();
          var pic_number = $('#edit_pic_number').val();
          var pic_email = $('#edit_pic_email').val();
          var access_key = $('#edit_access_key').val();
          var secret_key = $('#edit_secret_key').val();
          var callback_url = $('#edit_callback_url').val();

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

          $.ajax({
              method: 'PUT',
              url: "{{ url('client') }}/"+id,
              data: {
                  id: id,
                  name: name,
                  website: website,
                  industry: industry,
                  field: field,
                  address: address,
                  pic_name: pic_name,
                  pic_number: pic_number,
                  pic_email: pic_email,
                  access_key: access_key,
                  secret_key: secret_key,
                  callback_url: callback_url
              },
              success: function (response) {
                console.log(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>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script>
    var clipboardAccessKey = new ClipboardJS('#copy_access_key');
    var clipboardSecretKey = new ClipboardJS('#copy_secret_key');

    // clipboardAccessKey.on('success', function(e) {
    //     alert("Access Key copied");
    // });

    // clipboardSecretKey.on('success', function(e) {
    //     alert("Secret Key copied");
    // });

    clipboardAccessKey.on('error', function(e) {
        alert("Failed to copy Access Key. Please select and copy manually.");
    });

    clipboardSecretKey.on('error', function(e) {
        alert("Failed to copy Secret Key. Please select and copy manually.");
    });
</script>

    
@endpush