@extends('layouts.master')

@section('content')
@php
    $status = config('custom.status');
@endphp
<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-3 card d-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px w-xxl-400px">
			<!--begin::Wrapper-->
			<div class="card-body px-6 px-lg-10 px-xxl-15 py-20">
				<!--begin::Nav-->
				<ul id="nav-stepper"
					class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold stepper stepper-pills stepper-column stepper-nav"
					style="display: block;">
					<!--begin::Nav item-->
					<div class="stepper-item current" data-kt-stepper-element="nav" id="cl1">
						<!--begin::Wrapper-->
						<div class="stepper-wrapper">
							<!--begin::Icon-->
							<div class="stepper-icon w-40px h-40px">
								<i class="ki-outline ki-check fs-2 stepper-check"></i>
								<span class="stepper-number">1</span>
							</div>
							<!--end::Icon-->
							<!--begin::Label-->
							<div class="stepper-label">
								<h3 class="stepper-title">Company Setting</h3>

							</div>
							<!--end::Label-->
						</div>
						<!--end::Wrapper-->
						<!--begin::Line-->
						<div class="stepper-line h-40px"></div>
						<!--end::Line-->
					</div>
					<!--end::Nav item-->
					<!--begin::Nav item-->
					<div class="stepper-item" data-kt-stepper-element="nav" id="cl2">
						<!--begin::Wrapper-->
						<div class="stepper-wrapper">
							<!--begin::Icon-->
							<div class="stepper-icon w-40px h-40px">
								<i class="ki-outline ki-check fs-2 stepper-check"></i>
								<span class="stepper-number">2</span>
							</div>
							<!--end::Icon-->
							<!--begin::Label-->
							<div class="stepper-label">
								<h3 class="stepper-title">DocuSign</h3>

							</div>
							<!--end::Label-->
						</div>
						<!--end::Wrapper-->
						<!--begin::Line-->
						<div class="stepper-line h-40px"></div>
						<!--end::Line-->
					</div>

						<div class="stepper-item" data-kt-stepper-element="nav" id="cl3">
						<!--begin::Wrapper-->
						<div class="stepper-wrapper">
							<!--begin::Icon-->
							<div class="stepper-icon w-40px h-40px">
								<i class="ki-outline ki-check fs-2 stepper-check"></i>
								<span class="stepper-number">3</span>
							</div>
							<!--end::Icon-->
							<!--begin::Label-->
							<div class="stepper-label">
								<h3 class="stepper-title">Twilio</h3>

							</div>
							<!--end::Label-->
						</div>
						<!--end::Wrapper-->
						<!--begin::Line-->
						<!-- <div class="stepper-line h-40px"></div> -->
						<!--end::Line-->
					</div>
					
				</ul>
				<!--end::Nav-->
			</div>
			<!--end::Wrapper-->
		</div>
		<div class="col-lg-9">
			<form action="{{route('setting.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">Company Setting</h2>

								<!--end::Notice-->
							</div>
							<div class="card-body p-9">
								<!--begin::Input group-->
							
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label fw-semibold fs-6">Company Name <span style="color:red">*</span></label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="hidden" name="id" id="id" value="{{!empty($data->id) ? $data->id : ''}}">
										<input type="text" name="company_name" id="company_name"
											class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
											placeholder="Company Name" value="{{!empty($data->company_name) ? $data->company_name : ''}}">
											@error('company_name')
                                                 <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">Attendies</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="attendies" id="attendies"
											class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
											placeholder="Attendies" value="{{!empty($data->attendies) ? $data->attendies : ''}}">
										<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">Address </label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="address" id="address"
											class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
											placeholder="Address" value="{{!empty($data->address) ? $data->address : ''}}">
											
										<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">City </label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="city" id="city"
											class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
											placeholder="City"  value="{{!empty($data->city) ? $data->city : ''}}">
											
										<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">State</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="state" id="state"
											class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
											placeholder="State" value="{{!empty($data->state) ? $data->state : ''}}">
										<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">Zip</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="zip" id="zip"
											class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
											placeholder="Zip" value="{{!empty($data->zip) ? $data->zip : ''}}">								
										
										<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">Company Email <span style="color:red">*</span></label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="email" name="company_email" id="company_email"
											class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
											placeholder="Company Email" value="{{!empty($data->company_email) ? $data->company_email : ''}}">								
										@error('company_email')
                                                <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">Phone # <span style="color:red">*</span></label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="phone" id="phone"
											class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
											placeholder="Phone" value="{{!empty($data->phone) ? $data->phone : ''}}">								
										@error('phone')
                                                <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">Fax #</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="FAX" id="FAX"
											class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
											placeholder="Fax #" value="{{!empty($data->FAX) ? $data->FAX : ''}}">								
										
										<div
											class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
										</div>
									</div>
								</div>			
																	
							
							</div>
						</div>
					</div>
					<div class="card-body pb-0 tab-pane fade show" id="kt_stats_widget_16_tab_2">
						<div class="w-100">
							<!--begin::Heading-->
							<div class="">
								<h2 class="fw-bold text-gray-900">DocuSign</h2>
							</div>
							<div class="card-body p-9">
							
								
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label fw-semibold fs-6">DocuSign Integration Key</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="docusign_apk" id="docusign_apk"
											class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
											placeholder="DocuSign Integration Key" value="{{!empty($data->docusign_apk) ? $data->docusign_apk : ''}}">
											@error('docusign_apk')
                                                <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">DocuSign Secret Key</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="docusign_secret" id="docusign_secret"
											class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
											placeholder="DocuSign Secret Key" value="{{!empty($data->docusign_secret) ? $data->docusign_secret : ''}}">
										<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">DocuSign Template ID</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="docusign_template_id" id="docusign_template_id"
											class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
											placeholder="" value="{{!empty($data->docusign_template_id) ? $data->docusign_template_id : ''}}">
										<div
											class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
										</div>
									</div>
								</div>
								
							
								
							</div>
						</div>
					</div>

					<div class="card-body pb-0 tab-pane fade show" id="kt_stats_widget_16_tab_3">
						<div class="w-100">
							<!--begin::Heading-->
							<div class="">
								<h2 class="fw-bold text-gray-900">Twilio</h2>
							</div>
							<div class="card-body p-9">
							
								
								<div class="row mb-6">
									<label class="col-lg-4 col-form-label fw-semibold fs-6">Twilio Account SID</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="twilio_account_sid" id="twilio_account_sid"
											class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
											placeholder="Twilio Account SID" value="{{!empty($data->twilio_account_sid) ? $data->twilio_account_sid : ''}}">
											
										<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">Twilio Auth Token</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="twilio_auth_token" id="twilio_auth_token"
											class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
											placeholder="Twilio Auth Token"  value="{{!empty($data->twilio_auth_token) ? $data->twilio_auth_token : ''}}">
										<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">Twilio Application SID</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="twilio_application_sid" id="twilio_application_sid"
											class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
											placeholder="" value="{{!empty($data->twilio_application_sid) ? $data->twilio_application_sid : ''}}">
										<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">Phone Number</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="twillio_number" id="twillio_number"
											class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
											placeholder="Phone Number" value="{{!empty($data->twillio_number) ? $data->twillio_number : ''}}">
										<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">Admin Email</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="admin_email" id="admin_email"
											class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
											placeholder="Admin Email" value="{{!empty($data->admin_email) ? $data->admin_email : ''}}">
										<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">From Email</label>
									<div class="col-lg-8 fv-row fv-plugins-icon-container">
										<input type="text" name="form_email" id="form_email"
											class="form-control form-control-lg form-control-solid mb-3 mb-lg-0"
											placeholder="From Email" value="{{!empty($data->form_email) ? $data->form_email : ''}}"> 
										<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-3 text-center">
							<button type="button" id="stepper-prev-btn"
								class="btn btn-primary btn-lg me-3 mb-xxl-12 d-none">Previous</button>
						</div>
						<div class="col-lg-6 text-center">
							<button type="submit"
								class="tab-action btn btn-primary btn-lg me-3 mb-xxl-12 d-none">Save</button>
							<button type="reset"
								class="tab-action btn btn-primary btn-lg me-3 mb-xxl-12 d-none">Cancel</button>
						</div>

						<div class="col-lg-3 text-center">
							<button type="button" id="stepper-next-btn"
								class="btn btn-primary btn-lg me-3 mb-xxl-12">Next</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();
		}
	});
</script>
@endsection()