@extends('layouts.app')

@section('title', 'Inactive & Deleted Clients')
@section('page-title', 'Inactive, Suspended & Deleted Clients')

@section('styles')
<style>
/* Enhanced Filter Card Styles for Inactive Clients */
.filter-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.filter-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.filter-header {
    background: #2F4256;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-header h6 {
    color: white !important;
    font-weight: 600;
    letter-spacing: 0.3px;
    font-size: 0.85rem;
    margin: 0;
}

.filter-body {
    padding: 1rem;
    background: white;
}

.form-group {
    margin-bottom: 0;
}

.form-label {
    font-size: 0.75rem;
    margin-bottom: 0.2rem;
    color: #495057;
    font-weight: 500;
}

.form-label i {
    opacity: 0.7;
    font-size: 0.7rem;
}

.input-group-text {
    background: #f8f9fa !important;
    border-color: #e9ecef;
    color: #6c757d;
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
}

.form-control, .form-select {
    border-color: #e9ecef;
    font-size: 0.8rem;
    padding: 0.375rem 0.5rem;
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-outline-secondary {
    border-color: #6c757d;
    color: #6c757d;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-outline-secondary:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

/* Statistics Cards Enhancement */
.stats-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.stats-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    flex-shrink: 0;
}

.stats-icon.total-inactive {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.stats-icon.by-branch {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
}

.stats-icon.by-type {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
}

.stats-icon.by-billing {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
}

.stats-content {
    flex: 1;
}

.stats-value {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.1rem;
}

.stats-label {
    font-size: 0.7rem;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-user-times me-2"></i>
                            Inactive, Suspended & Deleted Clients
                        </h5>
                        <div class="d-flex gap-2">
                            <a href="{{ route('inactive-clients.export', request()->query()) }}" class="btn btn-success btn-sm">
                                <i class="fas fa-download me-2"></i>Export CSV
                            </a>
                        </div>
                    </div>
                </div>
                <div class="custom-card-body">
                    <!-- Enhanced Statistics Cards -->
                    <div class="row mb-3">
                        <div class="col-lg-3 col-md-6 mb-3">
                            <div class="stats-card">
                                <div class="stats-icon total-inactive">
                                    <i class="fas fa-user-times"></i>
                                </div>
                                <div class="stats-content">
                                    <div class="stats-value">{{ $stats['total_inactive'] }}</div>
                                    <div class="stats-label">Total Clients</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 mb-3">
                            <div class="stats-card">
                                <div class="stats-icon by-branch">
                                    <i class="fas fa-building"></i>
                                </div>
                                <div class="stats-content">
                                    <div class="stats-value">{{ $stats['by_branch']->sum() }}</div>
                                    <div class="stats-label">By Branch</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 mb-3">
                            <div class="stats-card">
                                <div class="stats-icon by-type">
                                    <i class="fas fa-tags"></i>
                                </div>
                                <div class="stats-content">
                                    <div class="stats-value">{{ $stats['by_client_type']->sum() }}</div>
                                    <div class="stats-label">By Type</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 mb-3">
                            <div class="stats-card">
                                <div class="stats-icon by-billing">
                                    <i class="fas fa-credit-card"></i>
                                </div>
                                <div class="stats-content">
                                    <div class="stats-value">{{ $stats['by_billing_status']->sum() }}</div>
                                    <div class="stats-label">By Billing</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Enhanced Filter & Search Section -->
                    <div class="filter-card mb-4">
                        <div class="filter-header">
                            <h6><i class="fas fa-search me-2"></i>Filter & Search Clients</h6>
                        </div>
                        <div class="filter-body">
                            <form method="GET" action="{{ route('inactive-clients.index') }}">
                                <div class="row g-3">
                                    <div class="col-lg-3 col-md-6">
                                        <div class="form-group">
                                            <label for="search" class="form-label">
                                                <i class="fas fa-search me-1"></i>Search
                                            </label>
                                            <div class="input-group">
                                                <span class="input-group-text">
                                                    <i class="fas fa-user"></i>
                                                </span>
                                                <input type="text" class="form-control" id="search" name="search" 
                                                       value="{{ $search }}" placeholder="Name, Mobile, Username...">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-6">
                                        <div class="form-group">
                                            <label for="branch_id" class="form-label">
                                                <i class="fas fa-building me-1"></i>Branch
                                            </label>
                                            <div class="input-group">
                                                <span class="input-group-text">
                                                    <i class="fas fa-sitemap"></i>
                                                </span>
                                                <select class="form-select" id="branch_id" name="branch_id">
                                                    <option value="">All Branches</option>
                                                    @foreach($branches as $branch)
                                                        <option value="{{ $branch->id }}" {{ $branch_id == $branch->id ? 'selected' : '' }}>
                                                            {{ $branch->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-6">
                                        <div class="form-group">
                                            <label for="client_type" class="form-label">
                                                <i class="fas fa-tags me-1"></i>Client Type
                                            </label>
                                            <div class="input-group">
                                                <span class="input-group-text">
                                                    <i class="fas fa-tag"></i>
                                                </span>
                                                <select class="form-select" id="client_type" name="client_type">
                                                    <option value="">All Types</option>
                                                    @foreach($clientTypes as $type)
                                                        <option value="{{ $type }}" {{ $client_type == $type ? 'selected' : '' }}>
                                                            {{ $type }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-6">
                                        <div class="form-group">
                                            <label for="billing_status" class="form-label">
                                                <i class="fas fa-credit-card me-1"></i>Billing Status
                                            </label>
                                            <div class="input-group">
                                                <span class="input-group-text">
                                                    <i class="fas fa-receipt"></i>
                                                </span>
                                                <select class="form-select" id="billing_status" name="billing_status">
                                                    <option value="">All Status</option>
                                                    @foreach($billingStatuses as $status)
                                                        <option value="{{ $status }}" {{ $billing_status == $status ? 'selected' : '' }}>
                                                            {{ $status }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-6">
                                        <div class="form-group">
                                            <label for="per_page" class="form-label">
                                                <i class="fas fa-list me-1"></i>Per Page
                                            </label>
                                            <div class="input-group">
                                                <span class="input-group-text">
                                                    <i class="fas fa-th-list"></i>
                                                </span>
                                                <select class="form-select" id="per_page" name="per_page">
                                                    <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10</option>
                                                    <option value="20" {{ request('per_page') == 20 ? 'selected' : '' }}>20</option>
                                                    <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                                                    <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-1 col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">&nbsp;</label>
                                            <div class="d-grid gap-2">
                                                <button type="submit" class="btn btn-primary px-2 py-1">
                                                    <i class="fas fa-search"></i>
                                                </button>
                                                <a href="{{ route('inactive-clients.index') }}" class="btn btn-outline-secondary px-2 py-1">
                                                    <i class="fas fa-times"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Results -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="table-dark">
                                <tr>
                                    <th>ID</th>
                                    <th>Full Name</th>
                                    <th>Mobile</th>
                                    <th>Email</th>
                                    <th>Branch</th>
                                    <th>Client Type</th>
                                    <th>Billing Status</th>
                                    <th>Username/IP</th>
                                    <th>Package</th>
                                    <th>Monthly Bill</th>
                                    <th>Joining Date</th>
                                    <th>Expire Date</th>
                                    <th>MikroTik Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($inactiveClients as $client)
                                    <tr>
                                        <td>{{ $client->id }}</td>
                                        <td>
                                            <strong>{{ $client->full_name }}</strong>
                                            @if($client->is_vip_client)
                                                <span class="badge bg-warning ms-1">VIP</span>
                                            @endif
                                        </td>
                                        <td>{{ $client->mobile_number }}</td>
                                        <td>{{ $client->email_address ?: 'N/A' }}</td>
                                        <td>
                                            @if($client->branch)
                                                <span class="badge bg-info">{{ $client->branch->name }}</span>
                                            @else
                                                <span class="text-muted">N/A</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($client->client_type)
                                                <span class="badge bg-secondary">{{ $client->client_type }}</span>
                                            @else
                                                <span class="text-muted">N/A</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($client->billing_status)
                                                <span class="badge bg-{{ $client->billing_status == 'active' ? 'success' : 'danger' }}">
                                                    {{ $client->billing_status }}
                                                </span>
                                            @else
                                                <span class="text-muted">N/A</span>
                                            @endif
                                        </td>
                                        <td>{{ $client->username_ip ?: 'N/A' }}</td>
                                        <td>{{ $client->package ?: 'N/A' }}</td>
                                        <td>
                                            @if($client->monthly_bill)
                                                <span class="text-success">BDT{{ number_format($client->monthly_bill, 2) }}</span>
                                            @else
                                                <span class="text-muted">N/A</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($client->joining_date)
                                                {{ $client->joining_date->format('d/m/Y') }}
                                            @else
                                                <span class="text-muted">N/A</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($client->expire_date)
                                                {{ $client->expire_date->format('d/m/Y') }}
                                            @else
                                                <span class="text-muted">N/A</span>
                                            @endif
                                        </td>
                                        <td>
                                            @php
                                                $mikrotikStatus = $client->mikrotik_status ?? 'Deleted';
                                            @endphp
                                            @if($mikrotikStatus === 'Enable')
                                                <span class="badge bg-success">Enable</span>
                                            @elseif($mikrotikStatus === 'Disable')
                                                <span class="badge bg-warning">Disable</span>
                                            @elseif($mikrotikStatus === 'Deleted')
                                                <span class="badge bg-danger">Deleted</span>
                                                @if($client->deleted_from_mikrotik_at)
                                                    <small class="text-muted d-block">{{ $client->deleted_from_mikrotik_at->format('d/m/Y H:i') }}</small>
                                                @endif
                                            @else
                                                <span class="badge bg-secondary">{{ $mikrotikStatus }}</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <a href="{{ route('inactive-clients.show', $client) }}" 
                                                   class="btn btn-sm btn-outline-primary" title="View Details">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                <form action="{{ route('inactive-clients.reactivate', $client) }}" 
                                                      method="POST" class="d-inline"
                                                      onsubmit="return confirm('Are you sure you want to reactivate this client?')">
                                                    @csrf
                                                    <button type="submit" class="btn btn-sm btn-outline-success" title="Reactivate">
                                                        <i class="fas fa-user-check"></i>
                                                    </button>
                                                </form>
                                                
                                                @php
                                                    // Check if client exists in Mikrotik based on database field
                                                    $clientInMikrotik = !empty($client->username_ip) && !$client->is_deleted_from_mikrotik;
                                                @endphp
                                                
                                                {{-- Always show delete icon if client is in Mikrotik --}}
                                                @if($clientInMikrotik)
                                                    <form action="{{ route('inactive-clients.delete-from-mikrotik', $client) }}" 
                                                          method="POST" class="d-inline"
                                                          onsubmit="return confirm('Are you sure you want to delete this client from Mikrotik server? This will NOT delete from database.')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete from Mikrotik">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                @endif
                                                
                                                {{-- Always show restore icon if client is not in Mikrotik --}}
                                                @if(!$clientInMikrotik)
                                                    <form action="{{ route('inactive-clients.restore-to-mikrotik', $client) }}" 
                                                          method="POST" class="d-inline"
                                                          onsubmit="return confirm('Are you sure you want to restore this client to Mikrotik server?')">
                                                        @csrf
                                                        <button type="submit" class="btn btn-sm btn-outline-warning" title="Restore to Mikrotik">
                                                            <i class="fas fa-undo"></i>
                                                        </button>
                                                    </form>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="14" class="text-center py-4">
                                            <div class="text-muted">
                                                <i class="fas fa-user-times fa-3x mb-3"></i>
                                                <h5>No inactive clients found</h5>
                                                <p>There are no inactive clients matching your criteria.</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    @if($inactiveClients->hasPages())
                        <div class="d-flex justify-content-between align-items-center mt-4">
                            <div class="text-muted">
                                Showing {{ $inactiveClients->firstItem() }} to {{ $inactiveClients->lastItem() }} 
                                of {{ $inactiveClients->total() }} results
                            </div>
                            <div>
                                {{ $inactiveClients->appends(request()->query())->links() }}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection