@extends('layouts.admin_main')

@section('content')
    <div class="content-wrapper">
      <div class="card">
        <div class="row">
          <div class="col-sm-6">
            <h4 class="pl-3 pt-3 pb-2">Portfolio</h4>
          </div>
        </div>
      </div>
      <section class="content">
        <div class="container-fluid">
          @if(session('status'))
            <h5 class="alert alert-success text-center">{{ session('status') }}</h5>
          @endif
          <div class="row">
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Portfolio</h3>
                  <a href="{{ route('portfolio.add') }}" class="float-right btn btn-secondary btn-sm pr-3 pl-3 mr-2">
                    <i class="fas fa-plus"></i> Add Portfolio Item
                  </a>

                  <a href="{{ route('portfolio.section.edit') }}" class="float-right btn btn-primary btn-sm pr-3 pl-3 mr-2">
                    <i class="fas fa-minus"></i> Edit Portfolio title
                  </a>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table id="portfolio-table" class="table table-bordered table-hover dataTable dtr-inline">
                      <thead>
                        <tr>
                          <th>Title</th>
                          <th>Category</th>
                          <th>Description</th>
                          <th>Image</th>
                          <th>Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        <!-- Data will be populated via DataTables -->
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

<script>
  $(document).ready(function(){
    $('#portfolio-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{!! route('portfolio.all') !!}",
        columns: [
            {data: 'title', name: 'title'},
            {data: 'category', name: 'category'},
            {data: 'description', name: 'description'},
            {
                data: 'image',
                name: 'image',
                render: function(data) {
                    return '<img src="/storage/' + data + '" width="100" />';
                },
                orderable: false,
                searchable: false
            },
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });
  });
</script>
@endsection