@extends('admin.layouts.app')
@section('content')
          <div class="page-inner">
            <div class="page-header">
              <h3 class="fw-bold mb-3">Products</h3>
              <ul class="breadcrumbs mb-3">
                <li class="nav-home">
                  <a href="#">
                    <i class="icon-home"></i>
                  </a>
                </li>
                <li class="separator">
                  <i class="icon-arrow-right"></i>
                </li>
                <li class="nav-item">
                  <a href="#">Products</a>
                </li>                
              </ul>
            </div>
            <div class="row">   

              <div class="col-md-12">
                @if(session('success'))
                  <div class="alert alert-success">{{session('success')}}</div>
                @endif
                <div class="card">
                  <div class="card-header">
                    <div class="d-flex align-items-center">
                      <h4 class="card-title">Products</h4>
                      <a href="{{route('admin.products.create')}}"
                        class="btn btn-primary btn-round ms-auto">
                        <i class="fa fa-plus"></i>
                        Add Product
                      </a>
                    </div>
                  </div>
                  <div class="card-body">                   

                    <div class="table-responsive">
                      <table
                        id="add-row"
                        class="display table table-striped table-hover"
                      >
                        <thead>
                          <tr>
                            <th>Name</th>
                            <th>Series</th>
                            <th>Standard</th>
                            <th>Subject</th>
                            <th>Price</th>
                            <th>Status</th>
                            <th style="width: 10%">Action</th>
                          </tr>
                        </thead>
                        <tfoot>                          
                          <tr>
                            <th>Name</th>
                            <th>Series</th>
                            <th>Standard</th>
                            <th>Subject</th>
                            <th>Price</th>
                            <th>Status</th>
                            <th>Action</th>
                          </tr>
                        </tfoot>
                        <tbody>
                          @foreach($products as $product)
                          <tr>
                            <td>{{$product->name}}</td>
                            <th>{{$product->series->series_name}}</th>
                            <th>{{$product->standard->class_name}}</th>
                            <th>{{$product->subject->subject}}</th>
                            <th>{{$product->price}}</th>
                            <th>{{$product->status}}</th>
                            <td>
                              <div class="form-button-action">
                                <a
                                  href="{{route('admin.products.edit', $product->id)}}"
                                  data-bs-toggle="tooltip"
                                  title=""
                                  class="btn btn-link btn-primary btn-lg"
                                  data-original-title="Edit Task"
                                >
                                  <i class="fa fa-edit"></i>
                                </a>
                                <form class="d-inline" method="POST" action="{{ route('admin.products.destroy', $product->id) }}" onsubmit="return confirm('Delete this Product?')">
                                    @csrf @method('DELETE')
                                    <button class="btn btn-link btn-danger"><i class="fa fa-times"></i></button>
                                </form>
                                
                              </div>
                            </td>
                          </tr>
                          @endforeach
                        
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <script src="{{asset('assets/admin/js/core/jquery-3.7.1.min.js')}}"></script>
          <script src="{{asset('assets/admin/js/plugin/datatables/datatables.min.js')}}"></script>
          <script>
            $(document).ready(function () {

                // Add Row
                $("#add-row").DataTable({
                pageLength: 5,
                });
            });
            </script>
          @endsection