@extends('backend.layouts.app')

@section('content')

<div class="p-3">
  <div class="card">
      <div class="card-header fw-bold">
        <span class="fw-bold font-weight-bold">Banners</span>&emsp;
        <a href="{{ url('admin/banners/create') }}" class="text-decoration-none">
          <button type="button" class="btn btn-success">
            <i class="fas fa-edit nav-icon"></i>
            Add Banner
          </button>
        </a>
      </div>
      <div class="card-body">
          <table class="table table-striped" style="width:100%">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Banner</th>
                  <th>Active Status</th>
                  <th>Action</th>
                </tr>
              </thead>
              
              <tbody>
                @foreach ($banners as $items)
                <tr>
                    <td>{{ $items->id }}</td>
                    <td>
                      <img src="{{ asset('banners/' . $items->banner) }}" height="50" alt="">
                    </td>
                    <td>{{ $items->active }}</td>
                    <td>
                      <div>
                        @if ($items->active != 'Yes')
                        <form action="{{ url('admin/banners/' . $items->id ) }}" method="POST"> @csrf @method('PUT')
                          <input type="hidden" name="active" value="Yes">
                          <button class="btn btn-primary btn-block mb-1">Make Active</button>
                        </form>
                        @endif
                        <form action="{{ url('admin/banners/' . $items->id ) }}" method="POST"> @csrf @method('delete')
                          <button class="btn btn-danger btn-block" type="submit">Delete</button>
                        </form>
                      </div>
                    </td>
                </tr>
              @endforeach
              </tbody>
            </table>
      </div>
  </div>
</div>

@endsection

@section('js')
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
@yield('js')
<script>
    $(document).ready(function() {
        $('.table').DataTable({
            order: [[0, 'asc']]
        });
    });
</script>
@endsection