@extends ('backend.layouts.app')

@section ('title', trans('labels.backend.albums.management') . ' | ' . trans('labels.backend.albums.create'))

@section('page-header')
    <h1>
        {{ trans('labels.backend.albums.management') }}
        <small>{{ trans('labels.backend.albums.create') }}</small>
    </h1>
@endsection

@section('content')
<form
  method="POST"
  action="{{url('admin/albums')}}"
  accept-charset="UTF-8"
  role="form"
  id="create-album"
  enctype="multipart/form-data"
  class="form-horizontal"
>
  @csrf
  <div class="box box-info">
    <div class="box-header with-border">
      <h3 class="box-title">Create Album</h3>
      <div class="box-tools pull-right">
        <div class="btn-group">
          <button
            type="button"
            data-toggle="dropdown"
            class="btn btn-primary btn-flat dropdown-toggle"
          >
            Action <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
          </button>
          <ul role="menu" class="dropdown-menu">
            <li>
              <a href="{{url('admin/albums')}}"
                ><i class="fa fa-list-ul"></i> All Albums
              </a>
            </li>
            <li>
              <a href="{{url('admin/albums/create')}}"
                ><i class="fa fa-plus"></i> Create Album
              </a>
            </li>
          </ul>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <div class="box-body">
      <div class="form-group">
        <div class="box-body">
          <div class="form-group">
            <label for="Type" class="col-lg-2 control-label required"
              >type</label
            >
            <div class="col-lg-10">
              <input
                placeholder="Album Type"
                required="required"
                name="type"
                type="text"
                value="1"
                class="form-control box-size"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="title" class="col-lg-2 control-label required"
              >Title</label
            >
            <div class="col-lg-10">
              <input
                placeholder="title"
                required="required"
                name="title"
                type="text"
                id="title"
                class="form-control box-size"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="Description" class="col-lg-2 control-label required"
              >Description</label
            >
            <div class="col-lg-10">
              <input
                placeholder="Description"
                required="required"
                name="description"
                type="text"
                class="form-control box-size"
              />
            </div>
          </div>
        </div>
        <div class="edit-form-btn"><div class="clearfix"></div></div>
      </div>
    </div>
  </div>
  <div id="wrapper" class="box-body">
    <small>Create Photos</small>
    <div class="form-group">
      <label for="images" class="col-lg-2 control-label required">images</label>
      <div class="col-lg-10"><input name="image[]" type="file" /></div>
    </div>
    <div class="form-group">
      <label for="title" class="col-lg-2 control-label required">Title</label>
      <div class="col-lg-10">
        <input
          placeholder="title"
          required="required"
          name="imagetitle[]"
          type="text"
          class="form-control box-size"
        />
      </div>
    </div>
    <div class="form-group">
      <label for="Descrption" class="col-lg-2 control-label required"
        >Description</label
      >
      <div class="col-lg-10">
        <input
          placeholder="Description"
          required="required"
          name="imgdescrption[]"
          type="text"
          class="form-control box-size"
        />
      </div>
    </div>
  </div>
  <div class="edit-form-btn">
    <a
      href="{{url('admin/albums')}}"
      class="btn btn-danger btn-md"
      >Cancel</a
    >
    <input type="submit" value="Create" class="btn btn-primary btn-md" />
    <button class="btn btn-primary btn-md add_field_button">
      Add More Fields
    </button>
    <div class="clearfix"></div>
  </div>
</form>



            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script type="text/javascript">
            $(document).ready(function() {
            var max_fields      = 50; //maximum input boxes allowed
            var wrapper         = $("#wrapper"); //Fields wrapper
            var add_button      = $(".add_field_button"); //Add button ID
            var x = 1; //initlal text box count
            $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><div class="form-group">{{ html()->label('images', 'images')->class('col-lg-2 control-label required') }} <div class="col-lg-10">{{ html()->file('image[]')->class('form-control box-size')->required() }}</div></div><div class="form-group">{{ html()->label('title', 'Title')->class('col-lg-2 control-label required') }} <div class="col-lg-10">{{ Html::input('text', 'imagetitle[]', null, ['class' => 'form-control box-size','placeholder' => 'title','required' => 'required']) }} </div></div><div class="form-group">{{ html()->label('Descrption', 'Descrption')->class('col-lg-2 control-label required') }} <div class="col-lg-10">{{ html()->text('imgdescrption[]', null, ['class' => 'form-control box-size', 'placeholder' => 'Description', 'required' => 'required']) }}  </div></div><a href="#" class="remove_field">Remove</a></div>');
            }
            });
            $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
            })
            });
            </script>
    {{ html()->form()->close() }}
    </div>
@endsection