@extends('dashboard.layout.layout')

@section('content')
  <div class="app-content content">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper container-xxl p-0">
      <div class="content-header row"></div>
      <div class="content-body">
        <section>
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">{{ $title }}</h4>
            </div>
            <div class="card-body">
              <div class="row mb-2">
                <div class="col-md-3 mb-1">
                  <label class="form-label">თარიღიდან</label>
                  <input type="date" id="date_from" class="form-control filter-input">
                </div>
                <div class="col-md-3 mb-1">
                  <label class="form-label">თარიღამდე</label>
                  <input type="date" id="date_to" class="form-control filter-input">
                </div>
                <div class="col-md-3 mb-1">
                  <label class="form-label">ტიპი</label>
                  <select id="log_name" class="form-select filter-input">
                    <option value="all">ყველა</option>
                    <option value="billing">ბილინგი</option>
                    <option value="financial">ფინანსური</option>
                    <option value="user">აბონენტი</option>
                    <option value="status">სტატუსი</option>
                    <option value="admin">ადმინისტრაციული</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="table-responsive p-2">
              <table class="table" id="activityLogTable">
                <thead>
                  <tr>
                    <th>თარიღი</th>
                    <th>ადმინი</th>
                    <th>ტიპი</th>
                    <th>მოქმედება</th>
                    <th>სუბიექტი</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  <script>
    $(function() {
      var table = $('#activityLogTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
          url: "{{ route('activity-log.index') }}",
          data: function(d) {
            d.date_from = $('#date_from').val();
            d.date_to = $('#date_to').val();
            d.log_name = $('#log_name').val();
          }
        },
        columns: [{
            data: 'date',
            name: 'created_at'
          },
          {
            data: 'admin',
            name: 'admin',
            orderable: false,
            searchable: false
          },
          {
            data: 'log_type',
            name: 'log_type',
            orderable: false,
            searchable: false
          },
          {
            data: 'action',
            name: 'description'
          },
          {
            data: 'target',
            name: 'target',
            orderable: false,
            searchable: true
          },
        ],
        order: [
          [0, 'desc']
        ],
        language: {
          url: '/app-assets/data/locales/ka.json'
        },
        pageLength: 25,
      });

      $('.filter-input').on('change', function() {
        table.draw();
      });
    });
  </script>
@endpush