@extends('layouts.app')
@section('title', 'Customer Portal Accounts')
@section('content')
<section class="content-header"><h1>Customer Portal Accounts</h1></section>
<section class="content">
    @if(session('status'))<div class="alert alert-info">{{ session('status') }}</div>@endif
    <div class="row">
        <div class="col-md-4">
            @component('components.widget', ['class' => 'box-primary', 'title' => 'Add account'])
                <form method="POST" action="{{ route('vrc.portal-accounts.store') }}">
                    @csrf
                    <div class="form-group"><label>Name *</label><input name="name" class="form-control" required></div>
                    <div class="form-group"><label>Phone *</label><input name="phone" class="form-control" required></div>
                    <div class="form-group"><label>Email</label><input name="email" type="email" class="form-control"></div>
                    <div class="form-group"><label>ERP customer id</label><input name="erp_customer_id" type="number" class="form-control"></div>
                    <button class="btn btn-primary">Create</button>
                </form>
                <p class="text-muted" style="font-size:12px; margin-top:8px;">Owners sign in at <code>/vrc/portal/account</code> using their phone + one-time code.</p>
            @endcomponent
        </div>
        <div class="col-md-8">
            @component('components.widget', ['class' => 'box-default'])
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="vrc_portal_accounts_table">
                        <thead><tr><th>Name</th><th>Phone</th><th>Email</th><th>Status</th><th>Last login</th><th>Action</th></tr></thead>
                    </table>
                </div>
            @endcomponent
        </div>
    </div>
</section>
@endsection
@section('javascript')
<script>
$(function () {
    $('#vrc_portal_accounts_table').DataTable({
        processing: true, serverSide: true, ajax: '{{ route('vrc.portal-accounts.index') }}',
        columns: [
            { data: 'name', name: 'name' }, { data: 'phone', name: 'phone' },
            { data: 'email', name: 'email' }, { data: 'is_active', name: 'is_active', orderable: false },
            { data: 'last_login_at', name: 'last_login_at' },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ],
    });
});
</script>
@endsection
