@extends('layouts.layout')

@section('css')
<link type="text/css" href="{{ asset('css/bootstrap-select.min.css') }}" rel="stylesheet">
@endsection

@section('title', 'Post A New Job')


@section('main')

<div class="row justify-content-center">
  <div class="col-12 col-md-12">
    <form id="form" method="POST" action="{{ route('jobpost') }}" enctype="multipart/form-data">
      @csrf
      <div class="card border20 shadow bg-gradient-secondary mb-4 p-3">
        <div class="form-group">
          <label for="title">Job Title</label>
          <input type="text" name="job-title" class="form-control form-control-alternative" id="title"
            placeholder="Job Title Here...">
        </div>

        <div class="row">
          <div class="col-12 col-md-6">
            <div class="form-group">
              <label for="cat">Category</label>
              <select name="category" id="category" class="form-control  selectpicker"
                title="Choose one of the following..." data-style="btn-secondary text-default bg-white"
                data-live-search="true">
                @foreach ($categories as $cat)
                <option data-tokens="{{ $cat->name }}" value="{{ $cat->id }}">{{ $cat->name }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-12 col-md-6">
            <div class="form-group">
              <label for="title">Budget</label>
              <div class="form-group">
                <div class="input-group input-group-alternative mb-4">
                  <div class="input-group-prepend">
                    <span class="input-group-text"><b>৳</b></span>
                  </div>
                  <input id="budget" name="budget" class="form-control form-control-alternative"
                    placeholder="Project Budget..." type="number">
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label for="skills">Require Skills & Expertise</label>
          <select onchange="add_chips()" id="skills" class="form-control  selectpicker"
            title="Choose Skills of the following..." data-style="btn-secondary text-default bg-white"
            data-live-search="true">
            @foreach ($skills as $skill)
            <option data-tokens="{{ $skill->name }}" value="{{ $skill->name }}">{{ $skill->name }}</option>
            @endforeach
          </select>
        </div>

        <div id="skill-selected"></div>
        <input type="hidden" name="skill" id="selected-skills">
        <br>

        <label for="job-desc">Job Description</label>
        <textarea name="job-desc" class="form-control form-control-alternative" id="desc" rows="10"
          placeholder="Write job description here ..."></textarea>

        <br>
        <label for="files">Add Additional Files (Optional)</label>

        <div id="file-wrp">
          <div class="custom-file col-md-6 mb-3">
            <input name="file[]" multiple onchange="setFileLabel(this)" type="file" class="custom-file-input">
            <label class="custom-file-label" for="customFile">Choose file</label>
          </div>
          <div class="custom-file d-none col-md-6 mb-3">
            <input name="file[]" multiple onchange="setFileLabel(this)" type="file" class="custom-file-input">
            <label class="custom-file-label" for="customFile">Choose file</label>
          </div>
          <div class="custom-file d-none col-md-6 mb-3">
            <input name="file[]" multiple onchange="setFileLabel(this)" type="file" class="custom-file-input">
            <label class="custom-file-label" for="customFile">Choose file</label>
          </div>
          <div class="custom-file d-none col-md-6 mb-3">
            <input name="file[]" multiple onchange="setFileLabel(this)" type="file" class="custom-file-input">
            <label class="custom-file-label" for="customFile">Choose file</label>
          </div>
          <div class="custom-file d-none col-md-6 mb-3">
            <input name="file[]" multiple onchange="setFileLabel(this)" type="file" class="custom-file-input">
            <label class="custom-file-label" for="customFile">Choose file</label>
          </div>
        </div>

        <button onclick="addMoreFileInput()" type="button" class="btn btn-primary col-md-2">Add More File</button>

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

        <div class="row justify-content-center">
          <div class="col-md-4 col-6">
            <button type="submit" class="btn btn-success">&nbsp; Post &nbsp;</button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>


@endsection

@section('script')
<script src="{{ asset('js/bootstrap-select.min.js') }}"></script>
<script>
  $('.selectpicker').selectpicker()
</script>
@endsection