@extends('layouts.app')

@push('css')
	<!-- Styles -->
    <link href="{{ asset('css/library/select2.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/bs-stepper.min.css') }}" rel="stylesheet">
@endpush

@php
    $title    = old('title');
    $duration = old('duration');
    $document = old('document');
@endphp

@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Manage Projects</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('projects.index') }}">Manage Projects</a></li>
                        <li class="breadcrumb-item active">Add Project</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
			    <div class="col-md-12">
			        <div class="card card-default">
			            <div class="card-header">
			                <h3 class="card-title">Add Project</h3>
			            </div>
			            <div class="card-body p-0">
			                <div class="bs-stepper linear">
			                	<div class="bs-stepper-header" role="tablist">
				                    <!-- your steps here -->
				                    <div class="step active" data-target="#basic-details">
				                        <button type="button" class="step-trigger" role="tab" aria-controls="basic-details" id="basic-details-trigger" aria-selected="true">
				                            <span class="bs-stepper-circle">1</span>
				                            <span class="bs-stepper-label">Basic</span>
				                          </button>
				                    </div>
				                    <div class="line1"></div>
				                    <div class="step" data-target="#tender-scope">
			                            <button type="button" class="step-trigger" role="tab" aria-controls="tender-scope" id="tender-scope-trigger" aria-selected="false">
			                                <span class="bs-stepper-circle">2</span>
			                                <span class="bs-stepper-label">Tender scope</span>
			                            </button>
			                        </div>
				                    <div class="line1"></div>
			                        <div class="step" data-target="#project-spec">
			                            <button type="button" class="step-trigger" role="tab" aria-controls="project-spec" id="project-spec-trigger" aria-selected="false">
			                                <span class="bs-stepper-circle">3</span>
			                                <span class="bs-stepper-label">Specifications</span>
			                            </button>
			                        </div>
			                        <div class="line1"></div>
			                        <div class="step" data-target="#boq-part">
			                            <button type="button" class="step-trigger" role="tab" aria-controls="boq-part" id="boq-part-trigger" aria-selected="false">
			                                <span class="bs-stepper-circle">4</span>
			                                <span class="bs-stepper-label">BOQ</span>
			                            </button>
			                        </div>
			                        <!-- <div class="line1"></div>
			                        <div class="step" data-target="#contracts-part">
			                            <button type="button" class="step-trigger" role="tab" aria-controls="contracts-part" id="contracts-part-trigger" aria-selected="false">
			                                <span class="bs-stepper-circle">5</span>
			                                <span class="bs-stepper-label">Contract</span>
			                            </button>
			                        </div> -->
			                        <div class="line1"></div>
			                        <div class="step" data-target="#drwaings-part">
			                            <button type="button" class="step-trigger" role="tab" aria-controls="drwaings-part" id="drwaings-part-trigger" aria-selected="false">
			                                <span class="bs-stepper-circle">5</span>
			                                <span class="bs-stepper-label">Drawings</span>
			                            </button>
			                        </div>
			                        <div class="line1"></div>
			                        <div class="step" data-target="#requirements-part">
			                            <button type="button" class="step-trigger" role="tab" aria-controls="requirements-part" id="requirements-part-trigger" aria-selected="false">
			                                <span class="bs-stepper-circle">6</span>
			                                <span class="bs-stepper-label">T.Requirements</span>
			                            </button>
			                        </div>
			                        <!-- <div class="line1"></div>
			                        <div class="step" data-target="#insurance-part">
			                            <button type="button" class="step-trigger" role="tab" aria-controls="insurance-part" id="insurance-part-trigger" aria-selected="false">
			                                <span class="bs-stepper-circle">8</span>
			                                <span class="bs-stepper-label">Insurance</span>
			                            </button>
			                        </div> -->
			                    </div>
			                    <div class="bs-stepper-content">
									
									<!-- Include the step 1 -->
                                    @include('admin.projects.partials.step1')

                                    <!-- Include the step 1 -->
                                    @include('admin.projects.partials.step2')

                                    <!-- Include the step 3 -->
                                    @include('admin.projects.partials.step3')

                                    <!-- Include the step 4 -->
                                    @include('admin.projects.partials.step4')

                                    <!-- Include the step 5 -->
                                    @include('admin.projects.partials.step5')

                                    <!-- Include the step 6 -->
                                    @include('admin.projects.partials.step6')

                                    <!-- Include the step 6 -->
                                    @include('admin.projects.partials.step7')

			                        <!-- <div id="contracts-part" class="content" role="tabpanel" aria-labelledby="contracts-part-trigger">
			                            {!! Form::open(['name'=>'addprojectfrm', 'id'=>'addprojectfrm', 'route' => 'projects.store', 'method' => 'post', 'files' => true]) !!}
			                            	<div class="row">
				                                <div class="col-md-12">
					                                <div class="form-group">
					                                    {!! Form::label('contracts', 'Contracts *', ['for' => 'contracts']) !!}
					                                    {!! Form::textarea('contracts', '',['cols' => "50", 'class'=>'form-control text-editor']) !!}
					                                    @if($errors->has('tender_scope'))
					                                        <span class="invalid-feedback" role="alert">
					                                            <strong>{{ $errors->first('contracts') }}</strong>
					                                        </span>
					                                    @else
					                                        <span id="error-description" class="text-danger"></span>
					                                    @enderror
					                                </div>
					                            </div>
					                        </div>
					                        <div class="row">
				                                <div class="col-md-6">
					                                <div class="form-group">
					                                    {!! Form::label('document_path', 'Contracts Document *', ['for' => 'contracts_doc']) !!}
					                                    <div class="input-group">
					                                        <div class="custom-file">
					                                            {!! Form::file('document_path',['id' => 'contracts_doc', 'class'=>'custom-file-input']) !!}
					                                            {!! Form::label('document_path', 'Choose file', ['class' => 'custom-file-label']) !!}
					                                        </div>
					                                    </div>
					                                </div>
					                            </div>
					                        </div>

			                            	<div class="form-group">
				                                <a href="{{ url('projects') }}" class="btn btn-default btn-lg">Cancel</a>
				                                <button type="button" class="btn btn-outline-secondary btn-lg" onclick="previous();">Previous</button>
				                                <button type="button" class="btn btn-primary btn-lg" onclick="next();">Save & Next</button>
			                            	</div>
				                        {!! Form::close() !!}
			                        </div> -->
								</div>
			                </div>
			            </div>
			            
		            </div>
		            <!-- /.card -->
			    </div>
			</div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
@endsection

@push('script')

<script type="text/javascript" src="{{ asset('js/bs-stepper.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/project.js') }}"></script>
<script type="text/javascript">
    var stepper = '';
    $(document).ready(function () {
	  	stepper = new Stepper($('.bs-stepper')[0], {
        	linear: true,
        	animation: false,
        	selectors: {
			    steps: '.step',
			    trigger: '.step-trigger',
			    stepper: '.bs-stepper'
			}
      	});
	});

	function next() {
	  	stepper.next();
	}

	function previous() {
  		stepper.previous();
  	}

  	function Mynext() {
  		console.log('click');
  		$('#details-part-trigger').trigger('click');
  	}
</script>
@endpush