@extends('layouts.app')

@section('title', 'Client Request Details')
@section('page-title', 'Client Request Details')

@section('content')
<div class="container-fluid">
    <!-- Back Button -->
    <div class="row mb-3">
        <div class="col-12">
            <a href="{{ route('client-requests.index') }}" class="btn btn-secondary btn-custom">
                <i class="fas fa-arrow-left me-1"></i>Back to Requests
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Client Information -->
        <div class="col-md-8">
            <div class="card custom-card mb-4">
                <div class="card-header custom-card-header">
                    <h5 class="mb-0"><i class="fas fa-user me-2"></i>Client Information</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Customer Name</label>
                                <p class="form-control-plaintext">{{ $clientRequest->customer_name }}</p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">Mobile Number</label>
                                <p class="form-control-plaintext">
                                    <i class="fas fa-phone me-1"></i>{{ $clientRequest->mobile }}
                                </p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">Email</label>
                                <p class="form-control-plaintext">
                                    @if($clientRequest->email)
                                        <i class="fas fa-envelope me-1"></i>{{ $clientRequest->email }}
                                    @else
                                        <span class="text-muted">Not provided</span>
                                    @endif
                                </p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Customer Type</label>
                                <p class="form-control-plaintext">
                                    {{ $clientRequest->customer_type ?: 'Not specified' }}
                                </p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">Connection Type</label>
                                <p class="form-control-plaintext">
                                    {{ $clientRequest->connection_type ?: 'Not specified' }}
                                </p>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">Package</label>
                                <p class="form-control-plaintext">
                                    @if($clientRequest->package)
                                        {{ $clientRequest->package->name }}
                                        @if($clientRequest->package->price)
                                            <span class="text-muted">(BDT{{ number_format($clientRequest->package->price, 2) }})</span>
                                        @endif
                                    @else
                                        <span class="text-muted">No package selected</span>
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Address</label>
                        <p class="form-control-plaintext">
                            <i class="fas fa-map-marker-alt me-1"></i>{{ $clientRequest->address }}
                        </p>
                    </div>
                    
                    @if($clientRequest->latitude && $clientRequest->longitude)
                        <div class="mb-3">
                            <label class="form-label fw-bold">Live Location</label>
                            <div class="location-container">
                                <div class="coordinates-info mb-2">
                                    <small class="text-muted">
                                        <i class="fas fa-globe me-1"></i>
                                        Latitude: {{ $clientRequest->latitude }}, Longitude: {{ $clientRequest->longitude }}
                                    </small>
                                </div>
                                <div class="map-container">
                                    <div id="map-{{ $clientRequest->id }}" class="map-display"></div>
                                </div>
                                <div class="mt-2">
                                    <button class="btn btn-outline-primary btn-sm" onclick="openInGoogleMaps({{ $clientRequest->latitude }}, {{ $clientRequest->longitude }})">
                                        <i class="fas fa-external-link-alt me-1"></i>Open in Google Maps
                                    </button>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="mb-3">
                            <label class="form-label fw-bold">Live Location</label>
                            <p class="form-control-plaintext text-muted">
                                <i class="fas fa-map-marker-alt me-1"></i>Location coordinates not available
                            </p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Request Status and Actions -->
            <div class="card custom-card mb-4">
                <div class="card-header custom-card-header">
                    <h5 class="mb-0"><i class="fas fa-tasks me-2"></i>Request Status & Actions</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="text-center p-3 border rounded">
                                <h6 class="mb-2">Overall Status</h6>
                                @php
                                    $statusClass = match($clientRequest->status) {
                                        'pending' => 'warning',
                                        'processing' => 'info',
                                        'completed' => 'success',
                                        default => 'secondary'
                                    };
                                @endphp
                                <span class="badge bg-{{ $statusClass }} custom-badge fs-6">{{ ucfirst($clientRequest->status) }}</span>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center p-3 border rounded">
                                <h6 class="mb-2">OTC Status</h6>
                                @if($clientRequest->otc_status === 'paid')
                                    <span class="badge bg-success custom-badge fs-6">Paid</span>
                                @else
                                    <span class="badge bg-warning custom-badge fs-6">Pending</span>
                                    @if($clientRequest->otc_connection_charge)
                                        <br><small class="text-muted">BDT{{ number_format($clientRequest->otc_connection_charge, 2) }}</small>
                                    @endif
                                @endif
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center p-3 border rounded">
                                <h6 class="mb-2">Physical Survey</h6>
                                @if($clientRequest->physical_connectivity === 'completed')
                                    <span class="badge bg-success custom-badge fs-6">Completed</span>
                                @else
                                    <span class="badge bg-warning custom-badge fs-6">Pending</span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="d-flex gap-2 flex-wrap">
                                @if($clientRequest->otc_status === 'pending')
                                    <button class="btn btn-success btn-custom" onclick="markOtcPaid({{ $clientRequest->id }})">
                                        <i class="fas fa-check me-1"></i>Mark OTC as Paid
                                    </button>
                                @endif
                                
                                @if($clientRequest->physical_connectivity === 'pending')
                                    <button class="btn btn-info btn-custom" onclick="openPhysicalSurveyModal({{ $clientRequest->id }})">
                                        <i class="fas fa-clipboard-check me-1"></i>Submit Survey Report
                                    </button>
                                @endif
                                
                                <a href="{{ route('client-requests.edit', $clientRequest) }}" class="btn btn-warning btn-custom">
                                    <i class="fas fa-edit me-1"></i>Edit Request
                                </a>
                                
                                <button class="btn btn-danger btn-custom" onclick="deleteRequest({{ $clientRequest->id }})">
                                    <i class="fas fa-trash me-1"></i>Delete Request
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Notes -->
            @if($clientRequest->notes)
                <div class="card custom-card">
                    <div class="card-header custom-card-header">
                        <h5 class="mb-0"><i class="fas fa-sticky-note me-2"></i>Notes & Reports</h5>
                    </div>
                    <div class="card-body">
                        <div class="bg-light p-3 rounded">
                            <pre class="mb-0" style="white-space: pre-wrap; font-family: inherit;">{{ $clientRequest->notes }}</pre>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="col-md-4">
            <!-- Assigned Users -->
            <div class="card custom-card mb-4">
                <div class="card-header custom-card-header">
                    <h5 class="mb-0"><i class="fas fa-users me-2"></i>Assigned Users</h5>
                </div>
                <div class="card-body">
                    <div id="assigned-users-{{ $clientRequest->id }}">
                        @if($clientRequest->assignedUsers->count() > 0)
                            @foreach($clientRequest->assignedUsers as $user)
                                <div class="d-flex align-items-center mb-2 p-2 bg-light rounded">
                                    <div class="user-avatar me-2" style="width: 30px; height: 30px; font-size: 12px;">
                                        {{ strtoupper(substr($user->name, 0, 1)) }}
                                    </div>
                                    <span class="assigned-user">{{ $user->name }}</span>
                                </div>
                            @endforeach
                        @else
                            <p class="text-muted mb-3">No users assigned to this request</p>
                        @endif
                    </div>
                    
                    <button class="btn btn-primary btn-sm w-100" onclick="openAssignUsersModal({{ $clientRequest->id }})">
                        <i class="fas fa-user-plus me-1"></i>Assign Users
                    </button>
                </div>
            </div>

            <!-- Request Information -->
            <div class="card custom-card mb-4">
                <div class="card-header custom-card-header">
                    <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Request Information</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Request ID</label>
                        <p class="form-control-plaintext">#{{ $clientRequest->id }}</p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Created By</label>
                        <p class="form-control-plaintext">
                            @if($clientRequest->creator)
                                <i class="fas fa-user me-1"></i>{{ $clientRequest->creator->name }}
                                <small class="text-muted d-block">{{ $clientRequest->creator->email }}</small>
                            @else
                                <span class="text-muted">Unknown</span>
                            @endif
                        </p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Created At</label>
                        <p class="form-control-plaintext">
                            <i class="fas fa-calendar me-1"></i>{{ $clientRequest->created_at->format('M d, Y h:i A') }}
                        </p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Last Updated</label>
                        <p class="form-control-plaintext">
                            <i class="fas fa-clock me-1"></i>{{ $clientRequest->updated_at->format('M d, Y h:i A') }}
                        </p>
                    </div>
                    
                    @if($clientRequest->live_ip)
                        <div class="mb-3">
                            <label class="form-label fw-bold">Live IP Address</label>
                            <p class="form-control-plaintext">
                                <i class="fas fa-globe me-1"></i>{{ $clientRequest->live_ip }}
                            </p>
                        </div>
                    @endif
                    
                    @if($clientRequest->isp_name)
                        <div class="mb-3">
                            <label class="form-label fw-bold">ISP Name</label>
                            <p class="form-control-plaintext">
                                <i class="fas fa-wifi me-1"></i>{{ $clientRequest->isp_name }}
                            </p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card custom-card">
                <div class="card-header custom-card-header">
                    <h5 class="mb-0"><i class="fas fa-bolt me-2"></i>Quick Actions</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ route('client-requests.create') }}" class="btn btn-success btn-custom">
                            <i class="fas fa-plus me-1"></i>Create New Request
                        </a>
                        <a href="{{ route('client-requests.index') }}" class="btn btn-secondary btn-custom">
                            <i class="fas fa-list me-1"></i>View All Requests
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Physical Survey Modal -->
<div class="modal fade" id="physicalSurveyModal" tabindex="-1" aria-labelledby="physicalSurveyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="physicalSurveyModalLabel">Submit Physical Survey Report</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="physicalSurveyForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="surveyorCheckboxes" class="form-label">Select Surveyor(s)</label>
                        <div id="surveyorCheckboxes" class="border rounded p-3" style="max-height: 150px; overflow-y: auto;">
                            <div class="text-muted">Loading assigned users...</div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="surveyReport" class="form-label">Survey Report</label>
                        <textarea class="form-control" id="surveyReport" name="survey_report" rows="4" 
                                  placeholder="Enter detailed survey findings..." required></textarea>
                        <div class="form-text">Minimum 3 characters required</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" onclick="submitPhysicalSurveyReport()">
                        <i class="fas fa-paper-plane me-1"></i>Submit Report
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Assign Users Modal -->
<div class="modal fade" id="assignUsersModal" tabindex="-1" aria-labelledby="assignUsersModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="assignUsersModalLabel">Assign Users to Request</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="assignUsersForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="userCheckboxes" class="form-label">Select Users to Assign</label>
                        <div id="userCheckboxes" class="border rounded p-3" style="max-height: 300px; overflow-y: auto;">
                            @foreach($users as $user)
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" 
                                           name="user_ids[]" value="{{ $user->id }}" 
                                           id="user_{{ $user->id }}"
                                           {{ $clientRequest->assignedUsers->contains($user->id) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="user_{{ $user->id }}">
                                        {{ $user->name }}
                                        <small class="text-muted">({{ $user->email }})</small>
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" onclick="submitAssignUsers()">
                        <i class="fas fa-save me-1"></i>Save Assignments
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</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 this client request? This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="fas fa-trash me-1"></i>Delete
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Activities Log Section -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card custom-card">
            <div class="card-header custom-card-header">
                <h5 class="mb-0"><i class="fas fa-history me-2"></i>Activities Log</h5>
            </div>
            <div class="card-body">
                @if($clientRequest->activityLogs->count() > 0)
                    <div class="timeline">
                        @foreach($clientRequest->activityLogs as $activity)
                            <div class="timeline-item">
                                <div class="timeline-marker">
                                    <i class="{{ $activity->action_icon }}"></i>
                                </div>
                                <div class="timeline-content">
                                    <div class="timeline-header">
                                        <h6 class="mb-1">{{ $activity->description }}</h6>
                                        <small class="text-muted">
                                            <i class="fas fa-clock me-1"></i>{{ $activity->created_at->format('M d, Y h:i A') }}
                                        </small>
                                    </div>
                                    <div class="timeline-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <strong>User:</strong> {{ $activity->user ? $activity->user->name : 'System' }}
                                            </div>
                                            <div class="col-md-6">
                                                <strong>Action:</strong> {{ ucfirst(str_replace('_', ' ', $activity->action)) }}
                                            </div>
                                        </div>
                                        
                                        @if($activity->old_values || $activity->new_values)
                                            <div class="mt-2">
                                                @if($activity->old_values)
                                                    <div class="mb-1">
                                                        <strong>Previous Values:</strong>
                                                        <div class="bg-light p-2 rounded small">
                                                            @foreach($activity->old_values as $key => $value)
                                                                <div><strong>{{ ucfirst(str_replace('_', ' ', $key)) }}:</strong> {{ is_array($value) ? json_encode($value) : $value }}</div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @endif
                                                
                                                @if($activity->new_values)
                                                    <div class="mb-1">
                                                        <strong>New Values:</strong>
                                                        <div class="bg-light p-2 rounded small">
                                                            @foreach($activity->new_values as $key => $value)
                                                                <div><strong>{{ ucfirst(str_replace('_', ' ', $key)) }}:</strong> {{ is_array($value) ? json_encode($value) : $value }}</div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        @endif
                                        
                                        @if($activity->ip_address)
                                            <div class="mt-2">
                                                <small class="text-muted">
                                                    <i class="fas fa-globe me-1"></i>IP: {{ $activity->ip_address }}
                                                </small>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-4">
                        <i class="fas fa-history fa-3x text-muted mb-3"></i>
                        <p class="text-muted">No activities logged yet.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// Initialize map display when page loads
document.addEventListener('DOMContentLoaded', function() {
    @if($clientRequest->latitude && $clientRequest->longitude)
        initializeMap({{ $clientRequest->latitude }}, {{ $clientRequest->longitude }}, {{ $clientRequest->id }});
    @endif
});

// Initialize map display
function initializeMap(latitude, longitude, requestId) {
    const mapElement = document.getElementById(`map-${requestId}`);
    if (!mapElement) return;
    
    // Create map content
    const mapContent = document.createElement('div');
    mapContent.className = 'map-content';
    mapContent.innerHTML = `
        <div>
            <i class="fas fa-map-marker-alt fa-2x mb-2"></i>
            <div>Live Location</div>
            <small>Click to view on map</small>
        </div>
    `;
    
    mapElement.appendChild(mapContent);
    
    // Add click event to open in Google Maps
    mapElement.addEventListener('click', function() {
        openInGoogleMaps(latitude, longitude);
    });
    
    // Add hover effect
    mapElement.style.cursor = 'pointer';
    mapElement.addEventListener('mouseenter', function() {
        this.style.transform = 'scale(1.02)';
        this.style.transition = 'transform 0.3s ease';
    });
    
    mapElement.addEventListener('mouseleave', function() {
        this.style.transform = 'scale(1)';
    });
}

// Open location in Google Maps
function openInGoogleMaps(latitude, longitude) {
    const url = `https://www.google.com/maps?q=${latitude},${longitude}`;
    window.open(url, '_blank');
}

// Mark OTC as Paid
function markOtcPaid(requestId) {
    if (confirm('Are you sure you want to mark this OTC as paid?')) {
        fetch(`/client-requests/${requestId}/mark-otc-paid`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification(data.message, 'success');
                location.reload();
            } else {
                showNotification(data.message, 'error');
            }
        })
        .catch(error => {
            showNotification('An error occurred', 'error');
        });
    }
}

// Open Physical Survey Modal
function openPhysicalSurveyModal(requestId) {
    loadAssignedUsersAsCheckboxes(requestId);
    document.getElementById('physicalSurveyForm').setAttribute('data-request-id', requestId);
    
    const modal = new bootstrap.Modal(document.getElementById('physicalSurveyModal'));
    modal.show();
}

// Load Assigned Users as Checkboxes
function loadAssignedUsersAsCheckboxes(requestId) {
    const checkboxContainer = document.getElementById('surveyorCheckboxes');
    const assignedContainer = document.getElementById(`assigned-users-${requestId}`);
    
    if (assignedContainer) {
        const assignedUsers = assignedContainer.querySelectorAll('.assigned-user');
        let checkboxHTML = '';
        
        assignedUsers.forEach(user => {
            const userName = user.textContent.trim();
            checkboxHTML += `
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" 
                           name="surveyor_names[]" value="${userName}" id="surveyor_${userName.replace(/\s+/g, '_')}">
                    <label class="form-check-label" for="surveyor_${userName.replace(/\s+/g, '_')}">
                        ${userName}
                    </label>
                </div>
            `;
        });
        
        checkboxContainer.innerHTML = checkboxHTML || '<div class="text-muted">No assigned users found</div>';
    } else {
        checkboxContainer.innerHTML = '<div class="text-muted">No assigned users found</div>';
    }
}

// Submit Physical Survey Report
function submitPhysicalSurveyReport() {
    const form = document.getElementById('physicalSurveyForm');
    const requestId = form.getAttribute('data-request-id');
    const surveyReport = document.getElementById('surveyReport').value;
    
    // Collect selected surveyors
    const selectedSurveyors = [];
    const checkboxes = document.querySelectorAll('input[name="surveyor_names[]"]:checked');
    checkboxes.forEach(checkbox => {
        selectedSurveyors.push(checkbox.value);
    });
    
    if (selectedSurveyors.length === 0) {
        showNotification('Please select at least one surveyor', 'error');
        return;
    }
    
    if (surveyReport.length < 3) {
        showNotification('Survey report must be at least 3 characters', 'error');
        return;
    }
    
    const formData = {
        surveyor_name: selectedSurveyors.join(', '),
        survey_report: surveyReport
    };
    
    fetch(`/client-requests/${requestId}/submit-physical-survey-report`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showNotification(data.message, 'success');
            location.reload();
        } else {
            showNotification(data.message, 'error');
        }
    })
    .catch(error => {
        showNotification('An error occurred', 'error');
    });
}

// Open Assign Users Modal
function openAssignUsersModal(requestId) {
    document.getElementById('assignUsersForm').setAttribute('data-request-id', requestId);
    
    const modal = new bootstrap.Modal(document.getElementById('assignUsersModal'));
    modal.show();
}

// Submit Assign Users
function submitAssignUsers() {
    const form = document.getElementById('assignUsersForm');
    const requestId = form.getAttribute('data-request-id');
    
    // Collect selected users
    const selectedUsers = [];
    const checkboxes = document.querySelectorAll('input[name="user_ids[]"]:checked');
    checkboxes.forEach(checkbox => {
        selectedUsers.push(parseInt(checkbox.value));
    });
    
    const formData = {
        user_ids: selectedUsers
    };
    
    fetch(`/client-requests/${requestId}/assign-users`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showNotification(data.message, 'success');
            location.reload();
        } else {
            showNotification(data.message, 'error');
        }
    })
    .catch(error => {
        showNotification('An error occurred', 'error');
    });
}

// Delete Request
function deleteRequest(requestId) {
    document.getElementById('confirmDeleteBtn').onclick = function() {
        fetch(`/client-requests/${requestId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => {
            if (response.ok) {
                showNotification('Client request deleted successfully', 'success');
                window.location.href = '{{ route("client-requests.index") }}';
            } else {
                showNotification('Failed to delete client request', 'error');
            }
        })
        .catch(error => {
            showNotification('An error occurred', 'error');
        });
    };
    
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    modal.show();
}

// Show Notification
function showNotification(message, type) {
    const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
    const iconClass = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';
    
    const notification = document.createElement('div');
    notification.className = `alert ${alertClass} alert-dismissible fade show position-fixed`;
    notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    notification.innerHTML = `
        <i class="fas ${iconClass} me-2"></i>
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(notification);
    
    // Auto remove after 5 seconds
    setTimeout(() => {
        if (notification.parentNode) {
            notification.remove();
        }
    }, 5000);
}
</script>

<style>
.user-avatar {
    background-color: var(--accent-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Live Location Styles */
.location-container {
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    background-color: #f8f9fa;
}

.map-container {
    margin: 10px 0;
}

.map-display {
    width: 100%;
    height: 300px;
    border-radius: 8px;
    border: 2px solid #dee2e6;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    position: relative;
    overflow: hidden;
}

.map-display::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" opacity="0.3"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>') center/contain no-repeat;
}

.map-display .map-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.coordinates-info {
    background-color: #e3f2fd;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 4px solid #2196f3;
}

@media (max-width: 768px) {
    .map-display {
        height: 250px;
    }
}

#userCheckboxes {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 1rem;
    max-height: 300px;
    overflow-y: auto;
}

#userCheckboxes .form-check {
    padding-left: 0;
}

#userCheckboxes .form-check-input {
    margin-right: 8px;
}

#userCheckboxes .form-check-label {
    font-weight: 500;
    color: #495057;
    cursor: pointer;
}

#userCheckboxes .form-check-input:checked + .form-check-label {
    color: #0d6efd;
    font-weight: 600;
}

label[for="userCheckboxes"] {
    padding-left: 1.3125rem;
}

/* Timeline Styles */
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e9ecef;
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
}

.timeline-marker {
    position: absolute;
    left: -22px;
    top: 0;
    width: 30px;
    height: 30px;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.timeline-marker i {
    font-size: 12px;
}

.timeline-content {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.timeline-header h6 {
    color: #333;
    margin-bottom: 5px;
}

.timeline-body {
    margin-top: 10px;
}

.timeline-body .bg-light {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef;
}

.timeline-body small {
    font-size: 0.875rem;
}
</style>
@endsection