@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>
	    </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 value="{{ $country->id}}">
													{{ $country->name}}
												</option>
											@endforeach
											<option value="rest_of_world">Resto del Mundo</option>
										@endif
									</select>
									<p></p>

								</div>								
							</div>

							<div class="col-md-4">
								<div class="mb-3">
									<input type="text" name="amount" id="amount" class="form-control" placeholder="Cantidad">										
									<p></p>
								</div>	
							</div>

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

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

			<div class="card">							
				<div class="card-body">								
					<div class="row">							
						<div class="col-md-12">												
							<table class="table table-striped">
								<tr>									
									<th>ID</th>
									<th>Nombre</th>
									<th>Cantidad</th>
									<th>Accion</th>
								</tr>
								@if ($shippingCharges->isNotEmpty())
									@foreach( $shippingCharges as $shippingCharge )
										<tr>
											<td>{{ $shippingCharge->id }}</td>
											<td> 
												{{ ($shippingCharge->country_id == 'rest_of_world') ? 'Resto del Mundo' : $shippingCharge->name }} 
											</td>
											<td>${{ $shippingCharge->amount }}</td>
											<td>
												<a href="{{ route('shipping.edit', $shippingCharge->id) }} " class="btn btn-primary">Editar</a>
												<a href="javascript:void(0);" onclick="deleteRecord( {{ $shippingCharge->id }} );" class="btn btn-danger">Eliminar</a>
											</td>										
										</tr>
									@endforeach
								@endif
							</table>
						
						</div>
					</div>
				</div>							
			</div>
		
		<!-- /.card -->
	
@endsection


@section('customJs')

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

			$("button[type=submit]").prop('disabled', true);
			$.ajax({
				url: '{{ route("shipping.store") }}',
				type: 'post',
				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"]);
					}
				}			
			});
		});	


		function deleteRecord(id) {

	        var url = '{{ route("shipping.delete", "ID") }}';
	        var newUrl = url.replace("ID",id);

	        if (confirm("żEsta seguro que desea eliminar?")){

	            $.ajax({
	                url: newUrl,
	                type: 'delete',
	                data: {},
	                dataType: 'json',
	                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, 
	                success: function(response) {
	                    if (response["status"] == true) {
	                        window.location.href = "{{ route('shipping.create')}}";
	                    } else {
	                        window.location.href = "{{ route('shipping.create')}}";
	                    }
	                }
	            });
	        }
		}

	</script>

@endsection