@extends('layouts.app') 
@section('content') 
@section('css')
<link rel="stylesheet" type="text/css" href="assets/vendors/css/tables/datatable/dataTables.bootstrap4.min.css"> 
@endsection

@include('validation.success')
<div class="card box-shadow-1">
    <div class="card-header">
        <h4 class="card-title">{{ isset($title)?$title:'' }}</h4>
        <div class="heading-elements">
            <a href="{{ url('flavors_form') }}">
                <button class="btn btn-info mr-1">Add New Flavor</button>
            </a>
        </div>
    </div>

    <div class="card-body collapse in">
        <div class="card-block card-dashboard">
            <table class="table table-hover table-bordered dom-jQuery-events">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Flavor</th>
                        <th>Type</th>
                        <th>Description</th>
                        <th>Date</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @php $i = 1; @endphp 
                    @if(isset($flavors) && !empty($flavors)) 
                    @foreach($flavors as $row)
                    <tr>
                        <td>{{$i++}}</td>
                        <td>{{ucwords($row->flavor)}}</td>
                        <td>{{$row->flavor_type_name}}</td>
                        <td>{{$row->description}}</td>
                        <td>{{date('d-M-Y', strtotime($row->created_at))}}</td>
                        <td>
                            <a href="{{url('flavors_form?id='.$row->id)}}" style="cursor:pointer" class="text-info edit_click" title="Edit"><i class="icon-edit2"></i></a>
                            <a class="text-danger" href="{{url('delete_flavor?id='.$row->id)}}" title="Delete"><i class="icon-trash-o"></i></a>
                        </td>
                    </tr>
                    @endforeach 
                    @endif
                </tbody>
            </table>
        </div>
    </div>

</div>

@section('js')
<script src="assets/vendors/js/tables/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="assets/vendors/js/tables/datatable/dataTables.bootstrap4.min.js" type="text/javascript"></script>
<script src="assets/js/scripts/tables/datatables/datatable-advanced.min.js" type="text/javascript"></script>
@endsection 
@endsection