@extends('layouts.admin')

@section('title','Admin Pages Management')

@section('content')
<div class="row">
  <x-content-header title="page"/>

  <div class="col-12">
      <x-card>
          
          <div class="row mb-2">
              <div class="col-sm-4">
                  <div class="search-box mr-2 mb-2 d-inline-block">
                      <div class="position-relative">
                          <input type="text" class="form-control" placeholder="Search...">
                          <i class="bx bx-search-alt search-icon"></i>
                      </div>
                  </div>
              </div>
              <div class="col-sm-8">
                  <div class="text-sm-right">
                      <a href="{{route('admin.pages.create')}}" class="btn btn-success btn-rounded waves-effect waves-light mb-2 mr-2">
                          <i class="mdi mdi-plus mr-1"></i> Add New
                      </a>
                  </div>
              </div>
          </div>

          <x-table>
              <thead class="thead-light">
                  <tr>
                      <th>ID</th>
                      <th>Name</th>
                      <th>Slug</th>
                      <th>Created At</th>
                      <th>Action</th>
                  </tr>
              </thead>
              <tbody>
                  @forelse ($pages as $key => $page)    
                  <tr>
                      <td>{{ ++$key }}</td>
                      <td>{{ $page->name }}</td>
                      <td>{{ $page->slug }}</td>
                      <td>
                          @isset($page->created_at)
                          {{ date_format($page->created_at,'d-M-Y H:i a') }}
                          @endisset
                      </td>
                      <td>
                          <a href="{{ route('admin.pages.edit',$page->id) }}" class="mr-3 text-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Edit">
                              <i class="mdi mdi-pencil font-size-18"></i>
                          </a>
                          <a href="#" class="text-danger" 
                              x-data
                              @click=" 
                              Swal.fire({
                                title: 'Are you sure?',
                                text: 'You won\'t be able to revert this!',
                                icon: 'warning',
                                confirmButtonText: 'Yes, delete it!',
                                showCancelButton: !0,
                                cancelButtonText: 'No, cancel!',
                                confirmButtonClass: 'btn btn-success mt-2',
                                cancelButtonClass: 'btn btn-danger ml-2 mt-2',
                                buttonsStyling: !1,
                              }).then((result) => {
                                if (result.value) {
                                  document.getElementById('frmDelete-{{ $page->id }}').submit();
                                }
                              })
                              "
                              data-toggle="tooltip" 
                              data-placement="top" 
                              title="" 
                              data-original-title="Delete"                  
                            >
                              <i class="mdi mdi-close font-size-18"></i>
                          </a>
                          <form id="frmDelete-{{ $page->id }}" action="{{ route('admin.pages.destroy',$page->id) }}" method="POST" class="d-none">
                            @csrf
                            @method('DELETE')
                        </form>
                      </td>
                  </tr>
                  @empty
                      <tr>
                          <td colspan="6" class="py-2"><span class="badge badge-pill badge-soft-danger font-size-12">No Data</span></td>
                      </tr>
                  @endforelse

              </tbody>
          </x-table>
        </x-card>
  </div>
</div>
@endsection