@extends('layouts.mainframe')

{{-- styles --}}
@section('page-styles')
  <link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
  <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
  <livewire:styles />

  <style>
    .dataTable-input {
      outline: none;
      background-color: #edf2f7;
    }
    .dataTable-selector {
      outline: none;
    }
    .dataTable-top, .dataTable-bottom {
      padding: 8px 1rem;
    }
    .dataTable-info {
      margin: 7px 1rem;
    }
  </style>
@endsection

{{-- title --}}
@section('title', 'Query Executor')

{{-- contents --}}
@section('content')
  <div class="content">
    @if(session('status_class') && session('status_message'))
      <div class='banner-notification-{{ session('status_class') }} slide-out-top font-semibold tracking-wide'>
        {{ session('status_message') }}
      </div>
    @endif
    <div class="container-xl">
      <form id="form1" action="{{ route('query_executor.store') }}" class="px-3" method="POST">
        @csrf
        <div class="card rounded-xl shadow-lg">
          <div class="border-b border-gray-300">
            <div class="flex items-center h-16">
              <div class="text-lg font-bold tracking-normal leading-none px-4">
                QUERY EXECUTOR
              </div>
            </div>
          </div>
          <div class="flex flex-col md:flex-row">
            <div class="w-full border-r border-gray-300 md:border-transparent">
              <div class="px-4 pt-4 pb-0 md:pb-0">
                <div class="pb-4">
                  <livewire:textarea-elem
                    :label="'QUERY'" :rows="5"
                    :post="'qry'" :value="$qry ?? ''"/>
                </div>
              </div>
            </div>
          </div>
          <div class="px-4 py-4 -mt-4">
            <button id="submit" name="submit" type="submit" class="py-2 px-5 bg-space-gray hover:bg-gray-700 text-gray-300 rounded-lg text-center tracking-wide font-semibold">
              GENERATE
            </button>
          </div>
        </div>
        <div class="card rounded-xl shadow-lg">
          <table id="table" class="table card-table table-vcenter">
            @isset($column_names)
              <thead>
                <tr>
                  @foreach($column_names as $column_name)
                      <td class="font-semibold text-gray-600 tracking-wider">{{ strtoupper($column_name) }}</td>
                  @endforeach
                </tr>
              </thead>
            @endisset
            @isset($results)
                <tbody>
                  @foreach($results as $result)
                    <tr>
                      @foreach($column_names as $column_name)
                        <td class="font-semibold">{{ $result->{$column_name} }}</td>
                      @endforeach
                    </tr>
                  @endforeach
                </tbody>
            @endisset
          </table>
        </div>
      </form>
    </div>
  </div>
@endsection

{{-- scripts --}}
@section('page-scripts')
  <livewire:scripts />
  <script>
    window.onload = function () {
      const dataTable = new simpleDatatables.DataTable("#table", {
        sortable: false,
        labels: {
          placeholder: "Carian...",
          // perPage: "{select} entries per page",
          noRows: "Tiada rekod",
          info: "Paparan {start} hingga {end} daripada {rows} rekod",
        }
      });

      document.querySelector('table').parentNode.classList.add('table-responsive');
    };
  </script>
@endsection