@extends('layouts.app')

@section('title', 'B2B Portal Customers')

@section('content')
@include('b2bportal::partials.admin_style')

<section class="content-header">
    <div class="b2b-admin-hero">
        <h1>B2B Customers</h1>
        <p>Review portal customers, approve access, block accounts, and assign special wholesale price groups.</p>
        <div class="b2b-admin-actions">
            <a href="{{ action([\Modules\B2BPortal\Http\Controllers\B2BPortalController::class, 'index']) }}" class="btn btn-default">Dashboard</a>
            <a href="{{ action([\Modules\B2BPortal\Http\Controllers\B2BPortalController::class, 'settings']) }}" class="btn btn-default">Settings</a>
        </div>
    </div>
</section>

<section class="content">
    @include('b2bportal::admin.nav')

    <div class="b2b-panel">
        <div class="b2b-panel-header">
            <h3 class="b2b-panel-title">Wholesale Customers</h3>
        </div>
        <div class="b2b-panel-body table-responsive b2b-table-card">
            <table class="table table-bordered table-striped" id="b2b_customers_table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Phone</th>
                        <th>Business Name</th>
                        <th>Status</th>
                        <th>Price Group</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($customers as $customer)
                        <tr data-id="{{ $customer->id }}">
                            <td>{{ $customer->name }}</td>
                            <td>{{ $customer->phone }}</td>
                            <td>{{ $customer->business_name }}</td>
                            <td>
                                <span class="label label-{{ $customer->status == 'active' ? 'success' : ($customer->status == 'blocked' ? 'danger' : 'warning') }}">
                                    {{ ucfirst($customer->status) }}
                                </span>
                            </td>
                            <td>
                                {!! Form::select('price_group_id', $priceGroups->pluck('name', 'id')->prepend('None', ''), $customer->price_group_id, ['class' => 'form-control input-sm b2b-price-group', 'style' => 'min-width:160px']) !!}
                            </td>
                            <td>
                                @if($customer->status != 'active')
                                    <button type="button" class="btn btn-xs btn-success b2b-approve">Approve</button>
                                @endif
                                @if($customer->status != 'blocked')
                                    <button type="button" class="btn btn-xs btn-danger b2b-block">Block</button>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            {{ $customers->links() }}
        </div>
    </div>
</section>
@endsection

@section('javascript')
<script>
$(function () {
    $('#b2b_customers_table').DataTable({
        paging: false,
        searching: true,
        info: false
    });

    function postAction(url, data) {
        data = data || {};
        data._token = '{{ csrf_token() }}';
        return $.post(url, data);
    }

    $('.b2b-approve').on('click', function () {
        var id = $(this).closest('tr').data('id');
        postAction('/b2bportal/customers/' + id + '/approve').done(function () {
            location.reload();
        }).fail(function () {
            toastr.error('Could not approve customer');
        });
    });

    $('.b2b-block').on('click', function () {
        var id = $(this).closest('tr').data('id');
        postAction('/b2bportal/customers/' + id + '/block').done(function () {
            location.reload();
        }).fail(function () {
            toastr.error('Could not block customer');
        });
    });

    $('.b2b-price-group').on('change', function () {
        var id = $(this).closest('tr').data('id');
        postAction('/b2bportal/customers/' + id + '/price-group', {price_group_id: $(this).val()}).done(function () {
            toastr.success('Price group updated');
        }).fail(function () {
            toastr.error('Could not update price group');
        });
    });
});
</script>
@endsection