<template>
  <div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-xl" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<span class="modal-title text-uppercase" id="exampleModalLabel">{{title}}</span>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<form name="multiStepForm" class="row g-3 form-validation" role="form" novalidate>
						<div class="animate-switch-container" ng-switch on="stage" ng-class="{forward: direction, backward:!direction}">
							<div class="animate-switch" ng-switch-default>
								<div class="row py-2">
									<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
										<h4 class="fw-normal text-center text-uppercase">Patient Information</h4>
										<hr>
									</div>
								</div>
								<div class="row py-2">
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
										<div class="form-group">
											<label for="tb-name">Name:</label>
											<input type="text" class="form-control border-sm-danger" id="tb-name" name="name" ng-maxlength="80" ng-model="formParams.name" required ng-class="{'input-error': formValidation && multiStepForm.name.$error.required}" >
											<span class="text-danger" ng-show="multiStepForm.name.$error.maxlength">Max character length reached.</span>
										</div>
									</div>
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
										<div class="form-group">
											<label for="tb-age">Age:</label>
											<input type="text" class="form-control border-sm-danger" id="tb-age" name="age" ng-maxlength="4" ng-model="formParams.age" required ng-class="{'input-error': formValidation && multiStepForm.age.$error.required}" >
											<span class="text-danger" ng-show="multiStepForm.age.$error.maxlength">Max character length reached.</span>
										</div>
									</div>
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
										<div class="form-group">
											<label for="tb-sex">Sex:</label>
											<fieldset id="sexgroup1" class="border-sm-danger">
												<input type="radio" ng-value="0" ng-model="formParams.sex" > Male
												<input type="radio" ng-value="1" ng-model="formParams.sex" > Female
											</fieldset>
										</div>
									</div>
								</div>
								<div class="row py-1">
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-6">
										<div class="form-group">
											<label for="tb-address">Address:</label>
											<input type="text" class="form-control border-sm-danger" id="tb-address" name="address" ng-maxlength="120" ng-model="formParams.address" required ng-class="{'input-error': formValidation && multiStepForm.address.$error.required}" >
											<span class="text-danger" ng-show="multiStepForm.address.$error.maxlength">Max character length reached.</span>
										</div>
									</div>
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-2">
										<div class="form-group">
											<label for="tb-city">City:</label>
											<input type="text" class="form-control border-sm-danger" id="tb-city" name="city" ng-maxlength="30" ng-model="formParams.city" required ng-class="{'input-error': formValidation && multiStepForm.city.$error.required}" >
											<span class="text-danger" ng-show="multiStepForm.city.$error.maxlength">Max character length reached.</span>
										</div>
									</div>
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-2">
										<div class="form-group">
											<label for="tb-state">State:</label>
											<input type="text" class="form-control border-sm-danger" id="tb-state" name="state" ng-maxlength="30" ng-model="formParams.state" required ng-class="{'input-error': formValidation && multiStepForm.state.$error.required}" >
											<span class="text-danger" ng-show="multiStepForm.state.$error.maxlength">Max character length reached.</span>
										</div>
									</div>
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-2">
										<div class="form-group">
											<label for="tb-zipCode">Zip Code:</label>
											<input type="text" class="form-control border-sm-danger" id="tb-zipCode" name="zipCode" ng-maxlength="10" ng-model="formParams.zipCode" required ng-class="{'input-error': formValidation && multiStepForm.zipCode.$error.required}" >
											<span class="text-danger" ng-show="multiStepForm.zipCode.$error.maxlength">Max character length reached.</span>
										</div>
									</div>
								</div>
								<div class="row py-1">
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-3">
										<div class="form-group">
											<label for="tb-homePhone">Home Phone:</label>
											<input type="text" class="form-control" id="tb-homePhone" name="homePhone" ng-maxlength="30" ng-model="formParams.homePhone" >
										</div>
									</div>
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-3">
										<div class="form-group">
											<label for="tb-cellPhone">Cell Phone:</label>
											<input type="text" class="form-control border-sm-danger" id="tb-cellPhone" name="cellPhone" ng-maxlength="30" ng-model="formParams.cellPhone" required ng-class="{'input-error': formValidation && multiStepForm.cellPhone.$error.required}" >
											<span class="text-danger" ng-show="multiStepForm.cellPhone.$error.maxlength">Max character length reached.</span>
										</div>
									</div>
									<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
										<div class="form-group">
											<label for="tb-email">Email:</label>
											<input type="email" class="form-control" id="tb-email" name="email" ng-maxlength="100" ng-model="formParams.email">
										</div>
									</div>
								</div>
								<div class="row py-1">
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
										<div class="form-group">
											<label for="tb-birthDate">Birthdate:</label>
											<input type="text" class="form-control border-sm-danger" id="tb-birthDate" name="birthDate" ng-maxlength="30" ng-model="formParams.birthDate" required ng-class="{'input-error': formValidation && multiStepForm.birthDate.$error.required}" >
											<span class="text-danger" ng-show="multiStepForm.birthDate.$error.maxlength">Max character length reached.</span>
										</div>
									</div>
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-8">
										<div class="form-group">
											<label for="tb-occupation">Occupation:</label>
											<input type="text" class="form-control border-sm-danger" id="tb-occupation" name="occupation" ng-maxlength="100" ng-model="formParams.occupation" required ng-class="{'input-error': formValidation && multiStepForm.occupation.$error.required}" >
											<span class="text-danger" ng-show="multiStepForm.occupation.$error.maxlength">Max character length reached.</span>
										</div>
									</div>
								</div>
								<div class="row py-1">
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-12">
										<div class="form-group">
											<label for="tb-ssn">Social Security Number (REQUIRED IF YOU HAVE INSURANCE):</label>
											<input type="text" class="form-control" id="tb-ssn" name="ssn" ng-maxlength="30" ng-model="formParams.ssn" >
										</div>
									</div>
								</div>
								<div class="row py-1">
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-12">
										<div class="form-group">
											<label for="tb-referring">Whom may we thank for referring you?</label>
											<input type="text" class="form-control" id="tb-thank" name="referring" ng-maxlength="300" ng-model="formParams.referring" >
										</div>
									</div>
								</div>
								<div class="row py-2">
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-12">
										<label for="tb-name" class="fw-bold text-danger">IN CASE OF EMERGENCY, CONTACT</label>
									</div>
								</div>
								<div class="row py-1">
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-3">
										<div class="form-group">
											<label for="tb-eName">Name:</label>
											<input type="text" class="form-control border-sm-danger" id="tb-eName" name="eName" ng-maxlength="30" ng-model="formParams.eName" required ng-class="{'input-error': formValidation && multiStepForm.eName.$error.required}" >
											<span class="text-danger" ng-show="multiStepForm.eName.$error.maxlength">Max character length reached.</span>
										</div>
									</div>
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-3">
										<div class="form-group">
											<label for="tb-eRelationShip">Relationship:</label>
											<input type="text" class="form-control border-sm-danger" id="tb-eRelationShip" name="eRelationShip" ng-maxlength="30" ng-model="formParams.eRelationShip" required ng-class="{'input-error': formValidation && multiStepForm.eRelationShip.$error.required}" >
											<span class="text-danger" ng-show="multiStepForm.eRelationShip.$error.maxlength">Max character length reached.</span>
										</div>
									</div>
									<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
										<div class="form-group">
											<label for="tb-ePhone">Phone:</label>
											<input type="text" class="form-control border-sm-danger" id="tb-ePhone" name="ePhone" ng-maxlength="100" ng-model="formParams.ePhone" required ng-class="{'input-error': formValidation && multiStepForm.ePhone.$error.required}" ng-model-options="{ updateOn: 'blur' }" required>
											<span class="text-danger" ng-show="multiStepForm.ePhone.$error.maxlength">Max character length reached.</span>
										</div>
									</div>
								</div>
								
								<div class="row py-2">
									<div class="col-md-12">
										<button class="btn btn-primary float-end" type="submit" id="submit" ng-click="next('stage1')">Next</button>
									</div>
								</div>
							</div>
							
							<div class="animate-switch" ng-switch-when="stage1">
								<div class="row py-2">
									<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
										<h4 class="fw-normal text-center text-uppercase">insurance</h4>
										<hr>
									</div>
								</div>
								<div class="row py-1">
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-6">
										<div class="form-group">
											<label for="tb-name">Person responsible for this Account:</label>
											<input type="text" class="form-control" id="tb-insuFirst" name="insuFirst" ng-maxlength="30" ng-model="formParams.insuFirst" >
										</div>
									</div>
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-6">
										<div class="form-group">
											<label for="tb-age">Insurance Co.:</label>
											<input type="text" class="form-control" id="tb-insuTwo" name="insuTwo" ng-maxlength="30" ng-model="formParams.insuTwo" >
										</div>
									</div>
								</div>
								<div class="row py-1">
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-6">
										<div class="form-group">
											<label for="tb-name">Subscriber's Name:</label>
											<input type="text" class="form-control" id="tb-insuThree" name="insuThree" ng-maxlength="30" ng-model="formParams.insuThree" >
										</div>
									</div>
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-6">
										<div class="form-group">
											<label for="tb-age">ID #:</label>
											<input type="text" class="form-control" id="tb-insuFour" name="insuFour" ng-maxlength="30" ng-model="formParams.insuFour" >
										</div>
									</div>
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-6">
										<div class="form-group">
											<label for="tb-age">Group #:</label>
											<input type="text" class="form-control" id="tb-insuFive" name="insuFive" ng-maxlength="30" ng-model="formParams.insuFive" >
										</div>
									</div>
								</div>
								<div class="row py-1">
									<div class="col-xs-4 col-sm-4 col-md-4 col-lg-6">
										<div class="form-group">
											<label for="tb-name">Subscriber's D.O.B:</label>
											<input type="text" class="form-control" id="tb-insuSix" name="insuSix" ng-maxlength="30" ng-model="formParams.insuSix" >
										</div>
									</div>
								</div>
								<div class="row py-2">
									<div class="col-md-12">
										<button class="btn btn-primary float-end" type="submit" id="submit" ng-show="formParams.id === undefined" ng-click="addItem(formParams)">Register</button>
										<button class="btn btn-primary float-end" type="submit" id="submit" ng-show="formParams.id !== undefined" ng-click="updateItem(formParams)">Update</button>
										<button type="button" class="btn btn-info" ng-click="back('')">Back</button>
									</div>
								</div>
							</div>

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


	<div class="modal fade" id="deleteItemModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-md">
			<div class="modal-content">
				<div class="modal-header">
					<span class="modal-title" id="exampleModalLabel">Delete Patient</span>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					Are you sure you want to delete {{formParams.name}} ?
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-danger" ng-click="deleteItem(formParams)">Delete</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "PatientMultiForm",
  props: {
  },
  data() {
    return {
    }
  },
  methods: {
  },
  computed: {
    ...mapState(["isRTL"]),
  },
};
</script>
