@extends('web.layout.master')

@section('content')

<div class="container" >
    <div class="row justify-content-center">
        <div class="col-sm-7 mx-auto" >
            <div class="text-center mt-4 text-black font-weight-bold">
                <label class="fs-1">My Account</label>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-end" >
            <div class="mt-4 text-black font-weight-bold">
                <a  href="{{ route('my-gear') }}" class="">See my saved models and parts</a>
            </div>
        </div>
    </div>

    @foreach (['danger', 'warning', 'success', 'info'] as $msg)
        @if(Session::has('alert-' . $msg))

        <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}</p>
        @endif
    @endforeach
    <div class="row">
        <div class="col-sm-10" >
            <div class=" mt-5 text-black font-weight-bold">
                <label class="fs-3">Hello, {{ Auth::user()->firstname.' '.Auth::user()->lastname }}</label>
                <p>You are logged in as {{ Auth::user()->emailaddress }}</p>
            </div>
        </div>
        <div class="col-sm-2" >
            <div class="text-end text-black font-weight-bold" style="margin-top:80px">
                <a href="{{ route('customer-logout') }}" class="btn btn-sm btn-danger" aria-label="Sign Out">Sign Out</a>
            </div>
        </div>
    </div>
    <div class="card mt-2">
        <div class="card-body">
            <label class="fs-4 mt-2">Your Primary Account Information</label>
            <div class="row mt-4">
                <div class="col-md-4">
                    <label class="fs-5">Primary Address</label>
                    @if(!empty($address))
                        <p class="mt-2">{{ $address->name }}<br> {{ $address->street_name }}<br> @if(!empty($address->street_app_unit)) {{ $address->street_app_unit }}<br> @endif {{ $address->city }}, {{ $address->state }} {{ $address->zip }}<br> {{ $address->country }}</p>
                    @else
                        <p class="mt-2">No address available</p>
                    @endif
                    <a href="{{ route('addresses') }}" aria-label="MANAGE MY ADDRESSES">MANAGE MY ADDRESSES</a>
                </div>
                <div class="col-md-4">
                    <label class="fs-5">Primary Payment Information</label>
                    @if(!empty($customer_card))
                    <div class="card p-2">
                        <p>Card ending in {{ $customer_card->cardNumber }} <br> <b>{{ $customer_card->name_on_card }}</b> {{ $customer_card->expiry_month.'/'.$customer_card->expiry_year }}</p>
                    </div>
                    @else
                        <p class="mt-2">No card set as primary</p>
                    @endif
                    <a href="{{ route('customer-card') }}" aria-label="ADD A NEW CARD">ADD A NEW CARD</a>
                </div>
                <div class="col-md-4">
                    <label class="fs-5">Name, Email & Password</label>
                    <h6 class="mt-2">{{ Auth::user()->firstname.' '.Auth::user()->lastname }}</h6>
                    <h6>{{ Auth::user()->emailaddress }}</h6>
                    <h6>*******</h6>
                    <div>
                        <a href="{{ route('account-manage') }}" aria-label="MANAGE ACCOUNT INFO">MANAGE ACCOUNT INFO</a>
                    </div>
                    <div class="mt-2">
                        <a href="{{ route('account-changepassword') }}" aria-label="CHANGE PASSWORD">CHANGE PASSWORD</a>
                    </div>


                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-10" >
            <div class=" mt-2 text-black font-weight-bold">
                <label class="fs-3">Your Order History</label>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="row">
                <div class="col-md-6">
                    <label class="mt-2">Search items in your order history</label>
                    <div class="input-group mb-3">
                        <input aria-labelledby="PartsWarehouse" type="text" class="form-control rounded-0" name="search_order" id="search_order" placeholder="Search by Order Number, Brand or Name">
                        <button aria-labelledby="..." class="btn btn-outline-primary rounded-0" type="button" id="orderSearchBtn" onclick="orderSearchBtn()">Search Order</button>
                        <button aria-labelledby="..." class="btn btn-outline-primary rounded-0 ms-2" type="button" id="orderSearchBtn" onclick="resetSearchBtn()">Reset</button>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="text-end mb-2">
                        <a href="{{ route('pages',['slug'=>'return-policy'])  }}" class="btn btn-outline-primary rounded-0" type="button" id="button-addon2" style="margin-top: 32px">RETURN ITEMS</a>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <div id="orderList">

    </div>

</div>
<script>
    orderSearchBtn();
    function resetSearchBtn(){
        if( $('#search_order').val() != ""){
            $('#search_order').val('');
            orderSearchBtn();
        }

    }
    function orderSearchBtn(){
        $('#orderList').html('Loading...');
        var search_order = $('#search_order').val();
        $.ajax({
            type: 'get',
            url: '{{ route("order-list") }}',
            data: { search_order: search_order },
            dataType: "text",
            success: function(fitthesemodel) {
                console.log(fitthesemodel);
                $('#orderList').html(fitthesemodel);
            }
        });

    }
</script>

@endsection