@extends('backend.representative.layouts.representative-app')

@section('title', 'Stripe Connect')

@push('style')
    <style>
        .sc-list-card {
            border: 1px solid #e8edf6;
            border-radius: 1rem;
            box-shadow: 0 8px 24px rgba(20, 28, 55, 0.05);
        }
        .sc-list-header {
            background: linear-gradient(135deg, #0c1f3f, #304b92);
            color: #fff;
            border-radius: 1rem 1rem 0 0;
            padding: 1.25rem 1.5rem;
        }
        .sc-list-header h4 { margin: 0; font-weight: 600; }
        .stripe-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.25rem 0.75rem;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        .stripe-pending { background: #fff8e6; color: #92670c; }
        .stripe-active { background: #edfff5; color: #0e7a45; }
        .stripe-not { background: #fff2f2; color: #a01c1c; }
    </style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Stripe Connect</h1>
    </div>
    <div class="ms-auto pageheader-btn">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('portal-representative.dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Stripe Connect</li>
        </ol>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<div class="row">
    <div class="col-12">
        <div class="sc-list-card">
            <div class="sc-list-header d-flex justify-content-between align-items-center">
                <h4><i class="fe fe-credit-card me-2"></i>Connected Stores</h4>
                <span class="badge bg-light text-dark">{{ $stores->count() }} stores</span>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Store</th>
                            <th>Email</th>
                            <th>Stripe Account</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($stores as $store)
                            @php
                                $hasAccount = ! empty($store->stripe_account_id);
                                $status = $store->stripe_account_status ?? 'pending';
                                $badgeClass = ! $hasAccount ? 'stripe-not' : ($status === 'active' ? 'stripe-active' : 'stripe-pending');
                                $badgeLabel = ! $hasAccount ? 'Not Connected' : ucfirst($status);
                            @endphp
                            <tr>
                                <td class="fw-semibold">{{ $store->name }}</td>
                                <td>{{ $store->store_email ?? '—' }}</td>
                                <td>
                                    @if($hasAccount)
                                        <code style="font-size:0.75rem">{{ $store->stripe_account_id }}</code>
                                    @else
                                        <span class="text-muted">—</span>
                                    @endif
                                </td>
                                <td><span class="stripe-badge {{ $badgeClass }}">{{ $badgeLabel }}</span></td>
                                <td>
                                    @if($status !== 'active')
                                        <form method="POST" action="{{ route('portal-representative.stripe-connect.connect') }}" class="d-inline">
                                            @csrf
                                            <input type="hidden" name="store_id" value="{{ $store->id }}">
                                            <button type="submit" class="btn btn-sm btn-primary">
                                                <i class="fe fe-link me-1"></i>
                                                {{ $hasAccount ? 'Continue' : 'Connect' }}
                                            </button>
                                        </form>
                                    @else
                                        <span class="text-success"><i class="fe fe-check-circle me-1"></i>Connected</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-4 text-muted">No stores available.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection