@extends('layouts.master')

@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
    /* كارت الإحصائية والبحث في الترويسة */
    .stat-card-premium {
        background: #ffffff;
        border-radius: 16px;
        padding: 18px 22px;
        position: relative;
        overflow: hidden;
        border: 1px solid #edf2f7;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
    }

    .stat-card-watermark {
        position: absolute;
        left: -10px;
        bottom: -15px;
        font-size: 70px;
        opacity: 0.04;
        transform: rotate(-10deg);
        pointer-events: none;
    }

    .stat-card-icon {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        color: #059669;
        box-shadow: 0 4px 12px rgba(5, 150, 105, 0.12);
    }

    /* كارت الدليل الرئيسي */
    .directory-card {
        background: #ffffff;
        border-radius: 18px;
        border: 1px solid #edf2f7;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    }

    .table-directory {
        margin-bottom: 0;
        vertical-align: middle;
    }

    .table-directory th {
        background-color: #f8fafc;
        color: #475569;
        font-size: 12px;
        font-weight: 700;
        padding: 14px 16px !important;
        border-bottom: 1px solid #edf2f7 !important;
        white-space: nowrap;
    }

    .table-directory td {
        font-size: 13px;
        padding: 14px 16px !important;
        vertical-align: middle !important;
        color: #1e293b;
        border-top: 1px solid #f1f5f9;
    }

    .table-directory tbody tr {
        transition: background-color 0.2s ease;
    }

    .table-directory tbody tr:hover {
        background-color: #f8fafc;
    }

    /* زر الواتساب المباشر */
    .btn-whatsapp-direct {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background-color: #25d366;
        color: #ffffff !important;
        border-radius: 50%;
        font-size: 14px;
        box-shadow: 0 2px 6px rgba(37, 211, 102, 0.3);
        transition: transform 0.2s ease;
        margin-right: 6px;
    }
    .btn-whatsapp-direct:hover {
        transform: scale(1.15);
    }

    /* رمز العميل التعبيري */
    .customer-avatar {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: #f1f5f9;
        color: #004d44;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 14px;
        margin-left: 10px;
        border: 1px solid #e2e8f0;
    }

    /* تخصيص الروابط والأزرار */
    .contract-btn {
        background: #004d44;
        color: #ffffff !important;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 600;
        padding: 6px 14px;
        transition: all 0.2s ease;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    .contract-btn:hover {
        background: #003630;
        transform: translateY(-1px);
        box-shadow: 0 3px 8px rgba(0, 77, 68, 0.2);
    }
</style>
@endsection

@section('title')
دليل العملاء الشامل
@stop

@section('page-header')
<div class="breadcrumb-header justify-content-between align-items-center my-4 p-3 bg-white shadow-sm" style="border-radius: 15px;">
    <div class="left-content text-right">
        <h2 class="main-content-title tx-24 mg-b-1 font-weight-bold" style="color: #004d44;">
            <i class="fas fa-users text-success mg-l-5"></i> دليل وعناوين العملاء المسجلين
        </h2>
        <p class="text-muted card-sub-title m-0 mt-1" style="font-size: 13px;">
            قائمة استعراضية شاملة لكافة العملاء المسجلين بالنظام مع بياناتهم الفنية وحالة اشتراكاتهم.
        </p>
    </div>
    <div>
        <a href="{{ url('/dashboard') }}" class="btn btn-light px-3 py-2" style="border-radius: 10px; font-weight: 600; font-size: 13px; border: 1px solid #e2e8f0;">
            <i class="fas fa-arrow-left mg-l-5 text-muted"></i> العودة للرئيسية
        </a>
    </div>
</div>

<div class="row row-sm mg-b-20 align-items-stretch">

    {{-- 1. كارت إجمالي عدد العملاء --}}
    <div class="col-xl-4 col-lg-5 col-md-6 col-sm-12 mg-b-10-f">
        <div class="stat-card-premium">
            <div>
                <h5 style="font-size: 13px; color: #64748b; margin-bottom: 6px; font-weight: 600;">إجمالي العملاء المسجلين</h5>
                <h2 style="font-size: 26px; color: #0f172a; font-weight: 800; margin: 0;">
                    {{ number_format($totalCustomersCount) }}
                    <span style="font-size: 13px; color: #94a3b8; font-weight: 600;">عميل</span>
                </h2>
            </div>
            <div class="stat-card-icon">
                <i class="fas fa-users"></i>
            </div>
            <i class="fas fa-users stat-card-watermark"></i>
        </div>
    </div>

    {{-- 2. كارت محرك البحث الذكي --}}
    <div class="col-xl-8 col-lg-7 col-md-6 col-sm-12 mg-b-10-f">
        <div class="card h-100 m-0" style="background: #ffffff; border-radius: 16px; padding: 18px 22px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #edf2f7; display: flex; justify-content: center;">
            <form action="{{ route('customers.directory') }}" method="GET" class="w-100 m-0">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h5 style="font-size: 13px; color: #004d44; margin: 0; font-weight: 700;">
                        <i class="fas fa-search mg-l-3"></i> البحث السريع عن عميل
                    </h5>
                    @if(request('search'))
                        <span class="badge badge-info" style="font-size: 11px;">مصفى حسب: "{{ request('search') }}"</span>
                    @endif
                </div>
                <div class="input-group">
                    <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="ابحث باسم المؤسسة، اسم العميل، أو رقم الجوال..." style="border-radius: 0 10px 10px 0; border: 1px solid #cbd5e1; font-size: 13px; height: 44px; padding: 10px 16px; font-weight: 600;">

                    @if(request('search'))
                        <div class="input-group-append">
                            <a href="{{ route('customers.directory') }}" class="btn btn-light d-flex align-items-center justify-content-center px-3" style="border-radius: 0; border: 1px solid #cbd5e1; border-right: none; height: 44px; color: #64748b;" title="إلغاء البحث">
                                <i class="fas fa-times"></i>
                            </a>
                        </div>
                    @endif

                    <div class="input-group-append">
                        <button type="submit" class="btn text-white px-4" style="background: #004d44; border-radius: 10px 0 0 10px; font-size: 13px; font-weight: 600; height: 44px; transition: all 0.2s;">
                            <i class="fas fa-search mg-l-2"></i> بحـث
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection

@section('content')
<div class="card directory-card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover table-directory text-center align-middle">
                <thead>
                    <tr>
                        <th style="width: 80px;"># ID</th>
                        <th style="text-align: right; min-width: 200px;">اسم العميل / المؤسسة</th>
                        <th style="min-width: 140px;">تاريخ الاشتراك والمدة</th>
                        <th style="min-width: 150px;">رقم الجوال والتواصل</th>
                        <th style="min-width: 180px;">الرابط وبيانات الدخول</th>
                        <th style="width: 120px;">العقد</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($customers as $customer)
                        @php
                            $rawPhone = preg_replace('/[^0-9]/', '', $customer->phone ?? '');
                            $waPhone = str_starts_with($rawPhone, '05') ? '966' . substr($rawPhone, 1) : $rawPhone;
                            $msgWa = urlencode("السلام عليكم ورحمة الله، أهلاً بك عميلنا العزيز " . ($customer->name ?? ''));
                        @endphp
                        <tr>
                            {{-- 1. كود العميل --}}
                            <td>
                                <span style="background: #f0fdf4; color: #166534; padding: 4px 10px; border-radius: 6px; font-weight: 700; font-size: 12px; border: 1px solid #bbf7d0;">
                                    #{{ $customer->id }}
                                </span>
                            </td>

                            {{-- 2. اسم العميل --}}
                            <td style="text-align: right;">
                                <div class="d-flex align-items-center">
                                    <div class="customer-avatar">
                                        {{ mb_substr($customer->name ?? 'ع', 0, 1, 'utf-8') }}
                                    </div>
                                    <div>
                                        <strong class="text-dark d-block" style="font-size: 14px; line-height: 1.4;">
                                            {{ $customer->name ?? '---' }}
                                        </strong>
                                        @if($customer->address)
                                            <small class="text-muted" style="font-size: 11px;">
                                                <i class="fas fa-map-marker-alt text-danger mg-l-2"></i> {{ $customer->address }}
                                            </small>
                                        @endif
                                    </div>
                                </div>
                            </td>

                            {{-- 3. تاريخ الاشتراك --}}
                            <td>
                                @if($customer->subscription_date)
                                    <div class="d-flex flex-column align-items-center" style="gap: 4px;">
                                        <span style="color: #0369a1; background-color: #f0f9ff; padding: 4px 10px; border-radius: 6px; font-weight: 600; font-size: 12px; border: 1px solid #e0f2fe; white-space: nowrap;">
                                            <i class="far fa-calendar-alt mg-l-3" style="font-size: 11px;"></i> {{ \Carbon\Carbon::parse($customer->subscription_date)->format('Y-m-d') }}
                                        </span>

                                        @php
                                            $startDate = \Carbon\Carbon::parse($customer->subscription_date);
                                            $totalMonths = $startDate->diffInMonths(\Carbon\Carbon::now());
                                            $years = round($totalMonths / 12);

                                            if ($years == 0 && $totalMonths >= 6) {
                                                $years = 1;
                                            }

                                            $yearsText = match(true) {
                                                $years <= 0 => 'أقل من سنة',
                                                $years == 1 => 'منذ سنة',
                                                $years == 2 => 'منذ سنتين',
                                                $years >= 3 && $years <= 10 => 'منذ ' . $years . ' سنوات',
                                                default => 'منذ ' . $years . ' سنة'
                                            };
                                        @endphp

                                        <span class="badge badge-light text-muted" style="font-size: 11px; font-weight: 600;">
                                            <i class="fas fa-hourglass-end mg-l-2 text-warning"></i> {{ $yearsText }}
                                        </span>
                                    </div>
                                @else
                                    <span class="text-muted">---</span>
                                @endif
                            </td>

                            {{-- 4. رقم الجوال والتواصل --}}
                            <td>
                                <div class="d-flex align-items-center justify-content-center">
                                    <span dir="ltr" class="text-dark font-weight-bold" style="font-size: 13px;">
                                        {{ $customer->phone ?? '---' }}
                                    </span>
                                    @if(!empty($customer->phone))
                                        <a href="https://wa.me/{{ $waPhone }}?text={{ $msgWa }}" target="_blank" class="btn-whatsapp-direct" title="مراسلة العميل عبر واتساب">
                                            <i class="fab fa-whatsapp"></i>
                                        </a>
                                    @endif
                                </div>
                            </td>

                            {{-- 5. الرابط وبيانات الدخول --}}
                     <td>
                            @if($customer->website_link)
                                {{-- للعميل السحابي الذي يمتلك رابط --}}
                                <a href="{{ Str::startsWith($customer->website_link, ['http://', 'https://']) ? $customer->website_link : 'https://' . $customer->website_link }}"
                                target="_blank"
                                class="text-primary d-inline-flex align-items-center mg-b-4 font-weight-bold"
                                style="text-decoration: none; font-size: 12px;">
                                    <i class="fas fa-external-link-alt mg-l-2" style="font-size: 11px;"></i> فتح النظام السحابي
                                </a>
                            @else
                                {{-- في حال عدم وجود رابط (عميل محلي) --}}
                                <span class="badge mg-b-4" style="background-color: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; font-size: 11px; padding: 4px 10px; border-radius: 6px; font-weight: 700; display: inline-flex; align-items: center;">
                                    <i class="fas fa-hdd mg-l-2 text-secondary"></i> برنامج محلي
                                </span>
                            @endif

                            {{-- بيانات الدخول إن وجدت --}}
                            <div>
                                @if($customer->admin_credentials)
                                    <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 4px 8px; font-size: 11px; color: #334155; display: inline-block; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="بيانات الدخول: {{ $customer->admin_credentials }}">
                                        <i class="fas fa-key text-warning mg-l-2"></i> <span dir="ltr">{{ $customer->admin_credentials }}</span>
                                    </div>
                                @elseif($customer->website_link)
                                    <small class="text-muted" style="font-size: 10px;">(لا توجد بيانات دخول)</small>
                                @endif
                            </div>
                        </td>

                            {{-- 6. إنشاء العقد --}}
                            <td>
                                <a href="{{ route('contract.edit', $customer->id) }}"
                                   target="_blank"
                                   class="contract-btn">
                                    <i class="fas fa-file-signature"></i> العقد
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-muted py-5 text-center">
                                <i class="fas fa-search-minus fa-2x text-muted mb-2 d-block"></i>
                                <span style="font-size: 14px;">لم يتم العثور على أي عملاء مسجلين يطابقون البحث.</span>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- الترقيم والتنقل بين الصفحات --}}
        <div class="d-flex justify-content-center p-4 border-top">
            {!! $customers->links() !!}
        </div>
    </div>
</div>
@endsection