<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fitting Alteration Requests - Seller Dashboard</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body { background-color: #f8f9fa; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .sidebar { min-height: 100vh; background: linear-gradient(180deg, #667eea 0%, #764ba2 100%); }
        .sidebar .nav-link { color: rgba(255,255,255,0.8); padding: 12px 20px; margin: 5px 0; border-radius: 8px; }
        .sidebar .nav-link:hover, .sidebar .nav-link.active { background: rgba(255,255,255,0.2); color: white; }
        .main-content { padding: 30px; }
        .card { border: none; border-radius: 15px; box-shadow: 0 2px 15px rgba(0,0,0,0.08); margin-bottom: 20px; }
        .badge-pending { background: #ff9800; }
        .badge-accepted { background: #4caf50; }
        .badge-rejected { background: #f44336; }
        .badge-completed { background: #2196f3; }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- Sidebar -->
            <div class="col-md-2 sidebar">
                <?= view('seller/sidebar', ['user' => $user]) ?>
            </div>

            <!-- Main Content -->
            <div class="col-md-10 main-content">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2><i class="bi bi-scissors"></i> Fitting Alteration Requests</h2>
                </div>

                <?php if (empty($requests)): ?>
                    <div class="card">
                        <div class="card-body text-center py-5">
                            <i class="bi bi-inbox" style="font-size: 4rem; color: #ccc;"></i>
                            <h5 class="mt-3">No Alteration Requests</h5>
                            <p class="text-muted">You haven't received any fitting alteration requests yet.</p>
                        </div>
                    </div>
                <?php else: ?>
                    <?php foreach ($requests as $request): ?>
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-8">
                                        <h5 class="card-title">
                                            <?= esc($request['product_title']) ?>
                                            <span class="badge badge-<?= $request['status'] ?>"><?= ucfirst($request['status']) ?></span>
                                        </h5>
                                        <p class="text-muted mb-2">
                                            <i class="bi bi-person"></i> Buyer: <?= esc($request['buyer_name']) ?> 
                                            (<?= esc($request['buyer_email']) ?>)
                                        </p>
                                        <p class="text-muted mb-2">
                                            <i class="bi bi-calendar"></i> Requested: <?= date('M d, Y H:i', strtotime($request['created_at'])) ?>
                                        </p>
                                        
                                        <div class="alert alert-info mt-3">
                                            <strong>Alteration Details:</strong><br>
                                            <?= nl2br(esc($request['alteration_details'])) ?>
                                        </div>

                                        <?php if ($request['seller_response']): ?>
                                            <div class="alert alert-secondary">
                                                <strong>Your Response:</strong><br>
                                                <?= nl2br(esc($request['seller_response'])) ?>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                    <div class="col-md-4">
                                        <?php if ($request['status'] === 'pending'): ?>
                                            <button class="btn btn-success w-100 mb-2" onclick="respondToRequest(<?= $request['id'] ?>, 'accepted')">
                                                <i class="bi bi-check-circle"></i> Accept Request
                                            </button>
                                            <button class="btn btn-danger w-100" onclick="respondToRequest(<?= $request['id'] ?>, 'rejected')">
                                                <i class="bi bi-x-circle"></i> Reject Request
                                            </button>
                                        <?php elseif ($request['status'] === 'accepted'): ?>
                                            <button class="btn btn-primary w-100" onclick="markCompleted(<?= $request['id'] ?>)">
                                                <i class="bi bi-check-all"></i> Mark as Completed
                                            </button>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- Response Modal -->
    <div class="modal fade" id="responseModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="responseForm">
                    <div class="modal-header">
                        <h5 class="modal-title">Response to Buyer</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="requestId" name="request_id">
                        <input type="hidden" id="responseStatus" name="status">
                        <div class="mb-3">
                            <label class="form-label">Your Response (Optional)</label>
                            <textarea class="form-control" name="response" rows="4" 
                                      placeholder="Add any additional information or instructions..."></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Send Response</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function respondToRequest(requestId, status) {
            document.getElementById('requestId').value = requestId;
            document.getElementById('responseStatus').value = status;
            new bootstrap.Modal(document.getElementById('responseModal')).show();
        }

        function markCompleted(requestId) {
            if (confirm('Mark this alteration as completed?')) {
                const formData = new FormData();
                formData.append('status', 'completed');
                formData.append('response', 'Fitting alteration completed successfully');

                fetch('/seller/respondToFittingAlteration/' + requestId, {
                    method: 'POST',
                    body: formData
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        alert('✅ ' + data.message);
                        location.reload();
                    } else {
                        alert('❌ ' + data.message);
                    }
                });
            }
        }

        document.getElementById('responseForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const requestId = formData.get('request_id');

            fetch('/seller/respondToFittingAlteration/' + requestId, {
                method: 'POST',
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    alert('✅ ' + data.message);
                    location.reload();
                } else {
                    alert('❌ ' + data.message);
                }
            })
            .catch(err => alert('Error sending response'));
        });
    </script>
</body>
</html>
