@extends('layouts.app')

@section('title', 'Media Agents')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0"><i class="bi bi-megaphone me-2"></i>Media Agents</h1>
    @can('create', App\Models\MediaAgent::class)
        <a href="{{ route('media.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle me-1"></i> Add Media Agent
        </a>
    @endcan
</div>

{{-- Filters --}}
<div class="card mb-4">
    <div class="card-body py-3">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-4">
                <input type="text" name="search" class="form-control form-control-sm"
                    placeholder="Search name, mobile, company..." value="{{ request('search') }}">
            </div>
            <div class="col-md-2">
                <select name="is_active" class="form-select form-select-sm">
                    <option value="">All Status</option>
                    <option value="1" {{ request('is_active') === '1' ? 'selected' : '' }}>Active</option>
                    <option value="0" {{ request('is_active') === '0' ? 'selected' : '' }}>Inactive</option>
                </select>
            </div>
            <div class="col-md-2">
                <div class="form-check">
                    <input type="checkbox" name="due_only" value="1" class="form-check-input"
                        id="dueOnly" {{ request('due_only') ? 'checked' : '' }}>
                    <label class="form-check-label" for="dueOnly">Due Only</label>
                </div>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-sm btn-primary w-100">
                    <i class="bi bi-search me-1"></i> Filter
                </button>
            </div>
            <div class="col-md-2">
                <a href="{{ route('media.index') }}" class="btn btn-sm btn-outline-secondary w-100">Clear</a>
            </div>
        </form>
    </div>
</div>

{{-- Summary Cards --}}
<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="stat-card stat-primary">
            <div class="stat-icon"><i class="bi bi-people"></i></div>
            <div class="stat-info">
                <h3>{{ $agents->total() }}</h3>
                <p>Total Agents</p>
            </div>
        </div>
    </div>
</div>

{{-- Table --}}
<div class="card">
    <div class="table-responsive">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Mobile</th>
                    <th>Company</th>
                    <th>Rate</th>
                    <th class="text-end">Generated</th>
                    <th class="text-end">Paid</th>
                    <th class="text-end">Due</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($agents as $agent)
                    <tr>
                        <td>{{ $agent->id }}</td>
                        <td>
                            <a href="{{ route('media.show', $agent) }}" class="fw-semibold text-decoration-none">
                                {{ $agent->name }}
                            </a>
                        </td>
                        <td>{{ $agent->mobile }}</td>
                        <td>{{ $agent->company_name ?? '—' }}</td>
                        <td>{{ number_format($agent->commission_rate, 2) }}%</td>
                        <td class="text-end">{{ number_format($agent->total_commission, 2) }}</td>
                        <td class="text-end text-success">{{ number_format($agent->total_paid, 2) }}</td>
                        <td class="text-end {{ $agent->total_due > 0 ? 'text-danger fw-semibold' : '' }}">
                            {{ number_format($agent->total_due, 2) }}
                        </td>
                        <td>
                            <span class="badge {{ $agent->is_active ? 'badge-active' : 'badge-inactive' }}">
                                {{ $agent->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="{{ route('media.show', $agent) }}" class="btn btn-outline-primary" title="View">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a href="{{ route('media.ledger', $agent) }}" class="btn btn-outline-info" title="Ledger">
                                    <i class="bi bi-journal-text"></i>
                                </a>
                                @can('update', $agent)
                                    <a href="{{ route('media.edit', $agent) }}" class="btn btn-outline-warning" title="Edit">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                @endcan
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="10" class="text-center py-4 text-muted">
                            <i class="bi bi-inbox fs-3 d-block mb-2"></i> No media agents found.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if ($agents->hasPages())
        <div class="card-footer d-flex justify-content-center">
            {{ $agents->withQueryString()->links() }}
        </div>
    @endif
</div>
@endsection