@extends('layouts.app')

@section('title') Address @endsection

@section('content')
<div class="container py-5">
	<div class="row">
        <div class="col-xl-3 col-lg-4 py-5" style="background: #fff8e8;">
            @include('partials.customer_sidebar')
        </div>

		<div class="col-lg-8 col-xl-9">
			<div class="mb-5">
                <div>
				    <p>Shipping Address</p>
                </div>
                <hr>

				<div class="card-body">
                    <form id="form-address" action="@if ($address){{ route('addresses.update') }}@else{{ route('addresses.store') }}@endif" method="POST">
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label class="form-label" for="first-name">First Name</label>
                                <input type="text" id="first-name" class="form-control-plaintext" name="first_name" value="@if ($address){{ $address->name }}@endif">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="last-name">Last Name</label>
                                <input type="text" id="last-name" class="form-control-plaintext" name="last_name" value="@if ($address){{ $address->name }}@endif">
                            </div>
                        </div>

                       <div class="form-group row">
                            <div class="col-md-6">
                                <label class="form-label" for="street">Street</label>
                                <input type="text" id="street" class="form-control-plaintext" name="street" value="@if ($address){{ $address->street }}@endif">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="city">City</label>
                                <input type="text" id="city" class="form-control-plaintext" name="city" value="@if ($address){{ $address->city }}@endif">
                            </div>
                        </div>

                       <div class="form-group row">
                            <div class="col-md-6">
                                <label class="form-label" for="postcode">Postcode</label>
                                <input type="text" id="postcode" class="form-control-plaintext" name="postcode" value="@if ($address){{ $address->postcode }}@endif">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label" for="state">State</label>
                                <input type="text" id="state" class="form-control-plaintext" name="state" value="@if ($address){{ $address->state }}@endif">
                            </div>
                        </div>

                        <div class="form-group row">
                        	<div class="col-md-6">
                            	<label class="form-label" for="phone-number">Phone Number</label>
                            	<input type="text" id="phone-number" class="form-control-plaintext" name="phone_number" value="@if ($address){{ $address->phone_number }}@endif">
                        	</div>
                        </div>

                       <div class="text-center mt-4">
                       		<button type="submit" class="btn btn-login">Save Changes</button>
                       </div>
                    </form>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection

@section('js')
<script>
    $('#form-address').submit(function(e)
    {
        $.Event(e).preventDefault();

        let form = $(this);

        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: $(this).serialize(),
            dataType: 'json'

        }).done(function(data)
        {
        	showNoty(data);
        });
    });
</script>
@endsection