@extends('layouts.newApp')

@section('page-title')
<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
        <h4 class="page-title"><i class="{{ $pageIcon }}"></i> Sprints</h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12 text-right">
        <a href="{{ route('sprints.index') }}"  class="btn btn-outline btn-info btn-sm pinnedItem btn-success">List Sprints</a>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection

@section('content')

<div class="grey-background taskBackground ">
    <div class="custom-card">
        <div class="panel panel-default mainCustomContent">
            <div class="panel-heading taskHeading pt-2">Create New Sprint</div>
            <div class="panel-body ">
                <form id="createSprintForm" class="ajax-form" method="POST">
                @csrf
                    <div class="col-lg-6 col-md-12">
                        <div class="col-md-12 form-group">
                            <label class="control-label taskFormHeading required">Name</label>
                            <input type="text" id="name" name="name" class="form-control" placeholder="Enter Name">
                            <span class="invalid-feedback name_error" role="alert">
                                <strong></strong>
                            </span>
                        </div>

                        <div class="col-md-12 form-group mb-0">
                            <div class="form-group discripationDiv">
                                <label class="control-label taskFormHeading  p-0">@lang('app.description')</label>
                                <textarea id="description" name="description" class="form-control summernote"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-12">
                        <div class="col-md-12 col-lg-6">
                            <div class="form-group">
                                <label class="control-label taskFormHeading required">@lang('app.project')</label>
                                <select class="select2 form-control" data-placeholder="@lang(" app.selectProject")" id="project_id" name="project_id">
                                    <option value="">Select Project</option>
                                    @foreach($projects as $project)
                                    <option value="{{ $project->id }}">{{ ucwords($project->project_name) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-12 col-lg-6 ">
                            <div class="form-group">
                                <label class="control-label taskFormHeading">Status</label>
                                <select class="form-control" name="status" id="status" data-style="form-control">
                                    @forelse($sprintOptions as $key => $sprintOption)
                                    @php
                                    if(strtolower($sprintOption) != "inactive") {
                                        continue;
                                    }

                                    @endphp
                                    <option value="{{ $key }}">{{ ucwords($sprintOption) }}</option>
                                    @empty
                                    <option value="">@lang('messages.noTaskCategoryAdded')</option>
                                    @endforelse
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12 col-lg-6">
                            <div class="form-group">
                                <label class="control-label taskFormHeading">@lang('app.startDate')</label>
                                <input readonly type="text" name="start_date" id="start_date" class="form-control" autocomplete="off"  placeholder="Select start date">
                            </div>
                        </div>

                        <div class="col-md-12 col-lg-6">
                            <div class="form-group">
                                <label class="control-label taskFormHeading">@lang('app.endDate')</label>
                                <input readonly type="text" name="end_date" id="end_date" class="form-control" autocomplete="off" placeholder="Select end date">
                            </div>
                        </div>

                        <div class="col-md-12 col-lg-12">
                            <div class="form-group">
                                <label class="control-label taskFormHeading">Tasks</label><br>

                                <select class="selectpicker form-control" data-live-search="true" multiple name="tasks[]">

                                    </select>

                                <!-- <div id="tasksList" ></div> -->
                            </div>
                        </div>


                        <div class="form-actions svingButton">
                            <button type="button" id="createSprint" class="btn btn-success saveButton"><i class="fa fa-check"></i> @lang('app.create')</button>
                        </div>
                    </div>



                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@push('footer-script')

<script>
    let globalDatepickerFormat = '{{ $global->date_picker_format }}';
    let noRecordFound = "{{ __('messages.noRecordFound') }}";
    let createSprintRoute = "{{route('sprints.store')}}";
    let sprintsListRoute = "{{ route('sprints.index') }}";
    let getTasksRoute = "{{ route('sprints.getTasks') }}";
    let csrfToken = '{{ csrf_token() }}';

//     VirtualSelect.init({
//   ele: '#tasksList',
//   multiple: true, // Enable multi-select
//   search: true, // Enable search filter
//   options: [
//     { label: 'Options 1', value: '1' },
//     { label: 'Options 2', value: '2' },
//     { label: 'Options 3', value: '3' },
//   ],
// });

</script>

<script src="{{ asset('js/pages/admin/sprints/create.js') }}"></script>

@endpush