@extends('admin.layouts.base')

@section('content')
<div class="main-content">
	<div class="page-content">
		<div class="container-fluid">
            <div class="page-header">
                <div class="page-leftheader">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{route('home')}}">Home</a></li>
                        <li class="breadcrumb-item" aria-current="page"><a href="{{ route('openai.prompt-input.index') }}">openAIPromptInput</a></li>
                    </ol>
                </div>
            </div>
			<div class="content">
				<div class="card">
					<form action="{{ route('openai.prompt-input.next') }}" method="POST">
						@csrf

						<div class="card-body">
							<div class="row">
								<div class="col-xl-12">

									<!-- Tabs Navigation -->
									<ul class="nav nav-tabs border-0 justify-content-center mb-4 tab-css" role="tablist">
										<li class="nav-item">
											<a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">Tab 1</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Tab 2</a>
										</li>
									</ul>
								</div>

								<div class="col-xl-12">
									<!-- Tab Content -->
									<div class="tab-content">
										<div class="tab-pane p-3 active" id="tabs-1" role="tabpanel">
											@include('admin.openai_prompts_input.fields')
										</div>
										<div class="tab-pane p-3" id="tabs-2" role="tabpanel">
											<p>Second Panel</p>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="card-footer">
							<button type="submit" class="btn btn-primary">Next</button>
							<a href="{{ route('openai.prompt-input.index') }}" class="btn btn-default">
								Cancel
							</a>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection
@section('style')
<style>
	.tab-css .nav-link {
		font-size: 16px;
		display: inline-block;
		text-align: center;
		width: 24%;
		background: #eee;
		padding: 5px;
		border-radius: 30px;
		border: 1px solid #eee;
	}

	.tab-css .active {
		font-weight: 500;
		color: #fff;
		background-color: #6958be;
		border-color: #6958be;
	}
</style>

@endsection