@extends('admin.master')

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

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

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

    .customer-title {
        margin: 0;
        font-size: 23px;
        font-weight: 700;
        color: #202a3a;
    }

    .customer-subtitle {
        margin: 6px 0 0;
        color: #9099aa;
        font-size: 13px;
    }

    .customer-header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .customer-link-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 38px;
        padding: 8px 16px;
        border-radius: 7px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        border: 1px solid #dfe3ea;
        background: #ffffff;
        color: #4f5969;
        transition: 0.2s;
    }

    .customer-link-button:hover {
        background: #f4f1ff;
        border-color: #7658ba;
        color: #6746ad;
        text-decoration: none;
    }

    .customer-search-card {
        background: #ffffff;
        border: 1px solid #e1e5ec;
        border-radius: 8px;
        padding: 0;
        margin-bottom: 17px;
        box-shadow: 0 3px 12px rgba(28, 39, 60, 0.04);
    }

    .customer-search-form {
        display: flex;
        align-items: stretch;
    }

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

    .customer-search-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ba4b5;
        font-size: 18px;
    }

    .customer-search-input {
        display: block;
        width: 100%;
        height: 44px;
        padding: 8px 15px 8px 45px;
        border: 0;
        outline: none;
        background: transparent;
        font-size: 13px;
        color: #343e4f;
    }

    .customer-search-input::placeholder {
        color: #9ba4b5;
    }

    .customer-search-button {
        min-width: 100px;
        border: 0;
        padding: 10px 20px;
        background: #13a651;
        color: #ffffff;
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
        border-radius: 0 7px 7px 0;
    }

    .customer-search-button:hover {
        background: #0d9145;
    }

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

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

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

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

    .customer-table-card {
        background: #ffffff;
        border: 1px solid #e2e6ed;
        border-radius: 8px;
        overflow: visible;
        box-shadow: 0 3px 12px rgba(28, 39, 60, 0.04);
    }

    .customer-table-responsive {
        overflow-x: auto;
        min-height: 350px;
    }

    .customer-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 1180px;
        margin: 0;
    }

    .customer-table thead th {
        padding: 13px 13px;
        background: #fafbfc;
        color: #7d8798;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        border-bottom: 1px solid #dde2e9;
        text-align: left;
        white-space: nowrap;
    }

    .customer-table tbody td {
        padding: 12px 13px;
        color: #5c6574;
        font-size: 12.5px;
        border-bottom: 1px solid #edf0f4;
        vertical-align: middle;
    }

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

    .customer-name {
        color: #354052;
        font-weight: 700;
    }

    .guest-badge {
        display: inline-flex;
        align-items: center;
        margin-left: 6px;
        padding: 4px 9px;
        border-radius: 30px;
        background: #eafaf0;
        color: #12a451;
        font-size: 10px;
        font-weight: 700;
    }

    .customer-order-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 29px;
        height: 24px;
        padding: 0 8px;
        border-radius: 20px;
        background: #f0edff;
        color: #7150ba;
        font-size: 11px;
        font-weight: 700;
    }

    .block-status-group {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        border-radius: 20px;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

    .status-safe {
        background: #eaf9ef;
        color: #139249;
    }

    .status-phone {
        background: #fff0f1;
        color: #d42e40;
    }

    .status-ip {
        background: #fff5e1;
        color: #d98400;
    }

    .status-email {
        background: #eeeaff;
        color: #684bb4;
    }

    .customer-block-details {
        position: relative;
    }

    .customer-block-details summary {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        min-height: 31px;
        padding: 6px 12px;
        border-radius: 6px;
        background: #7655bb;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        list-style: none;
        user-select: none;
    }

    .customer-block-details summary::-webkit-details-marker {
        display: none;
    }

    .customer-block-panel {
        position: absolute;
        right: 0;
        top: 38px;
        z-index: 100;
        width: 290px;
        padding: 15px;
        background: #ffffff;
        border: 1px solid #dfe3ea;
        border-radius: 9px;
        box-shadow: 0 12px 30px rgba(33, 40, 55, 0.15);
    }

    .customer-form-group {
        margin-bottom: 11px;
    }

    .customer-form-group label {
        display: block;
        margin-bottom: 5px;
        color: #5c6574;
        font-size: 11px;
        font-weight: 700;
    }

    .customer-form-control {
        width: 100%;
        min-height: 37px;
        padding: 8px 10px;
        border: 1px solid #dce1e8;
        border-radius: 6px;
        outline: none;
        font-size: 12px;
        background: #ffffff;
    }

    textarea.customer-form-control {
        min-height: 65px;
        resize: vertical;
    }

    .customer-form-control:focus {
        border-color: #7655bb;
        box-shadow: 0 0 0 3px rgba(118, 85, 187, 0.1);
    }

    .customer-submit-block {
        width: 100%;
        min-height: 37px;
        border: 0;
        border-radius: 6px;
        background: #d9293d;
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
    }

    .customer-submit-block:hover {
        background: #bd2133;
    }

    .customer-empty {
        padding: 70px 20px;
        text-align: center;
        color: #9ba4b4;
    }

    .customer-empty-icon {
        font-size: 44px;
        margin-bottom: 10px;
    }

    .customer-pagination {
        padding: 18px;
        border-top: 1px solid #edf0f4;
    }

    .customer-small-text {
        color: #9aa3b2;
        font-size: 11px;
    }

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

        .customer-header {
            flex-direction: column;
        }

        .customer-header-actions {
            width: 100%;
        }

        .customer-link-button {
            flex: 1;
        }
    }
</style>

<div class="customer-page">

    <div class="customer-header">
        <div>
            <h1 class="customer-title">All Customers</h1>
            <p class="customer-subtitle">
                View, search and manage your customer database
            </p>
        </div>

        <div class="customer-header-actions">
            <a
                href="{{ route('admin.customers.blocked') }}"
                class="customer-link-button"
            >
                🛡 Blocked Customers
            </a>
        </div>
    </div>

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

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

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

                <input
                    type="text"
                    name="search"
                    class="customer-search-input"
                    value="{{ $search }}"
                    placeholder="Search by name, phone, email, IP, order number or address"
                >

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

            <button type="submit" class="customer-search-button">
                Search
            </button>
        </form>
    </div>

    <div class="customer-table-card">
        <div class="customer-table-responsive">
            <table class="customer-table">
                <thead>
                    <tr>
                        <th>Full Name</th>
                        <th>Number</th>
                        <th>Address</th>
                        <th>Email</th>
                        <th>IP Address</th>
                        <th>Orders</th>
                        <th>Block Status</th>
                        <th>Action</th>
                    </tr>
                </thead>

                <tbody>
                    @forelse($customers as $customer)
                        <tr>
                            <td>
                                <span class="customer-name">
                                    {{ $customer->customer_name ?: 'Unknown Customer' }}
                                </span>

                                <span class="guest-badge">
                                    Guest
                                </span>
                            </td>

                            <td>
                                {{ $customer->customer_phone ?: '—' }}
                            </td>

                            <td>
                                <div style="max-width: 350px;">
                                    {{ $customer->address ?: '—' }}

                                    @if($customer->district_name || $customer->thana_name)
                                        <div class="customer-small-text">
                                            {{ collect([
                                                $customer->thana_name,
                                                $customer->district_name
                                            ])->filter()->implode(', ') }}
                                        </div>
                                    @endif
                                </div>
                            </td>

                            <td>
                                {{ $customer->customer_email ?: '—' }}
                            </td>

                            <td>
                                {{ $customer->customer_ip ?: '—' }}
                            </td>

                            <td>
                                <span class="customer-order-count">
                                    {{ number_format($customer->total_orders) }}
                                </span>
                            </td>

                            <td>
                                <div class="block-status-group">
                                    @if(
                                        ! $customer->phone_blocked
                                        && ! $customer->ip_blocked
                                        && ! $customer->email_blocked
                                    )
                                        <span class="status-badge status-safe">
                                            Not Blocked
                                        </span>
                                    @endif

                                    @if($customer->phone_blocked)
                                        <span class="status-badge status-phone">
                                            Phone Blocked
                                        </span>
                                    @endif

                                    @if($customer->ip_blocked)
                                        <span class="status-badge status-ip">
                                            IP Blocked
                                        </span>
                                    @endif

                                    @if($customer->email_blocked)
                                        <span class="status-badge status-email">
                                            Email Blocked
                                        </span>
                                    @endif
                                </div>
                            </td>

                            <td>
                                <details class="customer-block-details">
                                    <summary>
                                        Manage Block
                                    </summary>

                                    <div class="customer-block-panel">
                                        <form
                                            method="POST"
                                            action="{{ route('admin.customers.block') }}"
                                        >
                                            @csrf

                                            <input
                                                type="hidden"
                                                name="phone"
                                                value="{{ $customer->customer_phone }}"
                                            >

                                            <input
                                                type="hidden"
                                                name="ip"
                                                value="{{ $customer->customer_ip }}"
                                            >

                                            <input
                                                type="hidden"
                                                name="email"
                                                value="{{ $customer->customer_email }}"
                                            >

                                            <div class="customer-form-group">
                                                <label>Block Type</label>

                                                <select
                                                    name="block_type"
                                                    class="customer-form-control"
                                                    required
                                                >
                                                    <option value="phone">
                                                        Block Phone
                                                    </option>

                                                    <option
                                                        value="ip"
                                                        {{ empty($customer->customer_ip) ? 'disabled' : '' }}
                                                    >
                                                        Block IP
                                                    </option>

                                                    <option
                                                        value="both"
                                                        {{ empty($customer->customer_ip) ? 'disabled' : '' }}
                                                    >
                                                        Block Phone + IP
                                                    </option>

                                                    <option
                                                        value="email"
                                                        {{ empty($customer->customer_email) ? 'disabled' : '' }}
                                                    >
                                                        Block Email
                                                    </option>
                                                </select>
                                            </div>

                                            <div class="customer-form-group">
                                                <label>Reason</label>

                                                <textarea
                                                    name="reason"
                                                    class="customer-form-control"
                                                    placeholder="Write the reason for blocking"
                                                ></textarea>
                                            </div>

                                            <div class="customer-form-group">
                                                <label>Expires At — optional</label>

                                                <input
                                                    type="datetime-local"
                                                    name="expires_at"
                                                    class="customer-form-control"
                                                >
                                            </div>

                                            <button
                                                type="submit"
                                                class="customer-submit-block"
                                                onclick="return confirm('Are you sure you want to block this customer information?')"
                                            >
                                                Confirm Block
                                            </button>
                                        </form>
                                    </div>
                                </details>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8">
                                <div class="customer-empty">
                                    <div class="customer-empty-icon">👥</div>
                                    <strong>No customers found</strong>
                                    <div>
                                        No customer matched your search.
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($customers->hasPages())
            <div class="customer-pagination">
                {{ $customers->links() }}
            </div>
        @endif
    </div>
</div>
@endsection