@extends('layouts/contentLayoutEmployee')

@section('title', __('locale.Request'))

{{-- @section('content') --}}

@section('vendor-style')
<!-- vendor css files -->
<link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/wizard/bs-stepper.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
@endsection


@section('page-style')
<!-- Page css files -->
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-wizard.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">

@endsection

@section('content')
<section id="multiple-column-form">
	<div class="horizontal-wizard">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">{{ __('locale.Request') }}</h4>
				</div>
				<div class="card-body">
					<form class="form-add-request">
						@csrf
						<div class="row">
							<div class="col-md-6">
								<div class="form-group">
									<label for="contract_id" class="form-label">Contrato</label>
									<select class="select2" name="contract_id" id="contract_id" required>
										<option value="" selected disabled>Selecione um contrato</option>
										@if ($contracts)
										@foreach ($contracts as $contract)
										<option value="{{ $contract->id }}">Contrato #{{ $contract->id }}</option>
										@endforeach
										@endif
									</select>
								</div>
							</div>
							<div class="col-md-6 col-12">
								<div class="mb-1">
									<label class="form-label" for="request_type">Tipo de Solicitação</label>
									<select id="request_type" class="select2" placeholder="Tipo Solicitação" name="request_type" required>
										<option value="" selected disabled>Selecione uma opção</option>
										@if ($request_types)
										@foreach ($request_types as $request_type)
										<option value="{{ $request_type->id }}">{{ $request_type->type_request }}</option>
										@endforeach
										@endif
									</select>
								</div>
							</div>
							<div class="col-md-6 col-12">
								<div class="mb-1">
									<label class="form-label" for="company_id">Cliente</label>
									<select name="company_id" id="company_id" class="select2">
										<option value="" selected disabled>Selecione uma opção</option>
										<option value="1">Opção Teste</option>
									</select>
								</div>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<label for="holders" class="form-label">Beneficiários</label>
									<select class="select2" name="holders" id="holders" multiple required>
										<option value="71">Opção Teste</option>
										<option value="82">Opção Teste</option>
										@if ($holders)
										@foreach ($holders as $holder)
										<option value="{{ $holder->id }}">{{ $holder->name }}</option>
										@endforeach
										@endif
									</select>
								</div>
							</div>
							<div class="col-md-6">
								<label class="form-label" for="protocol_number">Número de Protocolo</label>
								<input type="text" id="protocol_number" class="form-control" name="protocol_number" placeholder="Número de Protocolo" required />
							</div>
							<div class="col-md-6">
								<label class="form-label" for="status">Status</label>
								<select id="status" class="select2" placeholder="Status" name="status" required>
									<option selected disabled>Selecione um Status</option>
									<option value="1">ATIVA</option>
									<option value="2">ENCERRADA</option>
									<option value="3">COM PENDENCIAS - SOLICITANTE</option>
									<option value="4">COM PENDENCIAS - OPERADORA</option>
								</select>
							</div>
							<div class="col-md-6">
								<div class="form-group">
									<label for="employee_id" class="form-label">Responsável</label>
									<select class="select2" name="employee_id" id="employee_id" required>
										<option value="" selected disabled>Selecione Responsável</option>
										<option value="1">Opção Teste</option>
										@if ($employees)
										@foreach ($employees as $employee)
										<option value="{{ $employee->id }}">{{ $employee->name }}</option>
										@endforeach
										@endif
									</select>
								</div>
							</div>
							<div class="col-md-6">
								<div class="mb-1">
									<label for="documents" class="form-label">Documentos</label>
									<input type="file" id="documents" class="form-control" name="documents[]" multiple />
								</div>
							</div>

						</div>
					</form>
				</div>
				<div class="card-footer">
					<div class="row mt-2">
						<div class="col-12">
							<button type="button" class="btn btn-primary me-1" id="btnAddRequests">{{ __('locale.Table.Contract.Column.AddButton') }}</button>
							<button type="reset" class="btn btn-outline-secondary" id="btnReset">{{ __('locale.Table.Contract.Column.BackButton') }}</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>



@endsection
@section('vendor-script')
<!-- vendor files -->
<script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/wizard/bs-stepper.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/extensions/toastr.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/jquery-mask/jquery.mask.js')) }}"></script>
<script src="{{ asset(mix('js/scripts/extensions/ext-component-toastr.js')) }}"></script>
<script src="{{ asset(mix('js/scripts/extensions/brdocs.cpfcnpjValidator.js')) }}"></script>
@endsection
@section('page-script')
<script>
	var request = null;


	$(function() {

		$('.select2').each(function() {
			var $this = $(this);
			$this.wrap('<div class="position-relative"></div>');
			$this.select2({
				dropdownAutoWidth: true,
				width: '100%',
				dropdownParent: $this.parent()
			});
		});

		$('#btnAddRequests').on("click", async function(eve) {

			eve.preventDefault();

			$(".form-add-request").submit();

		});

		$(".form-add-request").on("submit", async function(eve) {

			eve.preventDefault();

			if ($(".form-add-request").get(0).reportValidity()) {


				if (request === null) {

					let payload = new FormData($(".form-add-request").get(0));

					let {
						data: json,
						...response
					} = await axios({
						url: `{{ route('api.requests.store') }}`,
						method: 'post',
						data: payload,
						headers: {
							"Authorization": "Bearer {{ session('Authorization') }}",
							"Content-Type": "multipart/form-data"
						}
					}).catch((e) => {

						let response = e.response;

						@if(env('APP_DEBUG'))
						console.warn(e)
						@endif

						if (response.status === 400 || response.status === 422) {
							Swal.fire({
								title: 'Ops!',
								text: response.data.message,
								icon: 'error',
								cancelButtonText: '{{ __("locale.Table.suppliers.Column.CloseButton") }}'
							})
						} else if (response.status === 404) {
							Swal.fire({
								title: 'Ops!',
								text: '{{ __("locale.Table.suppliers.Column.RequestedNotFound") }}',
								icon: 'error',
								cancelButtonText: '{{ __("locale.Table.suppliers.Column.CloseButton") }}'
							})
						} else {

							Swal.fire({
								title: 'Ops!',
								text: '{{ __("locale.Table.suppliers.Column.RegisterError") }}',
								icon: 'error',
								cancelButtonText: '{{ __("locale.Table.suppliers.Column.CloseButton") }}'
							})

						}

						return false;

					});

					if (response.status === 200 || response.status === 201) {

						request_registration = json;

					}

				}

				$(".form-add-request-iteration").submit();

			}

		});



		$(".form-add-request-iteration").on("submit", async function(eve) {

			eve.preventDefault();

			if (this.checkValidity()) {

				let json = Object.fromEntries((new FormData(this)).entries());


				try {

					let {
						data: response
					} = await axios({
							url: `{{ route('api.request-iterations.store') }}`,
							method: 'post',
							data: json,
							headers: {
								"Authorization": "Bearer {{ session('Authorization') }}"
							}
						})
						.catch((e) => {

							let response = e.response;

							@if(env('APP_DEBUG'))
							console.warn(e)
							@endif

							if (response.status === 400 || response.status === 422) {
								Swal.fire({
									title: 'Ops!',
									text: response.data.message,
									icon: 'error',
									cancelButtonText: '{{ __("locale.Table.suppliers.Column.CloseButton") }}'
								})
							} else if (response.status === 404) {
								Swal.fire({
									title: 'Ops!',
									text: '{{ __("locale.Table.suppliers.Column.RequestedNotFound") }}',
									icon: 'error',
									cancelButtonText: '{{ __("locale.Table.suppliers.Column.CloseButton") }}'
								})
							} else {

								Swal.fire({
									title: 'Ops!',
									text: '{{ __("locale.Table.suppliers.Column.RegisterError") }}',
									icon: 'error',
									cancelButtonText: '{{ __("locale.Table.suppliers.Column.CloseButton") }}'
								})

							}

							return false;

						});

					Swal.fire({
						title: 'Uhuul!',
						text: '{{ __("locale.Table.suppliers.Column.AddSuccess") }}',
						icon: 'success',
					}).then((_) => {
						if (_.isConfirmed) {
							window.location.href =
								"{{ route('dashboard.requests.index') }}"
						}
					})


				} catch (e) {

				}
			}

		});

		$('#btnReset').on('click', function() {
			window.location.href = "{{ route('dashboard.requests.index') }}";
		});

	});
</script>
@endsection