@extends('layouts.app')
@section('content')
<div class="container-fluid py-3">
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white py-3">
                    <h5 class="mb-0"><i class="fas fa-users me-2"></i>Edit/Delete Clients</h5>
                </div>
                <div class="card-body">
                    <!-- Search Form -->
                    <form method="GET" action="{{ route('clients.edit-delete') }}" class="mb-4">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="client_number" class="form-label"><strong>Client Number</strong></label>
                                <input type="text" class="form-control" id="client_number" name="client_number" 
                                       value="{{ request('client_number') }}" placeholder="Enter client number">
                            </div>
                            <div class="col-md-4">
                                <label for="first_name" class="form-label"><strong>First Name</strong></label>
                                <input type="text" class="form-control" id="first_name" name="first_name" 
                                       value="{{ request('first_name') }}" placeholder="Enter first name">
                            </div>
                            <div class="col-md-4">
                                <label for="status" class="form-label"><strong>Status</strong></label>
                                <select class="form-control" id="status" name="status">
                                    <option value="">All Status</option>
                                    <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                                    <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    <option value="suspended" {{ request('status') == 'suspended' ? 'selected' : '' }}>Suspended</option>
                                    <option value="blacklisted" {{ request('status') == 'blacklisted' ? 'selected' : '' }}>Blacklisted</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-search"></i> Search
                                </button>
                                <a href="{{ route('clients.edit-delete') }}" class="btn btn-outline-secondary">
                                    <i class="fas fa-times"></i> Clear
                                </a>
                            </div>
                        </div>
                    </form>

                    <!-- Results Table -->
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="bg-success text-white">
                                <tr>
                                    <th>ID</th>
                                    <th>Client Name</th>
                                    <th>Email</th>
                                    <th>Phone</th>
                                    <th>Status</th>
                                    <th style="width:180px">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($clients as $client)
                                    <tr>
                                        <td>{{ $client->id }}</td>
                                        <td>{{ $client->first_name }} {{ $client->last_name }}</td>
                                        <td>{{ $client->email }}</td>
                                        <td>{{ $client->phone }}</td>
                                        <td>
                                            @php
                                                $badgeColor = 'secondary';
                                                if ($client->status == 'active') $badgeColor = 'success';
                                                elseif ($client->status == 'suspended') $badgeColor = 'warning';
                                                elseif ($client->status == 'blacklisted') $badgeColor = 'danger';
                                                elseif ($client->status == 'inactive') $badgeColor = 'secondary';
                                            @endphp
                                            <span class="badge bg-{{ $badgeColor }}">
                                                {{ ucfirst($client->status) }}
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            <a href="{{ route('clients.edit', $client) }}" 
                                               class="btn btn-sm btn-success">
                                                <i class="fas fa-edit"></i> Edit
                                            </a>
                                            <button class="btn btn-sm btn-danger deleteBtn"
                                                    data-id="{{ $client->id }}"
                                                    data-name="{{ $client->first_name }} {{ $client->last_name }}">
                                                <i class="fas fa-trash"></i> Delete
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-4">No clients found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Pagination -->
                    <div class="mt-3">
                        {{ $clients->appends(request()->query())->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">Confirm Deletion</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete client <strong id="clientNameDisplay"></strong>?</p>
                <p class="text-danger"><small>This action cannot be undone and will remove all associated data.</small></p>
            </div>
            <div class="modal-footer">
                <button id="cancelDeleteBtn" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteForm" method="POST" action="" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const deleteButtons = document.querySelectorAll('.deleteBtn');
        const deleteForm = document.getElementById('deleteForm');
        const clientNameDisplay = document.getElementById('clientNameDisplay');
        const modal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));

        deleteButtons.forEach(button => {
            button.addEventListener('click', function() {
                const clientId = this.getAttribute('data-id');
                const clientName = this.getAttribute('data-name');
                const actionUrl = "{{ route('clients.destroy', ':id') }}".replace(':id', clientId);

                clientNameDisplay.textContent = clientName;
                deleteForm.action = actionUrl;
                modal.show();
            });
        });

        // Close modal when cancel button is clicked
        document.getElementById('cancelDeleteBtn').addEventListener('click', function() {
            modal.hide();
        });
    });
</script>

<style>
.card {
    border-radius: 8px;
    overflow: hidden;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.card-header {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.table th {
    background-color: #f8f9fa;
}
.badge {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.85em;
}
.pagination {
    margin-bottom: 0;
}
</style>
@endsection