@php
  // use App\Models\Admin;
  // // All admins list (for select options)
  // $allAdmins = Admin::pluck('first_name', 'uuid')->toArray(); // or use 'id' if syncing by id
  // Selected assignables
  $selectedAssignables = $scrum_board->assignables->pluck('email', 'uuid')->toArray(); // or 'id'
  // Selected viewers
  $selectedViewers = $scrum_board->viewers->pluck('email', 'uuid')->toArray(); // or 'id'
@endphp




<!--begin::Body-->
<div class="card-body position-relative scroll" id="gwire_drawer_body">
  <!--begin::Content-->
  <div id="gwire_drawer_scroll" class="position-relative scroll-y me-n5 pe-5" data-kt-scroll="true" data-kt-scroll-height="auto" data-kt-scroll-wrappers="#gwire_drawer_body" data-kt-scroll-dependencies="#gwire_drawer_header, #gwire_drawer_footer" data-kt-scroll-offset="5px">
    <!--begin::Timeline items-->
      <!--begin::Stepper-->
      <div>
        <!--begin::Form-->
        @if($scrum_board->id)
          <form class="mx-auto mw-600px w-100 pt-15 pb-10" novalidate="novalidate" id="kt_create_account_form" action="{{ route('admin.scrum-boards.update', $scrum_board) }}" method="POST">
        @else
          <form class="mx-auto mw-600px w-100 pt-15 pb-10" novalidate="novalidate" id="kt_create_account_form" action="{{ route('admin.scrum-boards.store') }}" method="POST">
        @endif
          <!--begin::Step 1-->
          <div class="current" data-kt-stepper-element="content">
            @csrf
            @if($scrum_board->id)
              @method('PUT')
            @endif
            <!--begin::Wrapper-->
            <div class="w-100">
              <!--begin::Heading-->
              <div class="pb-5 pb-lg-5">
                <!--begin::Title-->
                <h2 class="fw-bold d-flex align-items-center text-gray-900">Board Info
                <span class="ms-1" data-bs-toggle="tooltip" title="Billing is issued based on your selected account typ">
                  <i class="ki-duotone ki-information-5 text-gray-500 fs-6">
                    <span class="path1"></span>
                    <span class="path2"></span>
                    <span class="path3"></span>
                  </i>
                </span></h2>
                <!--end::Title-->
                <p class="mb-4">This will be the <b>Name</b> and description of your Kanban board. You and other admins can edit the name in future. The name can contain letters, numbers &amp; punctuation. </p>
              </div>
              <!--end::Heading-->
              <!--begin::Input group-->
              <div class="fv-row">
                <!--begin::Row-->
                <div class="row">
                  <!--begin::Col-->
                  <div class="col-lg-12">
                    <div class="form-floating fv-row">
                      <input class="form-control" type="text" name="name" id="create-boardwizard-name" placeholder="Event title" value="{{$scrum_board->name ?? 'New Kanban Board' }}">
                      <label for="create-boardwizard-name">BOARD NAME</label>
                    </div>
                    <div class="form-floating mt-4 fv-row">
                      <input id="create-boardwizard-color" class="form-control board-color-picker kanban-color-picker" type="color" name="color" value="#6E7891">
                      <label for="create-boardwizard-name">BOARD COLOR</label>
                    </div>
                      {{-- Assignable Users --}}
                      <div class="col-12 mt-2">
                        {!! Form::label('assignables[]', 'Assignable Users') !!}

                          {!! Form::select('assignables[]', $selectedAssignables ?? [],  @$selectedAssignables ? array_keys($selectedAssignables) : [], [
                          'class' => 'form-select',
                          'data-placeholder' => __('Select assignable users'),
                          'data-allow-clear' => 'true',
                          'data-kt-select2' => 'true',
                          'multiple' => true,
                          'data-kt-template-result' => "users",
                          'data-template-selection-ld'=>"formatSelections",
                          'data-remote' => route('resource-select-user', ['Admin']),
                          'id' => 'scrum-board-assignables-select'
                        ]) !!}
                      </div>
                      {{-- Board Viewers --}}
                      <div class="col-12 mt-2">
                        {!! Form::label('viewers[]', 'Board Viewers') !!}
                        {!! Form::select('viewers[]', $selectedViewers ?? [],  @$selectedViewers ? array_keys($selectedViewers) : [], [

                          'class' => 'form-select',
                          'data-placeholder' => __('Select board viewers'),
                          'data-allow-clear' => 'true',
                          'data-kt-select2' => 'true',
                          'multiple' => true,
                          'data-kt-template-result' => "users",
                          'data-template-selection-ld'=>"formatSelections",
                          'data-remote' => route('resource-select-user', ['Admin']),
                          'id' => 'scrum-board-viewers-select'
                        ]) !!}
                      </div>
                    
                    <div class="form-floating mt-4 fv-row">
                      <select class="form-select" name="board_for" id="create-boardwizard-boardfor" data-control="select2" required>
                          <option value="" disabled {{ !$scrum_board->board_for ? 'selected' : '' }}>Select Board For</option>
                          @foreach(\Modules\ScrumBoard\Models\ScrumBoard::boardForOptions() as $key => $label)
                              <option value="{{ $key }}" {{ $scrum_board->board_for_key === $key ? 'selected' : '' }}>
                                  {{ $label }}
                              </option>
                          @endforeach
                      </select>
                      <label for="create-boardwizard-boardfor">Board For</label>
                  </div>
                    <div class="form-floating mt-4 fv-row">
                      <textarea class="form-control" placeholder="Leave a comment here" name="description" id="create-board-wizard-des" style="height: 128px">{{$scrum_board->description}}</textarea>
                      <label for="create-board-wizard-des">DESCRIPTION (OPTIONAL)</label>
                    </div>
                    <div class="mt-4 fv-row">
                      <label class="form-check form-switch form-check-custom form-check-solid">
                        <input name="allow_duplicate_tasks" type="checkbox" class="form-check-input" @checked($scrum_board->allow_duplicate_tasks)>
                        <span class="switch-label">Allow Duplicate Tasks</span>
                      </label>
                    </div>
                  </div>
                  <!--end::Col-->

                </div>
                <!--end::Row-->
              </div>
              <!--end::Input group-->
            </div>
            <!--end::Wrapper-->
          </div>
          <!--end::Step 1-->
          <!--begin::Step 2-->
          <div data-kt-stepper-element="content" class="form-repeater">
            <!--begin::Wrapper-->
            <div class="w-100">
              <!--begin::Heading-->
              <div class="pb-5 pb-lg-5">
                <!--begin::Title-->
                <h2 class="fw-bold text-gray-900">Board Pipelines</h2>
                <!--end::Title-->
                <p class="mb-4">These will be the <b>Columns</b> of your Kanban board. They represent discrete stages in work process. Columns can be Edited, Removed, Rearranged or Added in future.</p>
              </div>
              <!--end::Heading-->

              <div  data-repeater-list="pipelines">
                @php
                  $sort_enabled = $scrum_board->id && !$scrum_board->tasks()->exists();
                @endphp
                @forelse ($scrum_board->pipelines as $pipeline)
                  <div class="py-1 outer-repeater-item" data-repeater-item="pipelines">
                    <!--begin::Header-->
                    <div class="kanban-column-item mb-4">
                      <div class="d-flex my-2 fv-row">
                        <!--begin::Radio-->
                        <label class="form-check form-check-custom form-check-solid me-5">
                            <input class="form-check-input" type="radio" name="payment_method" data-gtm-form-interact-field-id="0">
                        </label>
                        <!--end::Radio-->
                      </div>
                        <!--begin::Radio-->
                        <div class="d-flex align-items-center my-2 me-4" style=""><span class="badge badge-square badge-primary todo-count" style="">0</span>
                        <!--end::Radio-->
                      </div>
                      <div class="flex-grow-1">
                        <div class="form-floating position-relative fv-row">
                          <input type="hidden" name="id" value="{{$pipeline->id}}" />
                          <input class="form-control" type="text" name="name" placeholder="Column Name" value="{{$pipeline->name ?? 'Unassaigned'}}">
                          <label class="form-label">COLUMN Name</label>
                        </div>


                      </div>
                      <!--begin::Summary-->
                      <div class="ms-3 fv-row">
                        <input class="kanban-color-picker" type="color" name="color" value="#6E7891">
                      </div>
                      <div class="d-flex my-2 ms-4 w-30px h-30px">
                        
                        <div class="form-check form-switch d-flex my-2"  data-bs-toggle="tooltip" data-bs-placement="top" title="Mark this column as skippable if it's optional in the workflow.">
                          <input name="is_skippable" type="checkbox" class="form-check-input h-15px w-25px" @checked($pipeline->is_skippable)>
                        </div>
                      </div>

                      <div class="d-flex my-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete this column">
                        <!--begin::Radio-->
                        <button type="button" data-repeater-delete="pipelines" class="btn btn-icon btn-flex btn-active-light-primary w-30px h-30px {{$pipeline->id ? 'disabled' : ''}}" >
                          <i class="ki-outline ki-trash fs-3"></i>
                        </button>
                        <!--end::Radio-->
                      </div>
                      <div class="d-flex my-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Drag to reorder columns">
                        <!--begin::Radio-->
                        <button type="button" class="btn btn-icon btn-flex btn-active-light-primary w-30px h-30px bi-drag {{ $sort_enabled ? '' : 'disabled' }}">
                          <i class="ki-outline ki-burger-menu-3 fs-3"></i>
                        </button>
                        <!--end::Radio-->
                      </div>
                      <div class="d-flex my-2"  data-bs-toggle="tooltip" data-bs-placement="top" title="Show or hide checklist items">
                        <!--begin::Arrow-->
                        <div data-bs-toggle="collapse" data-bs-target="#kt_create_new_board_col_{{$pipeline->id}}" aria-expanded="false"  class=" collapsible toggle collapsed btn btn-sm btn-icon btn-active-color-primary w-30px h-30px">
                          <i class="ki-outline ki-minus-square toggle-on text-primary fs-2"></i>
                          <i class="ki-outline ki-plus-square toggle-off fs-2"></i>
                        </div>
                        <!--end::Arrow-->
                      </div>

                      <!--end::Summary-->
                    </div>
                    <!--end::Header-->

                    <!--begin::Body-->
                    <div id="kt_create_new_board_col_{{$pipeline->id}}" class="fs-6 collapse" style="">
                        <!--begin::Details-->
                        <div class="d-flex flex-wrap pb-5">
                          <div class="mb-9 mb-10 col-12 todo-list-container">
                            <div id="todo-repeater" class="row align-items-center g-3 mb-3 inner-repeater">
                              <div class="d-flex justify-content-between align-items-center mb-4">
                                <h4 class="mb-0">Todo list
                                  <span id="todo-count" class="text-body-tertiary fw-normal ms-2 todo-count">(0)</span>
                                </h4>
                                {{-- <!-- Move skippable here -->
<div class="d-none form-check form-switch mb-4" data-bs-toggle="tooltip" title="Mark this column as skippable if it's optional in the workflow.">
  <input
  name="pipelines[__pipeline_index__][is_skippable_demo]"
  type="checkbox"
  class="form-check-input">
<label class="form-check-label">Mark as skippable</label>
</div> --}}

                              </div>
                              
                              <div class="mb-4 todo-list" data-repeater-list="checkitems" @if(count($pipeline->checkItems) == 0) data-init-empty="true" @endif>
                                @forelse ($pipeline->checkItems as $checkItem)
                                  <div class="d-flex flex-between-center hover-actions-trigger py-3 border-top inner-repeater-item" data-repeater-item="checkitems">
                                      <div class="form-check mb-1 mb-md-0 d-flex align-items-center lh-1 min-h-auto">
                                        <button type="button" class="btn btn-icon btn-flex btn-active-light-primary w-30px h-30px bi-drag-ci">
                                          <i class="ki-outline ki-burger-menu-3 fs-3"></i>
                                        </button>
                                        <div class="mt-0 ms-3 me-3 fv-row">
                                          <input type="hidden" name="id" value="{{$checkItem->id}}" />
                                          <input class="form-control form-control-sm" placeholder="Title" name="title" type="text" value="{{$checkItem->title}}">
                                        </div>
                                      </div>
                                      <div class="hover-actions align-items-center end-0">
                                        <button type="button" class="btn btn-icon btn-flex btn-active-light-primary w-30px h-30px" data-repeater-delete="checkitems">
                                          <i class="ki-outline ki-trash fs-3"></i>
                                        </button>
                                      </div>
                                  </div>
                                @empty
                                  <div class="d-flex flex-between-center hover-actions-trigger py-3 border-top inner-repeater-item" data-repeater-item="checkitems">
                                      <div class="form-check mb-1 mb-md-0 d-flex align-items-center lh-1 min-h-auto">
                                        <button type="button" class="btn btn-icon btn-flex btn-active-light-primary w-30px h-30px bi-drag-ci">
                                          <i class="ki-outline ki-burger-menu-3 fs-3"></i>
                                        </button>
                                        <div class="mt-0 ms-3 me-3 fv-row">
                                          <input class="form-control form-control-sm" placeholder="Title" name="title" type="text" value="">
                                        </div>
                                      </div>
                                      <div class="hover-actions align-items-center end-0">
                                        <button type="button" class="btn btn-icon btn-flex btn-active-light-primary w-30px h-30px" data-repeater-delete="checkitems">
                                          <i class="ki-outline ki-trash fs-3"></i>
                                        </button>
                                      </div>
                                  </div>
                                @endforelse
                              </div>
                              <span class="fw-bold fs-9 mt-4 text-primary cursor-pointer" data-repeater-create="checkitems">
                                  <span class="fas fa-plus me-1"></span> Add new task !
                              </span>
                              <span class="fw-bold fs-9 mt-4 text-primary cursor-pointer {{ $pipeline->id ? 'd-none' : ''}}" data-repeater-delete="pipelines">
                                <span class="fas fa-plus me-1"></span> Delete task
                            </span>
                            </div>
                          </div>
                        </div>
                        <!--end::Details-->
                    </div>
                    <!--end::Body-->

                    <div class="separator separator-dashed my-5"></div>

                  </div>
                @empty
                @endforelse
              </div>
              <!--begin::Input group-->
              <div class="mb-10 fv-row">
                <!--begin::Input-->
                <div class="d-grid">
                  <button class="btn btn-lg btn-secondary fs-9 bg-body-highlight" type="button" data-repeater-create="pipelines">
                    <span class="fas fa-plus me-2" data-fa-transform="shrink-3"></span> Add New Column
                  </button>
                </div>
                <!--end::Input-->
              </div>
              <!--end::Input group-->
            </div>
            <!--end::Wrapper-->
          </div>
          <!--end::Step 2-->
          <!--begin::Step 5-->
          <div data-kt-stepper-element="content">
            <!--begin::Wrapper-->
            <div class="w-100">
              <!--begin::Heading-->
              <div class="pb-8 pb-lg-10">
                <!--begin::Title-->
                <h2 class="fw-bold text-gray-900">Your Are Done!</h2>
                <!--end::Title-->
                <!--begin::Notice-->
                <div class="text-muted fw-semibold fs-6">If you need more info, please
                <a href="authentication/layouts/corporate/sign-in.html" class="link-primary fw-bold">Sign In</a>.</div>
                <!--end::Notice-->
              </div>
              <!--end::Heading-->
              <!--begin::Body-->
              <div class="mb-0">
                <!--begin::Text-->
                <div class="fs-6 text-gray-600 mb-5">Writing headlines for blog posts is as much an art as it is a science and probably warrants its own post, but for all advise is with what works for your great & amazing audience.</div>
                <!--end::Text-->
                <!--begin::Alert-->
                <!--begin::Notice-->
                <div class="notice d-flex bg-light-warning rounded border-warning border border-dashed p-6">
                  <!--begin::Icon-->
                  <i class="ki-duotone ki-information fs-2tx text-warning me-4">
                    <span class="path1"></span>
                    <span class="path2"></span>
                    <span class="path3"></span>
                  </i>
                  <!--end::Icon-->
                  <!--begin::Wrapper-->
                  <div class="d-flex flex-stack flex-grow-1">
                    <!--begin::Content-->
                    <div class="fw-semibold">
                      <h4 class="text-gray-900 fw-bold">We need your attention!</h4>
                      <div class="fs-6 text-gray-700">To start using great tools, please,
                      <a href="utilities/wizards/vertical.html" class="fw-bold">Create Team Platform</a></div>
                    </div>
                    <!--end::Content-->
                  </div>
                  <!--end::Wrapper-->
                </div>
                <!--end::Notice-->
                <!--end::Alert-->
              </div>
              <!--end::Body-->
            </div>
            <!--end::Wrapper-->
          </div>
          <!--end::Step 5-->
          <!--begin::Actions-->
          {{-- <div class="d-flex flex-stack pt-15">
            <!--begin::Wrapper-->
            <div class="mr-2">
              <button type="button" class="btn btn-lg btn-light-primary me-3" data-kt-stepper-action="previous">
              <i class="ki-duotone ki-arrow-left fs-4 me-1">
                <span class="path1"></span>
                <span class="path2"></span>
              </i>Back</button>
            </div>
            <!--end::Wrapper-->
            <!--begin::Wrapper-->
            <div>
              <button type="button" data-form="ajax-form" class="btn btn-lg btn-primary me-3" data-kt-stepper-action="submit">
                <span class="indicator-label">Submit
                <i class="ki-duotone ki-arrow-right fs-3 ms-2 me-0">
                  <span class="path1"></span>
                  <span class="path2"></span>
                </i></span>
                <span class="indicator-progress">Please wait...
                <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
              </button>
              <button type="button" class="btn btn-lg btn-primary" data-kt-stepper-action="next">Continue
              <i class="ki-duotone ki-arrow-right fs-4 ms-1 me-0">
                <span class="path1"></span>
                <span class="path2"></span>
              </i></button>
            </div>
            <!--end::Wrapper-->
          </div> --}}
          <!--end::Actions-->
        </form>
        <!--end::Form-->
      </div>
      <!--end::Stepper-->

    <!--end::Timeline items-->
  </div>
  <!--end::Content-->
</div>
<!--end::Body-->