@if(count($foods) > 0)
<div class="table-responsive">
    <table class="table align-items-center table-flush table-striped" id="foods">
        <thead class="thead-light">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Name Greek</th>
                <th>Brand</th>
                <th>Category</th>
                <th>Calories /100g</th>
                <th>Protein /100g</th>
                <th>Carbs /100g</th>
                <th>Fat /100g</th>
                @if($type == 'user')
                    <th>User</th>
                @endif
                @if($type == 'master')
                    <th>Action</th>
                @endif
            </tr>
        </thead>
        <tbody class="list">
            @php $count = count($foods); @endphp
            @foreach($foods as $key => $food)
                <tr>
                    <td>{{ $count - $key }}</td>
                    <td>{{ $food->name }}</td>
                    <td>{{ $food->name_el }}</td>
                    <td>{{ $food->brand?->name ?? '-' }}</td>
                    <td>{{ $food->category?->fc_value ?? '-' }}</td>
                    <td>{{ $food->calories_per_100g }}</td>
                    <td>{{ $food->protein_per_100g }}</td>
                    <td>{{ $food->carbs_per_100g }}</td>
                    <td>{{ $food->fat_per_100g }}</td>
                    @if($type == 'user')
                        <td>
                            {{ $food->user?->name ?? '-' }}
                        </td>
                    @endif
                    @if($type == 'master')
                        <td class="actions">
                            <form class="delete-action"
                                style="padding:0 10px"
                                method="post"
                                action="{{ route('admin.foods.delete',['id'=>$food->id]) }}">
                            @csrf
                            @method('DELETE')
                            <label for="deleteButton{{ $food->id }}" class="none-display">
                            <i class="fa fa-trash text-danger"></i>
                            </label>
                            <input type="submit"
                            id="deleteButton{{ $food->id }}"
                            style="display:none;">
                            </form>
                            <a href="{{ route('admin.foods.edit',$food->id) }}">
                                <i class="far fa-edit text-danger"></i>
                            </a>
                        </td>
                    @endif
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
@else
<div class="col-md-12 text-center mt-1 mb-1">
    <h3>No foods found</h3>
</div>
@endif
  <script>
        function showPermissionAlert() {
    alert("This is for demo, you are not allow to delete this content.");
        }
</script>
<script>
   $(document).ready(function () {
    $('#foods').DataTable({
        searching: true,
        order: [[0, "desc"]], // Sort by ID column
        columnDefs: [
            {
                targets: 0, // ID column
                searchable: false
            }
        ],
        fnDrawCallback: function () {
            var api = this.api();
            api.column(0).nodes().each(function (cell, i) {
                cell.innerHTML = i + 1; // Auto numbering
            });
        },
        language: {
            search: "search:"
        }
    });
});
</script>
<style>
td.actions {
        display: flex;
        align-items: baseline;
    }
    label.none-display {
        cursor: pointer;
    }
    .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 1px;
            left: 1px;
            right: 0;
            bottom: 0;
            background-color: #f40707 !important;
            transition: 0.4s;
            border-radius: 34px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;
        }
        /* input:checked + .slider {
            background-color: #013921;
        } */
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
        }
    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }
    .slider.round:before {
        border-radius: 50%;
    }
    table#categorys {
    width: 100% !important;
}
</style>