@extends('layouts.app')

@section('content')
<style>
    .business-container {
        padding: 30px;
        background: #f8f9fa;
        min-height: calc(100vh - 60px);
    }

    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        flex-wrap: wrap;
        gap: 15px;
    }

    .page-header h2 {
        font-size: 28px;
        color: #1a202c;
        font-weight: 600;
        margin: 0;
    }

    .btn-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 12px 30px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
    }

    .table-container {
        background: white;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        overflow: hidden;
    }

    .business-table {
        width: 100%;
        border-collapse: collapse;
    }

    .business-table thead {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .business-table thead th {
        padding: 18px 15px;
        text-align: left;
        font-weight: 600;
        color: white;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .business-table tbody tr {
        border-bottom: 1px solid #e2e8f0;
        transition: all 0.3s ease;
    }

    .business-table tbody tr:hover {
        background: #f7fafc;
        transform: scale(1.01);
    }

    .business-table tbody td {
        padding: 18px 15px;
        color: #4a5568;
        font-size: 14px;
    }

    .status-badge {
        display: inline-block;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        text-transform: capitalize;
    }

    .status-badge.active {
        background: #d4edda;
        color: #155724;
    }

    .status-badge.inactive {
        background: #f8d7da;
        color: #721c24;
    }

    .action-buttons {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .btn-view, .btn-edit, .btn-delete {
        padding: 8px 16px;
        border: none;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .btn-view {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .btn-view:hover {
        background: #2e7d32;
        color: white;
        transform: translateY(-2px);
    }

    .btn-edit {
        background: #e3f2fd;
        color: #1976d2;
    }

    .btn-edit:hover {
        background: #1976d2;
        color: white;
        transform: translateY(-2px);
    }

    .btn-delete {
        background: #ffebee;
        color: #c62828;
    }

    .btn-delete:hover {
        background: #c62828;
        color: white;
        transform: translateY(-2px);
    }

    .plan-badge {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        color: #667eea;
        padding: 6px 12px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 13px;
    }

    /* Modal Styles */
    .modal-overlay {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .modal-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    .modal-content {
        background: white;
        border-radius: 20px;
        padding: 35px;
        width: 90%;
        max-width: 500px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        animation: modalSlideIn 0.3s ease;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-content.large {
        max-width: 650px;
    }

    @keyframes modalSlideIn {
        from {
            transform: translateY(-50px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
    }

    .modal-header h3 {
        font-size: 24px;
        color: #1a202c;
        margin: 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .close-btn {
        background: none;
        border: none;
        font-size: 28px;
        color: #718096;
        cursor: pointer;
        line-height: 1;
        transition: all 0.3s ease;
    }

    .close-btn:hover {
        color: #764ba2;
        transform: rotate(90deg);
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #4a5568;
        font-size: 14px;
        font-weight: 600;
    }

    .form-group input,
    .form-group select {
        width: 100%;
        padding: 12px 15px;
        border: 2px solid #e2e8f0;
        border-radius: 10px;
        font-size: 14px;
        transition: all 0.3s ease;
        background: #f7fafc;
    }

    .form-group input:focus,
    .form-group select:focus {
        outline: none;
        border-color: #667eea;
        background: white;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .form-group input[readonly] {
        background: #e2e8f0;
        cursor: not-allowed;
    }

    .form-actions {
        display: flex;
        gap: 10px;
        margin-top: 25px;
    }

    .btn-save {
        flex: 1;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 14px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-save:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
    }

    .btn-cancel {
        flex: 1;
        background: #e2e8f0;
        color: #4a5568;
        border: none;
        padding: 14px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-cancel:hover {
        background: #cbd5e0;
    }

    /* View Modal - Business Info Card */
    .business-info-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 15px;
        padding: 25px;
        margin-bottom: 25px;
        color: white;
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    }

    .business-info-card h4 {
        font-size: 24px;
        margin: 0 0 8px 0;
        font-weight: 700;
    }

    .business-info-card .email {
        font-size: 14px;
        opacity: 0.9;
        margin-bottom: 20px;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        margin-top: 15px;
    }

    .info-item {
        background: rgba(255, 255, 255, 0.15);
        padding: 12px 15px;
        border-radius: 10px;
        backdrop-filter: blur(10px);
    }

    .info-item-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0.8;
        margin-bottom: 5px;
    }

    .info-item-value {
        font-size: 16px;
        font-weight: 600;
    }

    /* History Timeline */
    .history-section {
        margin-top: 30px;
    }

    .history-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 2px solid #667eea;
    }

    .history-header h4 {
        font-size: 18px;
        color: #1a202c;
        margin: 0;
        flex: 1;
    }

    .history-count {
        background: #667eea;
        color: white;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .history-timeline {
        max-height: 400px;
        overflow-y: auto;
        padding-right: 10px;
    }

    .history-timeline::-webkit-scrollbar {
        width: 6px;
    }

    .history-timeline::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .history-timeline::-webkit-scrollbar-thumb {
        background: #667eea;
        border-radius: 10px;
    }

    .timeline-item {
        display: flex;
        margin-bottom: 20px;
        position: relative;
        padding-left: 35px;
    }

    .timeline-line {
        position: absolute;
        left: 8px;
        top: 20px;
        bottom: -20px;
        width: 2px;
        background: linear-gradient(180deg, #667eea 0%, #e2e8f0 100%);
    }

    .timeline-item:last-child .timeline-line {
        display: none;
    }

    .timeline-dot {
        position: absolute;
        left: 0;
        top: 6px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: white;
        border: 3px solid #a0aec0;
        box-shadow: 0 0 0 4px rgba(160, 174, 192, 0.2);
        z-index: 2;
    }

    .timeline-dot.current {
        background: #667eea;
        border-color: #667eea;
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0%, 100% {
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
        }
        50% {
            box-shadow: 0 0 0 8px rgba(102, 126, 234, 0.1);
        }
    }

    .timeline-content {
        flex: 1;
        background: white;
        padding: 18px;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        border-left: 4px solid #a0aec0;
        transition: all 0.3s ease;
    }

    .timeline-content:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        transform: translateX(5px);
    }

    .timeline-content.current-item {
        border-left-color: #667eea;
    }

    .timeline-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
    }

    .timeline-type {
        font-weight: 700;
        color: #1a202c;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .current-badge {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .timeline-details {
        font-size: 13px;
        color: #4a5568;
        line-height: 1.8;
    }

    .timeline-details strong {
        color: #1a202c;
        font-weight: 600;
    }

    .timeline-period {
        background: #f7fafc;
        padding: 8px 12px;
        border-radius: 8px;
        margin: 10px 0;
        font-size: 13px;
    }

    .timeline-footer {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #e2e8f0;
        font-size: 12px;
        color: #718096;
        font-style: italic;
    }

    .timeline-notes {
        margin-top: 10px;
        padding: 10px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
        border-left: 3px solid #667eea;
        border-radius: 6px;
        font-size: 13px;
        color: #667eea;
        font-style: italic;
    }

    .empty-history {
        text-align: center;
        padding: 60px 20px;
        color: #718096;
    }

    .empty-history ion-icon {
        font-size: 60px;
        color: #cbd5e0;
        margin-bottom: 15px;
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #718096;
    }

    .empty-state ion-icon {
        font-size: 80px;
        color: #cbd5e0;
        margin-bottom: 20px;
    }

    .empty-state p {
        font-size: 18px;
        margin: 0;
    }

    @media (max-width: 768px) {
        .business-container {
            padding: 15px;
        }

        .page-header h2 {
            font-size: 22px;
        }

        .table-container {
            overflow-x: auto;
        }

        .business-table {
            min-width: 800px;
        }

        .modal-content {
            padding: 25px;
        }

        .info-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="business-container">
    <div class="page-header">
        <h2>Business Management</h2>
        <button class="btn-primary" onclick="openForm()">
            <ion-icon name="add-circle-outline"></ion-icon>
            Add Business
        </button>
    </div>

    <div class="table-container">
        <table class="business-table">
            <thead>
                <tr>
                    <th>Business Name</th>
                    <th>Email</th>
                    <th>Plan</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="businessTable">
                <tr>
                    <td colspan="7" class="empty-state">
                        <ion-icon name="business-outline"></ion-icon>
                        <p>Loading businesses...</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- ADD / EDIT MODAL -->
<div id="businessModal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalTitle">Add Business</h3>
            <button class="close-btn" onclick="closeForm()">×</button>
        </div>

        <form id="businessForm">
            <input type="hidden" id="business_id">

            <div class="form-group">
                <label>Business Name <span style="color:red;">*</span></label>
                <input type="text" id="name" placeholder="Enter business name" required onkeyup="previewEmail()">
            </div>

            <div class="form-group">
                <label>Auto Generated Email</label>
                <input type="email" id="email" readonly>
            </div>

            <div class="form-group">
                <label>Subscription Plan <span style="color:red;">*</span></label>
                <select id="plan_id" required>
                    <option value="">Select a plan</option>
                    @foreach($plans as $plan)
                        <option value="{{ $plan->id }}">{{ $plan->name }} ({{ $plan->duration_days }} days)</option>
                    @endforeach
                </select>
            </div>

            <div class="form-group" id="statusGroup" style="display:none;">
                <label>Status</label>
                <select id="status">
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                </select>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn-save">Save Business</button>
                <button type="button" class="btn-cancel" onclick="closeForm()">Cancel</button>
            </div>
        </form>
    </div>
</div>

<!-- VIEW MODAL -->
<div id="viewModal" class="modal-overlay">
    <div class="modal-content large">
        <div class="modal-header">
            <h3>Business Details</h3>
            <button class="close-btn" onclick="closeView()">×</button>
        </div>
        <div id="viewBody"></div>
    </div>
</div>

@endsection

@section('scripts')
<script>
function previewEmail() {
    let name = document.getElementById('name').value.trim();
    if (!name) {
        document.getElementById('email').value = '';
        return;
    }
    let slug = name.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
    let random = Math.random().toString(36).substring(2, 8);
    document.getElementById('email').value = 'admin@' + slug + '-' + random + '.com';
}

function loadBusinesses() {
    fetch('/api/businesses')
        .then(r => r.json())
        .then(data => {
            let rows = '';
            if (data.length === 0) {
                rows = `<tr><td colspan="7" class="empty-state">
                    <ion-icon name="business-outline"></ion-icon>
                    <p>No businesses found. Click "Add Business" to create one!</p>
                </td></tr>`;
            } else {
                data.forEach(b => {
                    const current = b.current_history || {};
                    const planName = current.plan?.name || '—';
                    const startDate = current.subscription_start || '—';
                    const endDate   = current.subscription_end   || '—';
                    const status    = current.status || 'unknown';

                    rows += `
                    <tr>
                        <td><strong>${b.name}</strong></td>
                        <td>${b.email}</td>
                        <td><span class="plan-badge">${planName}</span></td>
                        <td class="date-text">${startDate}</td>
                        <td class="date-text">${endDate}</td>
                        <td><span class="status-badge ${status}">${status}</span></td>
                        <td>
                            <div class="action-buttons">
                                <button class="btn-view" onclick="viewBusiness(${b.id})">
                                    <ion-icon name="eye-outline"></ion-icon> View
                                </button>
                                <button class="btn-edit" onclick="editBusiness(${b.id})">
                                    <ion-icon name="create-outline"></ion-icon> Edit
                                </button>
                                <button class="btn-delete" onclick="deleteBusiness(${b.id})">
                                    <ion-icon name="trash-outline"></ion-icon> Delete
                                </button>
                            </div>
                        </td>
                    </tr>`;
                });
            }
            document.getElementById('businessTable').innerHTML = rows;
        })
        .catch(() => {
            document.getElementById('businessTable').innerHTML = `
                <tr><td colspan="7" style="text-align:center; color:#c62828; padding:40px;">
                    Error loading data. Please refresh.
                </td></tr>`;
        });
}

function openForm() {
    document.getElementById('businessForm').reset();
    document.getElementById('business_id').value = '';
    document.getElementById('modalTitle').textContent = 'Add Business';
    document.getElementById('statusGroup').style.display = 'none';
    document.getElementById('email').value = '';
    document.getElementById('businessModal').classList.add('show');
}

function closeForm() {
    document.getElementById('businessModal').classList.remove('show');
}

function closeView() {
    document.getElementById('viewModal').classList.remove('show');
}

document.getElementById('businessModal').onclick = e => {
    if (e.target.id === 'businessModal') closeForm();
};

document.getElementById('viewModal').onclick = e => {
    if (e.target.id === 'viewModal') closeView();
};

document.getElementById('businessForm').onsubmit = function(e) {
    e.preventDefault();
    const id = document.getElementById('business_id').value;
    const url = id ? `/api/businesses/${id}` : '/api/businesses';
    const method = id ? 'PUT' : 'POST';

    const payload = {
        name: document.getElementById('name').value.trim(),
        plan_id: document.getElementById('plan_id').value,
    };
    if (id) payload.status = document.getElementById('status').value;

    fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify(payload)
    })
    .then(res => res.json())
    .then(result => {
        if (result.success) {
            let msg = result.message;
            if (result.subscription_renewed) {
                msg += "\n\nSubscription dates have been renewed from today!";
            }
            alert(msg);
            closeForm();
            loadBusinesses();
        } else {
            alert('Error: ' + (result.message || 'Failed'));
        }
    })
    .catch(() => alert('Network error.'));
};

function editBusiness(id) {
    fetch(`/api/businesses/${id}`)
        .then(r => r.json())
        .then(b => {
            const current = b.current_history || {};

            document.getElementById('business_id').value = b.id;
            document.getElementById('name').value = b.name;
            document.getElementById('email').value = b.email;
            document.getElementById('plan_id').value = current.plan_id || '';
            document.getElementById('status').value = current.status || 'active';

            document.getElementById('statusGroup').style.display = 'block';
            document.getElementById('modalTitle').textContent = 'Edit Business';
            document.getElementById('businessModal').classList.add('show');
        })
        .catch(() => alert('Error loading business for editing'));
}

function viewBusiness(id) {
    fetch(`/api/businesses/${id}/history`)
        .then(r => r.json())
        .then(data => {
            const b = data.business;
            const histories = data.histories;

            const current = b.current_history || {};
            const currentPlanName = current.plan?.name || 'No active plan';
            const currentStatus   = current.status || 'unknown';
            const currentEndDate  = current.subscription_end || '—';

            let historyHtml = '';

            if (histories.length === 0) {
                historyHtml = `
                <div class="history-section">
                    <div class="history-header">
                        <h4>Subscription & Plan History</h4>
                    </div>
                    <div class="empty-history">
                        <ion-icon name="time-outline"></ion-icon>
                        <p>No history recorded yet.</p>
                    </div>
                </div>`;
            } else {
                historyHtml = `
                <div class="history-section">
                    <div class="history-header">
                        <h4>Subscription & Plan History</h4>
                        <span class="history-count">${histories.length} Records</span>
                    </div>
                    <div class="history-timeline">`;

                histories.forEach((h, index) => {
                    const isFirst = index === 0;
                    const date = new Date(h.created_at).toLocaleDateString('en-US', {
                        year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit'
                    });
                    const contentClass = isFirst ? 'current-item' : '';

                    historyHtml += `
                    <div class="timeline-item">
                        <div class="timeline-line"></div>
                        <div class="timeline-dot ${isFirst ? 'current' : ''}"></div>
                        <div class="timeline-content ${contentClass}">
                            <div class="timeline-header">
                                <span class="timeline-type">${h.change_type.replace('_', ' ')}</span>
                                ${isFirst ? '<span class="current-badge">CURRENT</span>' : ''}
                            </div>
                            <div class="timeline-details">
                                <div style="margin-bottom:8px;">
                                    <strong>Plan:</strong> <span class="plan-badge">${h.plan_name || 'Unknown'}</span>
                                    ${h.duration_days ? `<span style="color:#718096;"> • ${h.duration_days} days</span>` : ''}
                                </div>
                                <div class="timeline-period">
                                    <ion-icon name="calendar-outline" style="vertical-align:middle; margin-right:5px;"></ion-icon>
                                    <strong>${h.subscription_start}</strong> → <strong>${h.subscription_end}</strong>
                                </div>
                                <div style="margin-top:8px;">
                                    <strong>Status:</strong> <span class="status-badge ${h.status}">${h.status}</span>
                                </div>
                            </div>
                            ${h.notes ? `<div class="timeline-notes"><ion-icon name="information-circle-outline" style="vertical-align:middle; margin-right:5px;"></ion-icon>${h.notes}</div>` : ''}
                            <div class="timeline-footer">
                                <ion-icon name="time-outline" style="vertical-align:middle; margin-right:3px;"></ion-icon>
                                ${date}
                            </div>
                        </div>
                    </div>`;
                });

                historyHtml += `</div></div>`;
            }

            document.getElementById('viewBody').innerHTML = `
                <div class="business-info-card">
                    <h4>${b.name}</h4>
                    <div class="email">
                        <ion-icon name="mail-outline" style="vertical-align:middle; margin-right:5px;"></ion-icon>
                        ${b.email}
                    </div>
                    <div class="info-grid">
                        <div class="info-item">
                            <div class="info-item-label">Current Plan</div>
                            <div class="info-item-value">${currentPlanName}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-item-label">Status</div>
                            <div class="info-item-value">${currentStatus.toUpperCase()}</div>
                        </div>
                        <div class="info-item">
                            <div class="info-item-label">End Date</div>
                            <div class="info-item-value">${currentEndDate}</div>
                        </div>
                    </div>
                </div>

                ${historyHtml}
            `;

            document.getElementById('viewModal').classList.add('show');
        })
        .catch(err => {
            alert('Error loading business details and history.');
            console.error(err);
        });
}

function deleteBusiness(id) {
    if (confirm('Are you sure you want to delete this business?')) {
        fetch(`/api/businesses/${id}`, { method: 'DELETE' })
            .then(() => {
                alert('Business deleted!');
                loadBusinesses();
            })
            .catch(() => alert('Error deleting business.'));
    }
}

// Initial load
loadBusinesses();
</script>
@endsection