@extends('layouts.admin')

@section('title','Create Ingredient')

@section('content')
<div class="content-main-block mrg-t-40">
  <div class="content-block box-body">

    {{-- Back --}}
    <a href="{{ route('ingredients.index') }}"
       class="btn-floating"
       data-toggle="tooltip"
       title="Go back">
      <i class="material-icons">reply</i>
    </a>

    <h4 class="mt-3">Add New Ingredient</h4>
    <hr>

    {{-- Validation Errors --}}
    @if ($errors->any())
      <div class="alert alert-danger">
        <ul class="mb-0">
          @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
          @endforeach
        </ul>
      </div>
    @endif

    {{-- Form --}}
    <form method="POST" action="{{ route('ingredients.store') }}">
      @csrf

      {{-- Ingredient Name --}}
      <div class="form-group">
        <label>Ingredient Name <span class="text-danger">*</span></label>
        <input
          type="text"
          name="name"
          class="form-control"
          placeholder="e.g. Sugar, Milk, Butter"
          value="{{ old('name') }}"
          required
        >
      </div>

     
     
      
{{-- Ingredient Categories --}}
<div class="form-group">
  <label>Ingredient Categories</label>

  <div class="row mt-2">
    @foreach($categories as $category)
      <div class="col-md-4 col-sm-6 mb-2">
        <div class="custom-control custom-checkbox">
          <input
            type="checkbox"
            class="custom-control-input"
            id="category_{{ $category->id }}"
            name="categories[]"
            value="{{ $category->id }}"
            {{ in_array($category->id, old('categories', [])) ? 'checked' : '' }}
          >
          <label class="custom-control-label" for="category_{{ $category->id }}">
            {{ $category->name }}
          </label>
        </div>
      </div>
    @endforeach
  </div>

  <small class="text-muted">
    Select one or more recipe categories
  </small>
</div>


       
     

      {{-- Submit --}}
      <div class="form-group mt-4">
        <button type="submit" class="btn btn-danger">
          <i class="material-icons left">check</i> Save Ingredient
        </button>

      
      </div>

    </form>

  </div>
</div>
@endsection