@extends('layouts.app')
@section('style')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endsection

@section('content')
@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif
<div class="container p-5">
<div class="card">
    <div class="card-header">
        {{ trans('global.create') }} Project
    </div>

    <div class="card-body">
      <form action="{{ route('frontend.project.store') }}" method="post">
        @csrf
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" class="form-control" id="name" name="name" placeholder="Project One">
        </div>
        <div class="form-group">
          <label for="name">Select Product</label>
          <select class="form-control select2" name="templates[]" multiple="multiple">
            @foreach ($product_templates as $template)
              <option value="{{ $template->id }}">{{ $template->name }}</option>
            @endforeach
          </select>
        </div>
        <button type="submit" class="btn btn-primary">Create</button>
      </form>
    </div>
</div>
</div>
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
  $(document).ready(function() {
    $('.select2').select2();
  });
</script>
@endsection