@extends('layouts.app')
@section('content')
    @include('selfv.selfvMonitoring.header')  
    <div class="px-4">
      <div class="clearfix"></div>
      <div class="card" style="margin-top: 10px; border-radius: 20px; background-color: #F9F9F9">
          <div class="card-body">
            <button onclick="reload()" class="btn btn-sm btn-kreddo float-right text-white" style="margin-top: 8px"><i class="nav-icon fas fa-sync"></i> Reload Table</button>
            <form id="" class="row align-items-center mb-3 mb-md-0">
              @if (auth()->user()->hasRole(1))
              <div class="form-group col-6 col-sm-2">
                <select name="client_filter" id="client_filter" class="form-control" style="border-radius: 10px;">
                    <option value="">Client</option>
                    @foreach ($clients as $client)
                    <option value="{{ $client->id }}">{{ $client->name }}</option>
                    @endforeach
                </select>
              </div>
              @endif
              <div class="form-group col-6 col-sm-2">
                <select name="filter_validate" id="filter_validate" class="form-control" style="border-radius: 10px">
                  <option value="">Validate</option>
                  <option value="0">No</option>
                  <option value="1">Yes</option>
                </select>
              </div>
              @if (auth()->user()->hasRole(1))
              <div class="form-group col-6 col-sm-2">
                <select name="whatsapp_filter" id="whatsapp_filter" class="form-control" style="border-radius: 10px;">
                    <option value="">Business Phone</option>
                    @foreach ($whatsapps as $whatsapp)
                    <option value="{{ $whatsapp->id }}">{{ $whatsapp->phone_name }}-{{ $whatsapp->phone_number }}</option>
                    @endforeach
                </select>
              </div>
              @endif
              <div class="form-group col-6 col-sm-2">
                <select name="filter_selfv" id="filter_selfv" class="form-control" style="border-radius: 10px">
                  <option value="">Selfv Name</option>
                    @foreach ($selfvs as $selfv)
                    <option value="{{ $selfv->id }}">{{ $selfv->name }}</option>
                    @endforeach
                </select>
              </div>
            </form>
            <div class="table-responsive">
                {{ $dataTable->table() }}
            </div>
          </div>
      </div>
    </div>
@endsection
@push('scripts')
    {{ $dataTable->scripts(attributes: ['type' => 'module']) }}
      {{-- reload table --}}
      <script>
        function reload(){
          $('#selfvapimonitoring-table').DataTable().ajax.reload();
        }
      </script>
      <script>
        var filter_validate = '';
        var client_filter = '';
        var whatsapp_filter = '';
        var filter_selfv = '';
        $(function(){
            $('#filter_validate').on('click', function(){
                    let ajaxUrl = "{{ route('selfvMonitoring.index') }}";
                    var filter_validate = $('select#filter_validate').val();
                    const payload = ajaxUrl + `?filter_validate=${filter_validate}&client_filter=${client_filter}&whatsapp_filter=${whatsapp_filter}&filter_selfv=${filter_selfv}` ;
                    window.LaravelDataTables['selfvapimonitoring-table'].ajax.url(payload).draw()
            })
        })
  
        $(function(){
            $('#client_filter').on('click', function(){
                    let ajaxUrl = "{{ route('selfvMonitoring.index') }}";
                    var client_filter = $('select#client_filter').val();
                    const payload = ajaxUrl + `?client_filter=${client_filter}&filter_validate=${filter_validate}&whatsapp_filter=${whatsapp_filter}&filter_selfv=${filter_selfv}`;
                    window.LaravelDataTables['selfvapimonitoring-table'].ajax.url(payload).draw()
            })
        })

        $(function(){
            $('#whatsapp_filter').on('click', function(){
                    let ajaxUrl = "{{ route('selfvMonitoring.index') }}";
                    var whatsapp_filter = $('select#whatsapp_filter').val();
                    const payload = ajaxUrl + `?whatsapp_filter=${whatsapp_filter}&filter_validate=${filter_validate}&client_filter=${client_filter}&filter_selfv=${filter_selfv}` ;
                    window.LaravelDataTables['selfvapimonitoring-table'].ajax.url(payload).draw()
            })
        })

        $(function(){
            $('#filter_selfv').on('click', function(){
                    let ajaxUrl = "{{ route('selfvMonitoring.index') }}";
                    var filter_selfv = $('select#filter_selfv').val();
                    const payload = ajaxUrl + `?filter_selfv=${filter_selfv}&whatsapp_filter=${whatsapp_filter}&filter_validate=${filter_validate}&client_filter=${client_filter}` ;
                    window.LaravelDataTables['selfvapimonitoring-table'].ajax.url(payload).draw()
            })
        })
      </script>  
@endpush