@extends('layouts.master')

@section('content')
<style>
   .switch {

position: relative;

display: block;

vertical-align: top;

width: 63px;

height: 20px;

/* padding: 3px; */

margin: 0 10px 10px 20px;

background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);

background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);

border-radius: 18px;

box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);

cursor: pointer;

box-sizing: content-box;

}



.switch-input {

position: absolute;

top: 0;

left: 0;

opacity: 0;

box-sizing: content-box;

}



.switch-label {

width: 66px;

position: relative;

display: block;

height: 33px;

font-size: 14px;

text-transform: uppercase;

background: red;

border-radius: inherit;

box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);

box-sizing: content-box;

}



.switch-label:before,

.switch-label:after {

position: absolute;

top: 50%;

margin-top: -.5em;

line-height: 1;

-webkit-transition: inherit;

-moz-transition: inherit;

-o-transition: inherit;

transition: inherit;

box-sizing: content-box;

}



.switch-label:before {

content: attr(data-off);

right: 11px;

color: #FFFFFF;

text-shadow: 0 1px rgba(255, 255, 255, 0.5);

}



.switch-label:after {

content: attr(data-on);

left: 11px;

color: #FFFFFF;

text-shadow: 0 1px rgba(0, 0, 0, 0.2);

opacity: 0;

}



.switch-input:checked~.switch-label {

background: green;

box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);

}



.switch-input:checked~.switch-label:before {

opacity: 0;

}



.switch-input:checked~.switch-label:after {

opacity: 1;

}



.switch-handle {

position: absolute;

top: 5px;

right: 34px;

width: 24px;

height: 24px;

background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);

background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);

border-radius: 100%;

box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);

}



.switch-handle:before {

content: "";

position: absolute;

top: 50%;

left: 50%;

margin: -6px 0 0 -6px;

width: 12px;

height: 12px;

background: linear-gradient(to bottom, #eeeeee, #FFFFFF);

background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);

border-radius: 6px;

box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);

}



.switch-input:checked~.switch-handle {

left: 39px;

box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);

}



.switch-label,

.switch-handle {

transition: All 0.3s ease;

-webkit-transition: All 0.3s ease;

-moz-transition: All 0.3s ease;

-o-transition: All 0.3s ease;

}
</style>
<div class="content d-flex flex-column flex-column-fluid">
	<!--begin::Container-->
	<div class="col-lg-12  d-flex flex-column flex-xl-row flex-row-fluid gap-10">
		
		<div class="col-lg-10 offset-1">
			<form action="{{route('outcallscript.store')}}" method="post" enctype="multipart/form-data">
				@csrf

				<div class="card mb-12 mb-xxl-12 tab-content">
					<div class="card-body pb-0 tab-pane fade show active" id="kt_stats_widget_16_tab_1">
						<div class="w-100">
							<div class="">
								<!--begin::Title-->
								<h2 class="fw-bold text-gray-900">Outcall Script Add</h2>

								<!--end::Notice-->
							</div>
							<div class="card-body p-9">							
								<div class="row mb-6">
									<!--begin::Label-->
									
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label fw-semibold fs-6">Title  <span style="color:red">*</span></label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="title_question" id="title_question" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Title">	
										<input type="hidden" name="created_at" id="created_at" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" value="2025-12-08">								
										@error('title_question')
                                                 <p class="text-danger">{{ $message }}</p>
                                         @enderror
										<div
											class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
										</div>
									</div>

								</div>
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label fw-semibold fs-6"> Script <span style="color:red">*</span></label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<textarea name="script_anwser" id="script_anwser" cols="30" rows="5" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="Script"></textarea>										
										@error('script_anwser')
                                                 <p class="text-danger">{{ $message }}</p>
                                         @enderror
										<div
											class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
										</div>
									</div>
								</div>
								
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label fw-semibold fs-6"> Type</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<select name="type" id="type" class='form-control'>
											<option value="">Please select</option>
											<option value="FAQ">FAQ</option>
											<option value="SCRIPT">SCRIPT</option>
										</select>
										<div
											class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
										</div>
									</div>
								</div>

										
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label fw-semibold fs-6"> Show on Profile <span style="color:red">*</span></label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										 <label class="switch mb-0">
											<input class="switch-input" type="checkbox" id="status" name="faq_id" onclick="statusChange(this)" value="no" >
											<span class="switch-label fw-bold" data-on="" data-off=""></span>
											<span class="switch-handle"></span>
										</label>
										<div
											class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
										</div>
									</div>
								</div>
								
							</div>
						</div>
					</div>					
					<div class="col-lg-12 row p-9 ">					
						<div class="col-lg-6 ">
							<button type="submit"
								class="tab-action btn btn-primary btn-lg me-3 mb-xxl-12">Save</button>
							<button type="reset"
								class="tab-action btn btn-primary btn-lg me-3 mb-xxl-12">Cancel</button>
						</div>

						
					</div>
				</div>
			</form>
		</div>

	</div>
</div>
@endsection()
@section('script')
<script>

	$("#stepper-next-btn").click(function () {
		$("#stepper-prev-btn").removeClass("d-none");
		
		$("#stepper-prev-btn").show();
		var cntrl = $("#nav-stepper .stepper-item.current");
		$(cntrl).removeClass("current");
		$(cntrl).next().addClass("current");

		var tabContent = $(".tab-content .card-body.tab-pane.active");
		$(tabContent).removeClass("active");
		$(tabContent).next().addClass("active");

		if ($(tabContent).next().next(".card-body.tab-pane").length == 0) {
			$("#stepper-next-btn").hide();
			$(".tab-action").removeClass("d-none");
		}
	});
	$("#stepper-prev-btn").click(function () {
		$(".tab-action").addClass("d-none")
		$("#stepper-next-btn").show();
		
		var cntrl = $("#nav-stepper .stepper-item.current");
		$(cntrl).prev().addClass("current");
		$(cntrl).removeClass("current");

		var tabContent = $(".tab-content .card-body.tab-pane.active");
		$(tabContent).prev().addClass("active");
		$(tabContent).removeClass("active");

		if ($(tabContent).prev().prev(".card-body.tab-pane").length == 0) {
			$("#stepper-prev-btn").hide();
		}
	});

	  function statusChange(element,id) {
            if (element.checked) {
                newStatus = 'yes';
            } else {
                newStatus = 'no';
            }
           $('#status').val(newStatus);
        };
</script>
@endsection()