@extends('layouts.app')
@push('styles')
  <style>
    .button-add-custom{
      background-color: white; color: rgb(59, 147, 254); border-style: none;
    }
  </style>
  <style>
    .chat-container {
        width: 100%;
        height: 200px;
        overflow-y: auto;
        border: 1px solid #ddd;
        padding: 10px;
        background-color: #f5f5f5;
    }

    .chat-bubble {
        background-color: #25d366;
        color: #fff;
        border-radius: 10px;
        padding: 10px;
        margin: 5px;
        clear: both;
        float: right;
        max-width: 70%;
    }

    .chat-bubble.received {
        background-color: #e1e1e1;
        color: #333;
        float: left;
    }
  </style>
@endpush
@section('content')
    @include('selfv.selfvTemplate.header')  
    @include('selfv.selfvTemplate.create_modal')  
    @include('selfv.selfvTemplate.edit_modal')  
    @include('selfv.selfvTemplate.review_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">
              @if (auth()->user()->hasRole(1))
              <div class="form-group col-12 col-md-2">
                <select name="filter_client_name" id="filter_client_name" class="form-control" style="border-radius: 10px">
                    <option value="">Client Name</option>
                    @foreach ($clients as $client)
                    <option value="{{ $client->id }}">{{ $client->name }}</option>
                    @endforeach
                </select>
              </div>
              @endif
              <div class="form-group col-12 col-md-2">
                  <select name="filter_status" id="filter_status" class="form-control" style="border-radius: 10px">
                      <option value="">Status</option>
                      <option value="0">Pending</option>
                      <option value="1">Approved</option>
                      <option value="2">Rejected</option>
                      <option value="3">Reassess</option>
                  </select>
              </div>
            </form>
            <div class="table-responsive">
                {{ $dataTable->table() }}
            </div>
          </div>
      </div>
    </div>
@endsection
@push('scripts')
    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}
    <script>
        var filter_client_name = '';
        var filter_status = '';
        $(function(){
            $('#filter_client_name').on('change', function(){
                    let ajaxUrl = "{{ route('selfvTemplate.index') }}";
                    var filter_client_name = $('select#filter_client_name').val();
                    const payload = ajaxUrl + `?filter_client_name=${filter_client_name}&?filter_status=${filter_status}` ;
                    window.LaravelDataTables['selfvtemplate-table'].ajax.url(payload).draw()
            })
        })
    
        $(function(){
            $('#filter_status').on('change', function(){
                    let ajaxUrl = "{{ route('selfvTemplate.index') }}";
                    var filter_status = $('select#filter_status').val();
                    const payload = ajaxUrl + `?filter_status=${filter_status}&?filter_client_name=${filter_client_name}`;
                    window.LaravelDataTables['selfvtemplate-table'].ajax.url(payload).draw()
            })
        })
    </script>  
    {{-- reload table --}}
    <script>
      function reload(){
        $('#selfvtemplate-table').DataTable().ajax.reload();
      }
    </script>

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

    <script>
       //experimen
       function convertToWhatsAppLink(template, phoneNumber, vcode) {
        phoneNumber = phoneNumber || '[#phone]';

        if (vcode != null) {
          template = template.replace('[#vCode]', vcode);
        }
        // Encode the template text
        template = encodeURIComponent(template);

        // Change newline ("\n") to "%0A"
        template = template.replace(/%0A/g, '%0A');

        // Change karakter space to "%20"
        template = template.replace(/%20/g, '%20');
        
        // Create the WhatsApp link
        var whatsappLink = "https://api.whatsapp.com/send?phone=" + phoneNumber + "&text=" + template;
        
        return whatsappLink;
      }
    </script>

    <script>
      function addTextModalCreate(text) {
          var textarea = document.getElementById('content');
          var start = textarea.selectionStart;
          var end = textarea.selectionEnd;
          var currentContent = textarea.value;

          var updatedContent = currentContent.substring(0, start) + text + currentContent.substring(end);
          textarea.value = updatedContent;

          // get cursor position
          var cursorPosition = start + text.length;

          // make cursor position stay
          textarea.setSelectionRange(cursorPosition, cursorPosition);

          // cursor back to textarea
          textarea.focus();
      }

      function addTextModalEdit(text) {
          var textarea = document.getElementById('edit_content');
          var start = textarea.selectionStart;
          var end = textarea.selectionEnd;
          var currentContent = textarea.value;

          var updatedContent = currentContent.substring(0, start) + text + currentContent.substring(end);
          textarea.value = updatedContent;

          // get cursor position
          var cursorPosition = start + text.length;

          // make cursor position stay
          textarea.setSelectionRange(cursorPosition, cursorPosition);

          // cursor back to textarea
          textarea.focus();
      }
    </script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
          var clientSelect = document.getElementById("client_id");
          var industryInput = document.getElementById("industry");
      
          clientSelect.addEventListener("change", function () {
              // get industry value
              var selectedOption = clientSelect.options[clientSelect.selectedIndex];
              var industryValue = selectedOption.getAttribute("data-industry");
      
              // set industry value
              industryInput.value = industryValue;
          });
      });
    </script>

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

          var name = $('#name').val();
          var client_id = $('#client_id').val();
          var vcode = $('#vcode').val();
          var content = $('#content').val();

          $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });
          $.ajax({
              method: 'POST',
              url: '{{ route('selfvTemplate.store') }}',
              data: {
                  name: name,
                  client_id: client_id,
                  vcode: vcode,
                  content: content,
                  link: convertToWhatsAppLink(content, null, vcode),
                  status: 0
              },
              success: function (response) {
                console.log(response);
                Swal.fire({
                  position: 'center',
                  icon: 'success',
                  title: response.message,
                  showConfirmButton: false,
                  timer: 2000
                })
                closeModalCreate();
                reload();
                $('#name').val('');
                $('#client_id').val('');
                $('#industry').val('');
                $('#vcode').val('');
                $('#content').val('');
              },
              error: function (xhr, status, error) {
                console.log(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',
                    text: errorMessage,
                    showConfirmButton: false,
                    timer: 2500
                });
              }
          });
      });
    </script>

    <script>
      function deleteSelfvTemplate(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('selfvTemplate') }}/"+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',
                        text: errorMessage,
                        showConfirmButton: false,
                        timer: 2500
                    });
            }
        });
      }
    </script>

    <script>
      function editSelfvTemplate(id) {
        $.ajax({
            method: 'GET',
            url: "{{ url('selfvTemplate') }}/" + id + '/edit',
            success: function (response) {
                // handle the edit form with the data
                $('#edit_id').val(response.id);
                $('#edit_name').val(response.name);
                $('#edit_client_id').val(response.client_id);
                $('#edit_vcode').val(response.vcode);
                $('#edit_content').val(response.content);
    
                // add the industry field
                var selectedOption = $('#edit_client_id option:selected');
                var industryValue = selectedOption.attr("data-industry");
                $('#edit_industry').val(industryValue);
    
                // 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',
                        text: 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 client_id = $('#edit_client_id').val();
          var vcode = $('#edit_vcode').val();
          var content = $('#edit_content').val();

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

          $.ajax({
              method: 'PUT',
              url: "{{ url('selfvTemplate') }}/"+id,
              data: {
                name: name,
                client_id: client_id,
                vcode: vcode,
                content: content,
                link: convertToWhatsAppLink(content, null, vcode),
                status: 0
              },
              success: function (response) {
                  closeModalEdit();
                  reload();
                  Swal.fire({
                      position: 'center',
                      icon: 'success',
                      text: 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>
      function replaceKeywords(content, vcode) {
          // Replace [#enter] with <br> for line breaks
          content = content.replace(/\n/g, "<br>");
          
          // Replace [#vCode] with "1234"
          content = content.replace(/\[#vCode\]/g, vcode);
          
          // Replace any remaining [#enter] or [#vCode] with no spaces around them
          content = content.replace(/\s*\[#enter\]\s*/g, "<br>");
          content = content.replace(/\s*\[#vCode\]\s*/g, "1234");
          
          // Replace spaces after <br> with non-breaking spaces
          content = content.replace(/<br>(\s+)/g, function(match, spaces) {
              return "<br>" + "&nbsp;".repeat(spaces.length);
          });

          return content;
      }

      var template_status = '';
      var template_id = '';

      function reviewSelfvTemplate(id) {
        $.ajax({
            method: 'GET',
            url: "{{ url('selfvTemplate') }}/" + id + '/edit',
            success: function (response) {
              var phoneNumber = "628885928788";

                //experimen
                var whatsappLink = convertToWhatsAppLink(response.content, phoneNumber, response.vcode);
                console.log(whatsappLink);


                // handle the edit form with the data
                $('#review_id').val(response.id);
                $('#review_name').val(response.name);
                $('#review_client_id').val(response.client_id);
                $('#review_vcode').val(response.vcode);
                $('#review_content').html(replaceKeywords(response.content, response.vcode));

                template_id = response.id;
                template_status = response.status;
                buttonShow(template_status, template_id) 
                // add the industry field
                var selectedOption = $('#review_client_id option:selected');
                var industryValue = selectedOption.attr("data-industry");
                $('#review_industry').val(industryValue);

                // show the modal
                $('#reviewModal').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
                    });
            }
        });
      }

      //list button on review modal
      function buttonShow(template_status, template_id) {
        var role = {!! json_encode($roleId) !!}
        if (role == 1) {
          if (template_status === 0) {
              document.getElementById('reassessButton').style.display = 'none';
              document.getElementById('approveButton').style.display = 'inline-block';
              document.getElementById('rejectButton').style.display = 'inline-block';
              document.getElementById('rejectButton').setAttribute('onclick', 'reject(' + template_id + ')');
              document.getElementById('approveButton').setAttribute('onclick', 'approve(' + template_id + ')');
          } else if(template_status === 3){
              document.getElementById('reassessButton').style.display = 'none';
              document.getElementById('approveButton').style.display = 'inline-block';
              document.getElementById('rejectButton').style.display = 'inline-block';
              document.getElementById('rejectButton').setAttribute('onclick', 'reject(' + template_id + ')');
              document.getElementById('approveButton').setAttribute('onclick', 'approve(' + template_id + ')');
          } else if(template_status === 2){
              document.getElementById('reassessButton').style.display = 'none';
              document.getElementById('approveButton').style.display = 'none';
              document.getElementById('rejectButton').style.display = 'none';
          } else {
              document.getElementById('reassessButton').style.display = 'inline-block';
              document.getElementById('approveButton').style.display = 'none';
              document.getElementById('rejectButton').style.display = 'none';
              document.getElementById('reassessButton').setAttribute('onclick', 'reassess(' + template_id + ')');
          }
        }else{
              document.getElementById('reassessButton').style.display = 'none';
              document.getElementById('approveButton').style.display = 'none';
              document.getElementById('rejectButton').style.display = 'none';
        }
      }
    </script>  

    <script>
      function reject(id) {
        Swal.fire({
          title: 'Are you sure?',
          text: "want to reject this template?",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Yes'
        }).then((result) => {
          if (result.isConfirmed) {
            changeStatusTemplate(id,2);
          }
        })
      }

      function approve(id) {
        Swal.fire({
          title: 'Are you sure?',
          text: "want to approve this template?",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Yes'
        }).then((result) => {
          if (result.isConfirmed) {
            changeStatusTemplate(id,1);
          }
        })
      }

      function reassess(id) {
        Swal.fire({
          title: 'Are you sure?',
          text: "want to reassess this template?",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Yes'
        }).then((result) => {
          if (result.isConfirmed) {
            changeStatusTemplate(id,3);
          }
        })
      }
    </script>

    <script>
      function changeStatusTemplate(id, status) {
        $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });

          $.ajax({
              method: 'PUT',
              url: "{{ url('selfvTemplate') }}/" + id + '/changeStatus',
              data: {
                status: status,
              },
              success: function (response) {
                  $('#reviewModal').modal('hide');
                  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