@extends('layouts.admin')

@section('content')
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <div class="d-md-flex align-items-center">
              <div>
                <h4 class="card-title">Slider</h4>
              </div>
            </div>
            <div class="table-responsive mt-4">
              <div class="row">
                <div class="col-md-7">
                    {{-- <a href="{{ route('admin.carousel.create') }}">
                        <button type="submit" style="height: 40px; !important;" class="btn btn-sm btn-primary rounded-2">Tambah</button>
                    </a> --}}
                </div>
                <div class="col-md-5 d-flex justify-content-end">
                    <form action="{{ route('admin.carousel') }}" method="GET" style="display: flex">
                        <input type="text" style="height: 40px" placeholder="Cari Judul" name="q_name" class="form-control" value="{{ $q_name }}" id="name">
                        <button type="submit" style="height: 40px; width: 50px !important; margin-left: 20px" class="btn btn-sm btn-secondary rounded-2">Cari</button>
                    </form>
                </div>
              </div>
              <table class="table mb-0 text-nowrap varient-table align-middle fs-3">
                <thead>
                  <tr>
                    <th scope="col" class="px-0 text-muted">Judul</th>
                    <th scope="col" class="px-0 text-muted">Sub Judul</th>
                    <th scope="col" class="px-0 text-muted">Gambar</th>
                    <th scope="col" class="px-0 text-muted" class="px-0 text-muted">
                      Aksi
                    </th>
                  </tr>
                </thead>
                <tbody>
                    @if (!empty($q_name))
                        @if (count($carousel) == 0)
                            <tr style="text-align: center">
                                <td colspan="2">Data Belum Ada</td>
                            </tr>
                        @endif
                    @endif
                    @foreach ($carousel as $item)
                        <tr>
                            <td class="px-0">{{ $item->title }}</td>
                            <td class="px-0">{{ $item->subtitle }}</td>
                            <td class="px-0"><img src="{{ asset('img_assets/carousel/'. $item->image) }}" style="width: 100px; height: 100px; object-fit: contain"></td>
                            <td>
                                <a href="{{ route('admin.carousel.edit', $item->id) }}" style="text-decoration: none"> 
                                    <button class="btn btn-warning btn-sm text-white mb-0 me-0" type="button"><i class="mdi mdi-pencil"></i>Edit</button>
                                </a>
                                <form action="{{ route('admin.carousel.delete') }}" style="display: inline-block" method="POST">
                                    @csrf @method('DELETE')
                                    <input type="hidden" value="{{ $item->id }}" name="id">
                                    <button class="btn btn-danger btn-sm text-white mb-0 me-0" type="submit"><i class="mdi mdi-delete"></i>Hapus</button>
                                </form>
                            </td>
                        </tr>
                     
                    @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
@endsection