@extends('layouts.app')

@section('content')
<style>
    /* Basic Container */
    .package-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;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
    }

    .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;
    }

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

    .package-table th, .package-table td {
        padding: 18px 20px;
        text-align: left;
        font-size: 14px;
    }

    .package-table thead {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 0.5px;
    }

    .package-table tbody tr {
        border-bottom: 1px solid #e9ecef;
        transition: all 0.2s ease;
    }

    .package-table tbody tr:hover {
        background: #f8f9fa;
    }

    .package-table tbody tr:last-child {
        border-bottom: none;
    }

    .package-name {
        font-weight: 600;
        color: #2d3748;
        font-size: 15px;
    }

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

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

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

    .action-buttons button {
        padding: 8px 16px;
        font-size: 13px;
        border-radius: 8px;
        cursor: pointer;
        border: none;
        font-weight: 500;
        transition: all 0.2s ease;
    }

    .action-buttons button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .btn-edit { background: #e3f2fd; color: #1976d2; }
    .btn-delete { background: #ffebee; color: #c62828; }
    .btn-view { background: #fff3cd; color: #856404; }

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

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

    .modal-content {
        background: white;
        border-radius: 20px;
        padding: 35px;
        width: 90%;
        max-width: 550px;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-header { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 2px solid #e9ecef;
    }
    
    .modal-header h3 { 
        font-size: 24px; 
        color: #1a202c; 
        margin: 0;
        font-weight: 700;
    }
    
    .close-btn { 
        cursor: pointer; 
        font-size: 32px; 
        border: none; 
        background: none;
        color: #718096;
        transition: color 0.2s ease;
    }

    .close-btn:hover {
        color: #2d3748;
    }

    .form-group { 
        margin-bottom: 20px; 
    }
    
    .form-group label { 
        display: block; 
        margin-bottom: 8px; 
        font-weight: 600;
        color: #2d3748;
        font-size: 14px;
    }
    
    .form-group input[type="text"],
    .form-group input[type="number"],
    .form-group select:not(#modules) { 
        width: 100%; 
        padding: 12px 15px; 
        border-radius: 10px; 
        border: 2px solid #e2e8f0;
        font-size: 14px;
        transition: all 0.3s ease;
    }

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

    /* Custom Multi-Select Module Design */
    .modules-container {
        border: 2px solid #e2e8f0;
        border-radius: 10px;
        padding: 15px;
        max-height: 75px;
        overflow-y: auto;
        background: #f8f9fa;
    }

    .module-checkbox {
        display: flex;
        align-items: center;
        padding: 10px;
        margin-bottom: 8px;
        background: white;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
        border: 1px solid #e2e8f0;
    }

    .module-checkbox:hover {
        background: #f0f4ff;
        border-color: #667eea;
    }

    .module-checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin-right: 12px;
        cursor: pointer;
        accent-color: #667eea;
    }

    .module-checkbox label {
        margin: 0;
        cursor: pointer;
        flex: 1;
        font-weight: 500;
        color: #2d3748;
    }

    .module-checkbox.selected {
        background: #f0f4ff;
        border-color: #667eea;
    }

    .modules-container::-webkit-scrollbar {
        width: 8px;
    }

    .modules-container::-webkit-scrollbar-track {
        background: #e2e8f0;
        border-radius: 10px;
    }

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

    .selected-count {
        font-size: 12px;
        color: #667eea;
        margin-top: 8px;
        font-weight: 600;
    }

    .form-actions {
        display: flex; 
        gap: 12px;
        margin-top: 25px;
        padding-top: 20px;
        border-top: 2px solid #e9ecef;
    }

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

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

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

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

    /* View Modal Styling */
    .view-content-wrapper {
        display: grid;
        gap: 20px;
    }

    .view-card {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 12px;
        padding: 20px;
        border-left: 4px solid #667eea;
        transition: all 0.3s ease;
    }

    .view-card:hover {
        transform: translateX(5px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
    }

    .view-card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 10px;
    }

    .view-icon {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 20px;
    }

    .view-label {
        font-size: 12px;
        color: #718096;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    .view-value {
        font-size: 16px;
        color: #2d3748;
        font-weight: 600;
        margin-top: 5px;
    }

    .modules-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        margin-top: 10px;
    }

    .module-tag {
        background: white;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 13px;
        color: #667eea;
        font-weight: 500;
        text-align: center;
        border: 2px solid #e3f2fd;
        transition: all 0.2s ease;
    }

    .module-tag:hover {
        background: #e3f2fd;
        transform: translateY(-2px);
    }

    .stats-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    .stat-box {
        background: white;
        padding: 15px;
        border-radius: 10px;
        text-align: center;
        border: 2px solid #e9ecef;
    }

    .stat-number {
        font-size: 28px;
        font-weight: 700;
        color: #667eea;
        display: block;
    }

    .stat-label {
        font-size: 12px;
        color: #718096;
        text-transform: uppercase;
        margin-top: 5px;
    }
</style>

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

    <div class="table-container">
        <table class="package-table">
            <thead>
                <tr>
                    <th>Package Name</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="packageTable">
                <!-- Dynamic packages will load here -->
            </tbody>
        </table>
    </div>
</div>

<!-- Add/Edit Modal -->
<div id="packageModal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalTitle">Add Package</h3>
            <button class="close-btn" onclick="closeForm()">&times;</button>
        </div>

        <form id="packageForm">
            <input type="hidden" id="package_id">

            <div class="form-group">
                <label>Package Name</label>
                <input type="text" id="name" required placeholder="Enter package name">
            </div>

            <div class="form-group">
                <label>Select Modules</label>
                <div class="modules-container" id="modulesContainer">
                    @foreach($modules as $module)
                        <div class="module-checkbox">
                            <input type="checkbox" id="module_{{ $module->id }}" value="{{ $module->id }}" name="modules[]">
                            <label for="module_{{ $module->id }}">{{ $module->name }}</label>
                        </div>
                    @endforeach
                </div>
                <div class="selected-count" id="selectedCount">0 modules selected</div>
            </div>

            <div class="form-group">
                <label>Maximum Users</label>
                <input type="number" id="max_users" required placeholder="Enter max users" min="1">
            </div>

            <div class="form-group">
                <label>Maximum Branches</label>
                <input type="number" id="max_branches" required placeholder="Enter max branches" min="1">
            </div>

            <div class="form-group">
                <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 Package</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">
        <div class="modal-header">
            <h3>Package Details</h3>
            <button class="close-btn" onclick="closeView()">&times;</button>
        </div>
        <div id="viewContent">
            <!-- Dynamic view content -->
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
    // Update selected count
    function updateSelectedCount() {
        const checkboxes = document.querySelectorAll('input[name="modules[]"]:checked');
        const count = checkboxes.length;
        document.getElementById('selectedCount').textContent = `${count} module${count !== 1 ? 's' : ''} selected`;
    }

    // Add event listeners to checkboxes
    document.addEventListener('DOMContentLoaded', function() {
        const checkboxes = document.querySelectorAll('input[name="modules[]"]');
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const parent = this.closest('.module-checkbox');
                if (this.checked) {
                    parent.classList.add('selected');
                } else {
                    parent.classList.remove('selected');
                }
                updateSelectedCount();
            });
        });
    });

    function loadPackages() {
        fetch('/api/packages')
        .then(res => res.json())
        .then(data => {
            let rows = '';
            if(data.data.length === 0) {
                rows = `<tr><td colspan="3" style="text-align:center; padding: 40px; color: #718096;">No packages found</td></tr>`;
            } else {
                data.data.forEach(p => {
                    let statusClass = p.status === 'active' ? 'active' : 'inactive';
                    rows += `
                    <tr>
                        <td><span class="package-name">${p.name}</span></td>
                        <td><span class="status-badge ${statusClass}">${p.status}</span></td>
                        <td class="action-buttons">
                            <button class="btn-view" onclick="viewPackage(${p.id})">View</button>
                            <button class="btn-edit" onclick="editPackage(${p.id})">Edit</button>
                            <button class="btn-delete" onclick="deletePackage(${p.id})">Delete</button>
                        </td>
                    </tr>`;
                });
            }
            document.getElementById('packageTable').innerHTML = rows;
        });
    }

    function openForm() {
        document.getElementById('packageForm').reset();
        document.getElementById('package_id').value = '';
        document.getElementById('modalTitle').textContent = 'Add Package';
        
        // Uncheck all modules
        const checkboxes = document.querySelectorAll('input[name="modules[]"]');
        checkboxes.forEach(checkbox => {
            checkbox.checked = false;
            checkbox.closest('.module-checkbox').classList.remove('selected');
        });
        
        updateSelectedCount();
        document.getElementById('packageModal').classList.add('show');
    }

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

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

    document.getElementById('packageForm').onsubmit = function(e){
        e.preventDefault();
        let id = document.getElementById('package_id').value;
        let url = '/api/packages' + (id ? '/' + id : '');
        let method = id ? 'PUT' : 'POST';

        let selectedModules = Array.from(document.querySelectorAll('input[name="modules[]"]:checked')).map(cb => cb.value);

        if (selectedModules.length === 0) {
            alert('Please select at least one module');
            return;
        }

        fetch(url,{
            method: method,
            headers: {'Content-Type':'application/json'},
            body: JSON.stringify({
                name: document.getElementById('name').value,
                modules: selectedModules,
                max_users: document.getElementById('max_users').value,
                max_branches: document.getElementById('max_branches').value,
                status: document.getElementById('status').value
            })
        })
        .then(res => res.json())
        .then(data => {
            alert(id ? 'Package updated successfully!' : 'Package added successfully!');
            closeForm();
            loadPackages();
        })
        .catch(error => {
            alert('Error: ' + error.message);
        });
    }

    function editPackage(id){
        fetch('/api/packages/'+id)
        .then(res => res.json())
        .then(p => {
            document.getElementById('package_id').value = p.data.id;
            document.getElementById('name').value = p.data.name;
            document.getElementById('max_users').value = p.data.max_users;
            document.getElementById('max_branches').value = p.data.max_branches;
            document.getElementById('status').value = p.data.status;

            // Set checkboxes
            const checkboxes = document.querySelectorAll('input[name="modules[]"]');
            checkboxes.forEach(checkbox => {
                const isSelected = p.data.modules.some(m => m.id == checkbox.value);
                checkbox.checked = isSelected;
                if (isSelected) {
                    checkbox.closest('.module-checkbox').classList.add('selected');
                } else {
                    checkbox.closest('.module-checkbox').classList.remove('selected');
                }
            });

            updateSelectedCount();
            document.getElementById('modalTitle').textContent = 'Edit Package';
            document.getElementById('packageModal').classList.add('show');
        });
    }

    function deletePackage(id){
        if(confirm('Are you sure you want to delete this package?')) {
            fetch('/api/packages/'+id, {method:'DELETE'})
            .then(res => res.json())
            .then(() => {
                alert('Package deleted successfully!');
                loadPackages();
            })
            .catch(error => {
                alert('Error deleting package: ' + error.message);
            });
        }
    }

    function viewPackage(id){
        fetch('/api/packages/'+id)
        .then(res => res.json())
        .then(p => {
            let modulesHtml = p.data.modules.map(m => `<div class="module-tag">${m.name}</div>`).join('');
            let statusClass = p.data.status === 'active' ? 'active' : 'inactive';
            
            let html = `
                <div class="view-content-wrapper">
                    <!-- Package Name Card -->
                    <div class="view-card">
                        <div class="view-card-header">
                            <div class="view-icon">
                                <ion-icon name="cube-outline"></ion-icon>
                            </div>
                            <div>
                                <div class="view-label">Package Name</div>
                                <div class="view-value">${p.data.name}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Status Card -->
                    <div class="view-card">
                        <div class="view-card-header">
                            <div class="view-icon">
                                <ion-icon name="pulse-outline"></ion-icon>
                            </div>
                            <div>
                                <div class="view-label">Status</div>
                                <div class="view-value">
                                    <span class="status-badge ${statusClass}">${p.data.status}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Stats Row -->
                    <div class="stats-row">
                        <div class="stat-box">
                            <span class="stat-number">${p.data.max_users}</span>
                            <div class="stat-label">Max Users</div>
                        </div>
                        <div class="stat-box">
                            <span class="stat-number">${p.data.max_branches}</span>
                            <div class="stat-label">Max Branches</div>
                        </div>
                    </div>

                    <!-- Modules Card -->
                    <div class="view-card">
                        <div class="view-card-header">
                            <div class="view-icon">
                                <ion-icon name="grid-outline"></ion-icon>
                            </div>
                            <div>
                                <div class="view-label">Modules (${p.data.modules.length})</div>
                            </div>
                        </div>
                        <div class="modules-grid">
                            ${modulesHtml}
                        </div>
                    </div>
                </div>
            `;
            document.getElementById('viewContent').innerHTML = html;
            document.getElementById('viewModal').classList.add('show');
        });
    }

    loadPackages();
</script>
@endsection