@extends('layouts.app')
@section('content')
    @include('selfv.header')
    @include('selfv.create_modal')    
    @include('selfv.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">
            @if (auth()->user()->hasRole(1))
            <form id="" class="row align-items-center mb-3 mb-md-0">
              <div class="form-group col-12 col-md-2">
                  <select name="filter_api_service" id="filter_api_service" class="form-control" style="border-radius: 10px">
                    <option value="">API Service</option>
                    @foreach ($vendors as $vendor)
                    <option value="{{ $vendor->id }}">{{ $vendor->name }}</option>
                    @endforeach
                  </select>
              </div>
              <div class="form-group col-12 col-md-2">
                <select name="client_filter" id="client_filter" class="form-control" style="border-radius: 10px;width: auto !important">
                    <option value="">Client</option>
                    @foreach ($clients as $client)
                    <option value="{{ $client->id }}">{{ $client->name }}</option>
                    @endforeach
                </select>
              </div>
            </form>
            @endif
            <div class="table-responsive">
                {{ $dataTable->table() }}
            </div>
          </div>
      </div>
    </div>
@endsection
@push('scripts')
    @include('selfv.create_javascript')
    @include('selfv.edit_javascript')

    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}

    @if (auth()->user()->hasRole(1))
    <script>
      var filter_api_service = '';
      var client_filter = '';
      $(function(){
          $('#filter_api_service').on('click', function(){
                  let ajaxUrl = "{{ route('selfv.index') }}";
                  var filter_api_service = $('select#filter_api_service').val();
                  const payload = ajaxUrl + `?filter_api_service=${filter_api_service}&client_filter=${client_filter}` ;
                  window.LaravelDataTables['selfv-table'].ajax.url(payload).draw()
          })
      })

      $(function(){
            $('#client_filter').on('click', function(){
                    let ajaxUrl = "{{ route('selfv.index') }}";
                    var client_filter = $('select#client_filter').val();
                    const payload = ajaxUrl + `?client_filter=${client_filter}&filter_api_service=${filter_api_service}`;
                    window.LaravelDataTables['selfv-table'].ajax.url(payload).draw()
            })
      })
    </script>  
    @endif
    
     {{-- reload table --}}
    <script>
      function reload(){
        $('#selfv-table').DataTable().ajax.reload();
      }
    </script>

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


          var phoneSelect = document.getElementById("whatsapp_business_phone_id");
          var apiServiceInput = document.getElementById("apiService");
      
          phoneSelect.addEventListener("change", function () {
              var selectedOption = phoneSelect.options[phoneSelect.selectedIndex];
              var industryValue = selectedOption.getAttribute("data-apiService");
      
              apiServiceInput.value = industryValue;
          });


          //for edit
          var editClientSelect = document.getElementById("edit_client_id");
          var editIndustryInput = document.getElementById("edit_industry");
      
          editClientSelect.addEventListener("change", function () {
              // get industry value
              var selectedOption = editClientSelect.options[editClientSelect.selectedIndex];
              var industryValue = selectedOption.getAttribute("data-industry");
      
              // set industry value
              editIndustryInput.value = industryValue;
          });


          var editPhoneSelect = document.getElementById("edit_whatsapp_business_phone_id");
          var editApiServiceInput = document.getElementById("edit_apiService");
      
          editPhoneSelect.addEventListener("change", function () {
              var selectedOption = editPhoneSelect.options[editPhoneSelect.selectedIndex];
              var industryValue = selectedOption.getAttribute("data-apiService");
      
              editApiServiceInput.value = industryValue;
          });
      });
    </script>

    <script>
      function deleteSelfv(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('selfv') }}/"+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>
@endpush