@extends('admin.layouts.app')

@section('content')

	<div class="row">
	    <div class="col-12">
	        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
	            <h4 class="mb-sm-0">Gestion de Envios</h4>
	            <div class="page-title-right">
	                <a href="{{ route('shipping.create') }}" class="btn btn-primary">Volver</a>
	            </div>
	        </div>
	    </div>
	</div>

			@include('admin.message')

			<form action="" method="post" id="shippingForm" name="shippingForm">

				<div class="card">
					<div class="card-body">
						<div class="row">

							<div class="col-md-4">
								<div class="mb-3">
									<select name="country" id="country" class="form-select">
										<option value="">Seleccione un Pais</option>
										@if ($countries->isNotEmpty())
											@foreach($countries as $country)
												<option {{ ($shippingCharge->country_id == $country->id) ? 'selected' : ''}} value="{{ $country->id}}">
													{{ $country->name}}
												</option>
											@endforeach
											<option {{ ($shippingCharge->country_id == 'rest_of_world') ? 'selected' : ''}} value="rest_of_world">Resto del Mundo</option>
										@endif
									</select>
									<p></p>

								</div>
							</div>

							<div class="col-md-4">
								<div class="mb-3">
									<input value="{{ $shippingCharge->amount }}" type="text" name="amount" id="amount" class="form-control" placeholder="Monto">
									<p></p>
								</div>
							</div>

							<div class="col-md-4">
								<div class="mb-3">
									<button type="submit" class="btn btn-primary">Actualizar</button>
								</div>
							</div>

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

		<!-- /.card -->
	
@endsection


@section('customJs')

	<script>
		$("#shippingForm").submit(function(event){
			event.preventDefault();
			var element = $(this);

			$("button[type=submit]").prop('disabled', true);
			$.ajax({
				url: '{{ route("shipping.update", $shippingCharge->id) }}',
				type: 'put',
				data: element.serializeArray(),
				dataType: 'json',
				success: function(response){

                    $("button[type=submit]").prop('disabled', false);
					if (response["status"] == true) {

						window.location.href = "{{ route('shipping.create')}}";

					} else {

						var errors = response['errors'];

						if(errors["country"]) {
							$("#country").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['country']);
						} else {
							$("#country").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
						}

						if(errors["amount"]){
							$("#amount").addClass('is-invalid').siblings('p').addClass('invalid-feedback').html(errors['amount']);
						} else {
							$("#amount").removeClass('is-invalid').siblings('p').removeClass('invalid-feedback').html("");
						}
					}

				}, error: function(jqXHR, exception){
					console.log("Something Went Wrong");
				}
			});
		});

		$("#name").change(function(){
			element = $(this);
			$("button[type=submit]").prop('disabled', true)
			$.ajax({
				url: '{{ route("getSlug") }}',
				type: 'get',
				data: {title: element.val()},
				dataType: 'json',
				success: function(response){
					$("button[type=submit]").prop('disabled', false)
					if(response["status"] == true) {
						$("#slug").val(response["slug"]);
					}
				}
			});
		});

	</script>

@endsection