@extends('backEnd.layouts.master')
@section('title', 'Blocked Customers')

@push('styles')
<style>
.cb-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}
.cb-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 13px; }
.cb-table thead th {
    background: #f3f4f6;
    border-bottom: 1px solid #d1d5db;
    padding: 10px 12px;
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
}
.cb-table tbody td {
    border-bottom: 1px solid #e5e7eb;
    padding: 12px;
    vertical-align: middle;
}
.cb-table tbody tr:nth-child(even) { background: #f9fafb; }
.cb-badge-ip {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
}
.cb-badge-phone {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
}
</style>
@endpush

@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="fw-bold mb-0"><i class="fas fa-user-slash me-2 text-danger"></i>Blocked Customers</h4>
            <small class="text-muted">Phone number দিয়ে block করা হয় (recommended) — IP optional, shared network এ mix হতে পারে</small>
        </div>
        <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#blockCustomerModal">
            <i class="fas fa-ban me-1"></i> Block Customer
        </button>
    </div>

    <ul class="nav nav-tabs mb-3">
        <li class="nav-item">
            <a class="nav-link {{ $tab === 'active' ? 'active' : '' }}" href="{{ route('admin.customers.blocked', ['tab' => 'active']) }}">
                Active Blocks <span class="badge bg-danger ms-1">{{ $activeCount }}</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ $tab === 'history' ? 'active' : '' }}" href="{{ route('admin.customers.blocked', ['tab' => 'history']) }}">
                History
            </a>
        </li>
    </ul>

    <div class="card shadow-sm border-0 mb-3">
        <div class="card-body py-3">
            <form method="GET" class="row g-2 align-items-end">
                <input type="hidden" name="tab" value="{{ $tab }}">
                <div class="col-md-4">
                    <label class="form-label small fw-semibold mb-1">Search</label>
                    <input type="text" name="q" value="{{ $search ?? '' }}" class="form-control form-control-sm" placeholder="Phone, name, IP, reason...">
                </div>
                <div class="col-auto">
                    <button class="btn btn-primary btn-sm px-3"><i class="fas fa-search me-1"></i>Search</button>
                    <a href="{{ route('admin.customers.blocked', ['tab' => $tab]) }}" class="btn btn-secondary btn-sm px-3 ms-1">Reset</a>
                </div>
            </form>
        </div>
    </div>

    <div class="cb-panel">
        <div class="table-responsive">
            <table class="cb-table">
                <thead>
                    <tr>
                        <th>Blocked At</th>
                        <th>Customer Name</th>
                        <th>Phone</th>
                        <th>IP (reference)</th>
                        <th>Block Type</th>
                        <th>Reason</th>
                        <th>Blocked By</th>
                        @if($tab === 'active')
                        <th class="text-center">Action</th>
                        @else
                        <th>Unblocked At</th>
                        @endif
                    </tr>
                </thead>
                <tbody>
                    @forelse($blocks as $block)
                    <tr>
                        <td>
                            <div class="fw-semibold">{{ $block->created_at->format('d M Y') }}</div>
                            <div class="text-muted small">{{ $block->created_at->format('g:i A') }}</div>
                        </td>
                        <td>
                            @if($block->customer_id)
                            <a href="{{ route('admin.customers.show', $block->customer_id) }}" class="fw-semibold text-decoration-none">
                                {{ $block->customer_name ?: '—' }}
                            </a>
                            @else
                            {{ $block->customer_name ?: '—' }}
                            @endif
                        </td>
                        <td><span class="fw-semibold">{{ $block->phone }}</span></td>
                        <td>
                            @if($block->ip_address)
                            <code>{{ $block->ip_address }}</code>
                            @else
                            <span class="text-muted">—</span>
                            @endif
                        </td>
                        <td>
                            <span class="cb-badge-phone">Phone</span>
                            @if($block->block_by_ip)
                            <span class="cb-badge-ip ms-1">+ IP</span>
                            @endif
                        </td>
                        <td>{{ $block->reason ?: '—' }}</td>
                        <td>{{ $block->blocked_by_name ?: ($block->blockedByUser->name ?? '—') }}</td>
                        @if($tab === 'active')
                        <td class="text-center">
                            <form action="{{ route('admin.customers.unblock', $block->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Unblock this customer?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-outline-success btn-sm">
                                    <i class="fas fa-unlock me-1"></i>Unblock
                                </button>
                            </form>
                        </td>
                        @else
                        <td>
                            @if($block->unblocked_at)
                            <div>{{ $block->unblocked_at->format('d M Y, g:i A') }}</div>
                            <div class="text-muted small">{{ $block->unblocked_by_name ?: '—' }}</div>
                            @else
                            —
                            @endif
                        </td>
                        @endif
                    </tr>
                    @empty
                    <tr>
                        <td colspan="{{ $tab === 'active' ? 8 : 8 }}" class="text-center py-5 text-muted">
                            <i class="fas fa-user-check fa-2x d-block mb-2 opacity-50"></i>
                            {{ $tab === 'active' ? 'No blocked customers right now.' : 'No block history found.' }}
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($blocks->hasPages())
        <div class="p-3">{{ $blocks->links() }}</div>
        @endif
    </div>
</div>

@include('backEnd.customer.partials.block-modal', ['modalId' => 'blockCustomerModal'])
@endsection