@extends ('layouts.ic')
@section('content')
    <div class="container mcp-theme-1">
        <div class="d-flex align-items-baseline mt-3 mb-2">
            <h3 class="font-size-16 font-weight-bold text-dark">Manage Account</h3>
            <a href="{{route('icCustomerPortal')}}" class="ml-auto">
                <i class="fa fa-chevron-left"></i>
                Back to Home
            </a>
        </div>
        <hr class="mt-0 mb-3">
        <div class="row">
            <div class="col-md-8">
                <div class="d-flex align-items-baseline mt-4">
                    <h4 class="title-sm m-0">Payment Methods</h4>
                    <div class="ml-3">
                        @include('app.invoice-center._ic-add-payment-method-moe')
                    </div>
                </div>
                <hr class="red-underline">
                @if(count($customer->paymentMethods))
                    @php
                        $index = 1;
                    @endphp
                    @foreach($customer->paymentMethods as $method)
                        <div class="mb-2 px-3 py-2 bg-light border">
                            <div class="d-flex align-items-center flex-nowrap">
                                <span>{!! $method->displayName() !!}</span>
                                <div moe class="ml-3">
                                    <a start show href="#" class="text-nowrap text-sm">Remove</a>
                                    <form url="/api/paymentMethod/deactivate">
                                        <input type="hidden" name="uid" value="{{$method->uid}}">
                                        <p class="text-secondary font-weight-bold mb-2 text-nowrap">Remove this Payment Method?</p>
                                        <div class="d-flex align-items-center">
                                            <button submit class="btn btn-sm btn-primary me-2">Submit</button>
                                            <button cancel class="btn btn-sm btn-default">Cancel</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="my-3">You have not set up any payment methods!</div>
                @endif
            </div>
            @include('app.invoice-center.ic-rhs')
        </div>
    </div>
@endsection
