@extends('admin.master')

@section('content')
<style>
    .blocked-page {
        padding: 28px;
        min-height: 100vh;
        background: #f7f7f8;
        color: #2d3441;
        font-family: inherit;
    }

    .blocked-page * {
        box-sizing: border-box;
    }

    .blocked-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 28px;
    }

    .blocked-heading-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .blocked-heading-icon {
        font-size: 29px;
    }

    .blocked-title {
        margin: 0;
        color: #080a0f;
        font-size: 30px;
        font-weight: 700;
    }

    .blocked-subtitle {
        margin: 6px 0 0;
        color: #b0b4c1;
        font-size: 15px;
    }

    .blocked-top-controls {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 15px 18px;
        border: 1px solid #d9dfe8;
        border-radius: 13px;
        background: #eef1f5;
        box-shadow: 0 4px 9px rgba(20, 29, 43, 0.1);
    }

    .blocked-control-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 120px;
        height: 38px;
        padding: 8px 17px;
        border: 0;
        border-radius: 8px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
        color: #ffffff;
        box-shadow: 0 3px 5px rgba(34, 40, 55, 0.18);
    }

    .blocked-control-button:hover {
        text-decoration: none;
        color: #ffffff;
        opacity: 0.92;
    }

    .blocked-refresh-button {
        background: linear-gradient(90deg, #6778e5, #7748ae);
    }

    .blocked-reset-button {
        background: #555d65;
    }

    .blocked-per-page-form {
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 42px;
        padding: 5px 12px;
        border-radius: 9px;
        background: #ffffff;
        border: 1px solid #d8dde4;
        box-shadow: 0 2px 5px rgba(20, 29, 43, 0.08);
        color: #555c69;
        font-size: 13px;
        white-space: nowrap;
    }

    .blocked-per-page-form select {
        border: 0;
        outline: none;
        background: transparent;
        color: #4c5260;
        font-weight: 600;
    }

    .blocked-alert {
        margin-bottom: 18px;
        padding: 13px 16px;
        border-radius: 8px;
        font-size: 13px;
    }

    .blocked-alert-success {
        color: #13763c;
        background: #e9f9ef;
        border: 1px solid #c7eed6;
    }

    .blocked-alert-danger {
        color: #bd2532;
        background: #fff0f1;
        border: 1px solid #f5cbd0;
    }

    .blocked-alert-danger ul {
        margin: 0;
        padding-left: 20px;
    }

    .blocked-stat-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 28px;
        margin-bottom: 50px;
    }

    .blocked-stat-card {
        min-height: 95px;
        display: flex;
        align-items: center;
        padding: 20px;
        border-radius: 12px;
        color: #ffffff;
        box-shadow: 0 8px 15px rgba(20, 29, 43, 0.13);
    }

    .blocked-stat-total {
        background: linear-gradient(120deg, #6379e5, #7947a9);
    }

    .blocked-stat-phone {
        background: linear-gradient(120deg, #28ad4c, #1fc18c);
    }

    .blocked-stat-ip {
        background: linear-gradient(120deg, #ffb208, #ff7d14);
    }

    .blocked-stat-both {
        background: linear-gradient(120deg, #e53346, #ce2236);
    }

    .blocked-stat-icon {
        width: 52px;
        height: 52px;
        flex: 0 0 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 18px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.17);
        font-size: 23px;
    }

    .blocked-stat-number {
        margin: 0;
        font-size: 28px;
        line-height: 1;
        font-weight: 700;
    }

    .blocked-stat-label {
        margin: 10px 0 0;
        font-size: 13px;
        font-weight: 700;
    }

    .blocked-filter-card {
        display: flex;
        align-items: center;
        gap: 28px;
        margin-bottom: 48px;
        padding: 20px;
        background: #ffffff;
        border-radius: 13px;
        box-shadow: 0 5px 10px rgba(20, 29, 43, 0.12);
    }

    .blocked-filter-form {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 28px;
    }

    .blocked-search-group {
        display: flex;
        align-items: stretch;
        flex: 1;
        max-width: 770px;
        height: 38px;
        border: 1px solid #d7dce4;
        border-radius: 7px;
        overflow: hidden;
    }

    .blocked-search-input-wrap {
        position: relative;
        flex: 1;
    }

    .blocked-search-icon {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        color: #9098a8;
    }

    .blocked-search-input {
        width: 100%;
        height: 100%;
        padding: 8px 12px 8px 40px;
        border: 0;
        outline: none;
        color: #4d5563;
        background: transparent;
        font-size: 13px;
    }

    .blocked-search-input::placeholder {
        color: #b2b7c3;
    }

    .blocked-search-button {
        min-width: 90px;
        border: 3px solid #ffffff;
        border-radius: 7px;
        background: linear-gradient(90deg, #687ce6, #764bb3);
        color: #ffffff;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }

    .blocked-type-group {
        display: flex;
        align-items: center;
        gap: 15px;
        white-space: nowrap;
    }

    .blocked-type-label {
        color: #555c68;
        font-size: 13px;
        font-weight: 700;
    }

    .blocked-type-select {
        min-width: 150px;
        height: 38px;
        padding: 7px 12px;
        border: 1px solid #cfd4dc;
        border-radius: 7px;
        background: #ffffff;
        color: #4e5561;
        outline: none;
    }

    .blocked-list-card {
        background: #ffffff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(20, 29, 43, 0.12);
    }

    .blocked-list-heading {
        display: flex;
        align-items: center;
        min-height: 63px;
        padding: 17px 22px;
        background: linear-gradient(90deg, #6079e8, #7b46a9);
        color: #ffffff;
        font-size: 19px;
        font-weight: 600;
    }

    .blocked-table-responsive {
        overflow-x: auto;
    }

    .blocked-table {
        width: 100%;
        min-width: 1050px;
        border-collapse: collapse;
    }

    .blocked-table thead th {
        padding: 13px 16px;
        border-bottom: 1px solid #e3e6ec;
        background: #fafbfc;
        color: #7c8492;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 0.4px;
        text-align: left;
    }

    .blocked-table tbody td {
        padding: 14px 16px;
        border-bottom: 1px solid #eef0f4;
        color: #596271;
        font-size: 13px;
        vertical-align: middle;
    }

    .blocked-table tbody tr:hover {
        background: #fbfcff;
    }

    .blocked-type-badge {
        display: inline-flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
    }

    .blocked-type-phone {
        color: #138d47;
        background: #e7f9ee;
    }

    .blocked-type-ip {
        color: #d27700;
        background: #fff2dc;
    }

    .blocked-type-email {
        color: #6746ad;
        background: #eee9ff;
    }

    .blocked-value {
        color: #343d4d;
        font-weight: 700;
    }

    .blocked-unblock-button {
        min-height: 32px;
        padding: 6px 13px;
        border: 0;
        border-radius: 6px;
        background: #e33246;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
    }

    .blocked-unblock-button:hover {
        background: #c82336;
    }

    .blocked-empty-state {
        min-height: 280px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 50px 20px;
        text-align: center;
        color: #b2b5c1;
    }

    .blocked-empty-icon {
        margin-bottom: 20px;
        font-size: 54px;
        opacity: 0.75;
    }

    .blocked-empty-title {
        margin-bottom: 8px;
        color: #b2b5c1;
        font-size: 19px;
        font-weight: 600;
    }

    .blocked-empty-text {
        color: #bec1cb;
        font-size: 15px;
    }

    .blocked-pagination {
        padding: 18px 20px;
        border-top: 1px solid #eef0f4;
    }

    @media (max-width: 1100px) {
        .blocked-stat-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .blocked-header,
        .blocked-filter-form {
            flex-direction: column;
            align-items: stretch;
        }

        .blocked-top-controls {
            flex-wrap: wrap;
        }
    }

    @media (max-width: 650px) {
        .blocked-page {
            padding: 15px;
        }

        .blocked-stat-grid {
            grid-template-columns: 1fr;
            gap: 15px;
        }

        .blocked-title {
            font-size: 24px;
        }

        .blocked-top-controls,
        .blocked-filter-card {
            width: 100%;
        }

        .blocked-control-button {
            flex: 1;
        }

        .blocked-search-group {
            width: 100%;
        }

        .blocked-type-group {
            width: 100%;
            flex-direction: column;
            align-items: stretch;
        }
    }
</style>

<div class="blocked-page">

    <div class="blocked-header">
        <div>
            <div class="blocked-heading-row">
                <span class="blocked-heading-icon">🛡️</span>

                <h1 class="blocked-title">
                    Blocked Customers
                </h1>
            </div>

            <p class="blocked-subtitle">
                Manage blocked phone numbers, IP addresses and emails
            </p>
        </div>

        <div class="blocked-top-controls">
            <a
                href="{{ request()->fullUrl() }}"
                class="blocked-control-button blocked-refresh-button"
            >
                ↻ Refresh
            </a>

            <a
                href="{{ route('admin.customers.blocked') }}"
                class="blocked-control-button blocked-reset-button"
            >
                ↻ Reset
            </a>

            <form
                method="GET"
                action="{{ route('admin.customers.blocked') }}"
                class="blocked-per-page-form"
            >
                <span>Show:</span>

                <select
                    name="per_page"
                    onchange="this.form.submit()"
                >
                    @foreach([10, 20, 50, 100] as $size)
                        <option
                            value="{{ $size }}"
                            {{ $perPage == $size ? 'selected' : '' }}
                        >
                            {{ $size }}
                        </option>
                    @endforeach
                </select>

                <span>per page</span>

                @if($search)
                    <input
                        type="hidden"
                        name="search"
                        value="{{ $search }}"
                    >
                @endif

                @if($type)
                    <input
                        type="hidden"
                        name="type"
                        value="{{ $type }}"
                    >
                @endif
            </form>
        </div>
    </div>

    @if(session('success'))
        <div class="blocked-alert blocked-alert-success">
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="blocked-alert blocked-alert-danger">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="blocked-stat-grid">
        <div class="blocked-stat-card blocked-stat-total">
            <div class="blocked-stat-icon">
                🛡
            </div>

            <div>
                <p class="blocked-stat-number">
                    {{ number_format($totalBlocked) }}
                </p>

                <p class="blocked-stat-label">
                    Total Blocked
                </p>
            </div>
        </div>

        <div class="blocked-stat-card blocked-stat-phone">
            <div class="blocked-stat-icon">
                ☎
            </div>

            <div>
                <p class="blocked-stat-number">
                    {{ number_format($phoneOnly) }}
                </p>

                <p class="blocked-stat-label">
                    Phone Only
                </p>
            </div>
        </div>

        <div class="blocked-stat-card blocked-stat-ip">
            <div class="blocked-stat-icon">
                ◎
            </div>

            <div>
                <p class="blocked-stat-number">
                    {{ number_format($ipOnly) }}
                </p>

                <p class="blocked-stat-label">
                    IP Only
                </p>
            </div>
        </div>

        <div class="blocked-stat-card blocked-stat-both">
            <div class="blocked-stat-icon">
                🔐
            </div>

            <div>
                <p class="blocked-stat-number">
                    {{ number_format($bothBlocked) }}
                </p>

                <p class="blocked-stat-label">
                    Both Blocked
                </p>
            </div>
        </div>
    </div>

    <div class="blocked-filter-card">
        <form
            method="GET"
            action="{{ route('admin.customers.blocked') }}"
            class="blocked-filter-form"
        >
            <div class="blocked-search-group">
                <div class="blocked-search-input-wrap">
                    <span class="blocked-search-icon">
                        ⌕
                    </span>

                    <input
                        type="text"
                        name="search"
                        class="blocked-search-input"
                        value="{{ $search }}"
                        placeholder="Search by block ID, phone, IP, email or reason..."
                    >
                </div>

                <button
                    type="submit"
                    class="blocked-search-button"
                >
                    ⌕ Search
                </button>
            </div>

            <div class="blocked-type-group">
                <label class="blocked-type-label">
                    Filter by Block Type:
                </label>

                <select
                    name="type"
                    class="blocked-type-select"
                    onchange="this.form.submit()"
                >
                    <option
                        value="all"
                        {{ $type === 'all' ? 'selected' : '' }}
                    >
                        All Types
                    </option>

                    <option
                        value="phone"
                        {{ $type === 'phone' ? 'selected' : '' }}
                    >
                        Phone
                    </option>

                    <option
                        value="ip"
                        {{ $type === 'ip' ? 'selected' : '' }}
                    >
                        IP Address
                    </option>

                    <option
                        value="email"
                        {{ $type === 'email' ? 'selected' : '' }}
                    >
                        Email
                    </option>
                </select>
            </div>

            <input
                type="hidden"
                name="per_page"
                value="{{ $perPage }}"
            >
        </form>
    </div>

    <div class="blocked-list-card">
        <div class="blocked-list-heading">
            ☷&nbsp; Blocked Items List
        </div>

        @if($blocks->count())
            <div class="blocked-table-responsive">
                <table class="blocked-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Block Type</th>
                            <th>Blocked Value</th>
                            <th>Reason</th>
                            <th>Blocked By</th>
                            <th>Blocked At</th>
                            <th>Expires At</th>
                            <th>Action</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach($blocks as $block)
                            <tr>
                                <td>
                                    #{{ $block->id }}
                                </td>

                                <td>
                                    @if($block->type === 'phone')
                                        <span class="blocked-type-badge blocked-type-phone">
                                            ☎ Phone
                                        </span>
                                    @elseif($block->type === 'ip')
                                        <span class="blocked-type-badge blocked-type-ip">
                                            ◎ IP Address
                                        </span>
                                    @else
                                        <span class="blocked-type-badge blocked-type-email">
                                            ✉ Email
                                        </span>
                                    @endif
                                </td>

                                <td>
                                    <span class="blocked-value">
                                        {{ $block->value }}
                                    </span>
                                </td>

                                <td>
                                    {{ \Illuminate\Support\Str::limit(
                                        $block->reason ?: 'No reason provided',
                                        80
                                    ) }}
                                </td>

                                <td>
                                    {{ $block->blockedBy?->name ?? 'System/Admin' }}
                                </td>

                                <td>
                                    {{ $block->created_at?->format('d M Y, h:i A') }}
                                </td>

                                <td>
                                    @if($block->expires_at)
                                        {{ $block->expires_at->format('d M Y, h:i A') }}
                                    @else
                                        Never
                                    @endif
                                </td>

                                <td>
                                    <form
                                        method="POST"
                                        action="{{ route(
                                            'admin.customers.unblock',
                                            $block
                                        ) }}"
                                    >
                                        @csrf
                                        @method('PATCH')

                                        <button
                                            type="submit"
                                            class="blocked-unblock-button"
                                            onclick="return confirm('Are you sure you want to unblock this item?')"
                                        >
                                            Unblock
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if($blocks->hasPages())
                <div class="blocked-pagination">
                    {{ $blocks->links() }}
                </div>
            @endif
        @else
            <div class="blocked-empty-state">
                <div class="blocked-empty-icon">
                    ♢
                </div>

                <div class="blocked-empty-title">
                    No blocked items found
                </div>

                <div class="blocked-empty-text">
                    There are currently no blocked phone numbers,
                    IP addresses or email addresses.
                </div>
            </div>
        @endif
    </div>
</div>
@endsection