@extends('layouts.app')

@section('title', 'Add MAC Reseller - ISP ERP System')

@section('page-title', 'Add MAC Reseller')

@push('styles')
<style>
.modal-content {
    border-radius: 15px;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 15px 15px 0 0;
    border: none;
}

.modal-title {
    font-weight: 600;
    font-size: 1.3rem;
}

.modal-body {
    padding: 2rem;
}

.form-label {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.form-control {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.form-control.is-invalid {
    border-color: #dc3545;
}

.invalid-feedback {
    font-size: 0.85rem;
    font-weight: 500;
}

.btn-cancel {
    background: #6c757d;
    border: none;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-cancel:hover {
    background: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

.btn-add {
    background: linear-gradient(135deg, #ffa502 0%, #ff6348 100%);
    border: none;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 165, 2, 0.4);
}

.btn-add:active {
    transform: translateY(0);
}

.close {
    color: white;
    opacity: 0.8;
    font-size: 1.5rem;
}

.close:hover {
    opacity: 1;
    color: white;
}

.row {
    margin: 0 -0.5rem;
}

.col-md-6 {
    padding: 0 0.5rem;
}

.mb-3 {
    margin-bottom: 1.5rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .modal-body {
        padding: 1.5rem;
    }
    
    .col-md-6 {
        margin-bottom: 1rem;
    }
    
    .btn-cancel, .btn-add {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- Back Button -->
    <div class="row mb-4">
        <div class="col-12">
            <a href="{{ route('pppoe-mac-reseller.index') }}" class="btn btn-outline-primary">
                <i class="fas fa-arrow-left me-2"></i>Back to Dashboard
            </a>
        </div>
    </div>

    <!-- Add MAC Reseller Form -->
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                    <h4 class="mb-0">
                        <i class="fas fa-user-plus me-2"></i>Add MAC Reseller
                    </h4>
                </div>
                <div class="card-body">
                    <form action="{{ route('pppoe-mac-reseller.store') }}" method="POST">
                        @csrf
                        
                        <div class="row">
                            <!-- Left Column -->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="company_name" class="form-label">Company Name *</label>
                                    <input type="text" class="form-control @error('company_name') is-invalid @enderror" 
                                           id="company_name" name="company_name" 
                                           value="{{ old('company_name') }}" 
                                           placeholder="Enter company name" required>
                                    @error('company_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="email" class="form-label">Email Address *</label>
                                    <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                           id="email" name="email" 
                                           value="{{ old('email') }}" 
                                           placeholder="Enter email address" required>
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="password" class="form-label">Password *</label>
                                    <input type="password" class="form-control @error('password') is-invalid @enderror" 
                                           id="password" name="password" 
                                           placeholder="Enter password" required>
                                    @error('password')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="address" class="form-label">Address *</label>
                                    <textarea class="form-control @error('address') is-invalid @enderror" 
                                              id="address" name="address" rows="3" 
                                              placeholder="Enter address" required>{{ old('address') }}</textarea>
                                    @error('address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="status" class="form-label">Status</label>
                                    <select class="form-control @error('status') is-invalid @enderror" 
                                            id="status" name="status" required>
                                        <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Right Column -->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="full_name" class="form-label">Full Name *</label>
                                    <input type="text" class="form-control @error('full_name') is-invalid @enderror" 
                                           id="full_name" name="full_name" 
                                           value="{{ old('full_name') }}" 
                                           placeholder="Enter full name" required>
                                    @error('full_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="phone" class="form-label">Phone *</label>
                                    <input type="tel" class="form-control @error('phone') is-invalid @enderror" 
                                           id="phone" name="phone" 
                                           value="{{ old('phone') }}" 
                                           placeholder="Enter phone number" required>
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="password_confirmation" class="form-label">Confirm Password *</label>
                                    <input type="password" class="form-control @error('password_confirmation') is-invalid @enderror" 
                                           id="password_confirmation" name="password_confirmation" 
                                           placeholder="Confirm password" required>
                                    @error('password_confirmation')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="role" class="form-label">Role</label>
                                    <select class="form-control @error('role') is-invalid @enderror" 
                                            id="role" name="role" required>
                                        <option value="mac_reseller" {{ old('role') == 'mac_reseller' ? 'selected' : '' }}>MAC Reseller</option>
                                        <option value="reseller" {{ old('role') == 'reseller' ? 'selected' : '' }}>Reseller</option>
                                    </select>
                                    @error('role')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Assign Branches & Servers Button -->
                                <div class="mb-3">
                                    <label class="form-label">Branch & Server Assignment</label>
                                    <button type="button" class="btn btn-outline-primary w-100" onclick="openAssignmentModal()">
                                        <i class="fas fa-link me-2"></i>Assign Branches & Servers
                                    </button>
                                    <small class="form-text text-muted">Click to assign branches and servers to this reseller</small>
                                </div>

                                <!-- Assign Menus Button -->
                                <div class="mb-3">
                                    <label class="form-label">Menu Assignment</label>
                                    <button type="button" class="btn btn-outline-info w-100" onclick="openMenuAssignmentModal()">
                                        <i class="fas fa-list me-2"></i>Assign Menus
                                    </button>
                                    <small class="form-text text-muted">Click to assign menus to this reseller</small>
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-end gap-3">
                                    <a href="{{ route('pppoe-mac-reseller.index') }}" class="btn btn-cancel">
                                        <i class="fas fa-times me-2"></i>Cancel
                                    </a>
                                    <button type="submit" class="btn btn-add">
                                        <i class="fas fa-user-plus me-2"></i>Add MAC Reseller
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Assignment Modal -->
<div class="modal fade" id="assignmentModal" tabindex="-1" aria-labelledby="assignmentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                <h5 class="modal-title" id="assignmentModalLabel">
                    <i class="fas fa-user-plus me-2"></i>
                    Assign Branches & Servers
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="mb-3">
                            <i class="fas fa-map-marker-alt me-2"></i>
                            Assign Branches
                        </h6>
                        <div class="form-group mb-3">
                            <select class="form-control" id="branchSelect" name="branch_ids[]" multiple style="height: 200px;">
                                @foreach(\App\Models\Branch::where('is_active', true)->orderBy('name')->get() as $branch)
                                    <option value="{{ $branch->id }}" {{ in_array($branch->id, old('branch_ids', [])) ? 'selected' : '' }}>{{ $branch->name }}</option>
                                @endforeach
                            </select>
                            <small class="form-text text-muted">Hold Ctrl/Cmd to select multiple branches</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6 class="mb-3">
                            <i class="fas fa-server me-2"></i>
                            Assign Servers
                        </h6>
                        <div class="form-group mb-3">
                            <select class="form-control" id="serverSelect" name="server_ids[]" multiple style="height: 200px;">
                                @foreach(\App\Models\MikrotikServer::where('is_active', true)->orderBy('name')->get() as $server)
                                    <option value="{{ $server->id }}" {{ in_array($server->id, old('server_ids', [])) ? 'selected' : '' }}>{{ $server->name }}</option>
                                @endforeach
                            </select>
                            <small class="form-text text-muted">Hold Ctrl/Cmd to select multiple servers</small>
                        </div>
                    </div>
                </div>
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Note:</strong> Select multiple branches and servers to assign to this MAC reseller. 
                    They will only see clients from these assigned branches and servers.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Close
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Menu Assignment Modal -->
<div class="modal fade" id="menuAssignmentModal" tabindex="-1" aria-labelledby="menuAssignmentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background: linear-gradient(135deg, #17a2b8 0%, #138496 100%); color: white;">
                <h5 class="modal-title" id="menuAssignmentModalLabel">
                    <i class="fas fa-list me-2"></i>
                    Assign Menus
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info mb-3">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Note:</strong> Select the menus that should be available to this reseller.
                </div>
                <div style="max-height: 400px; overflow-y: auto;">
                    @foreach(\App\Models\Menu::whereNull('parent_id')->with('children')->where('is_active', true)->orderBy('sort_order')->get() as $menu)
                        <div class="card mb-2">
                            <div class="card-header p-2">
                                <div class="form-check">
                                    <input class="form-check-input parent-menu-checkbox" 
                                           type="checkbox" 
                                           id="menu_{{ $menu->id }}"
                                           data-parent="{{ $menu->id }}"
                                           {{ in_array($menu->id, old('menu_ids', [])) ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="menu_{{ $menu->id }}">
                                        @if($menu->icon)
                                            <i class="{{ $menu->icon }} me-2"></i>
                                        @endif
                                        {{ $menu->name }}
                                    </label>
                                </div>
                            </div>
                            @if($menu->children->count() > 0)
                                <div class="card-body pt-2 pb-2">
                                    @foreach($menu->children as $child)
                                        <div class="form-check ms-3">
                                            <input class="form-check-input child-menu-checkbox" 
                                                   type="checkbox" 
                                                   id="child_menu_{{ $child->id }}"
                                                   data-parent="{{ $menu->id }}"
                                                   {{ in_array($child->id, old('menu_ids', [])) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="child_menu_{{ $child->id }}">
                                                @if($child->icon)
                                                    <i class="{{ $child->icon }} me-2"></i>
                                                @endif
                                                {{ $child->name }}
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Close
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Form validation
    const form = document.querySelector('form');
    const password = document.getElementById('password');
    const confirmPassword = document.getElementById('password_confirmation');
    
    // Password confirmation validation
    function validatePassword() {
        if (password.value !== confirmPassword.value) {
            confirmPassword.setCustomValidity('Passwords do not match');
        } else {
            confirmPassword.setCustomValidity('');
        }
    }
    
    password.addEventListener('change', validatePassword);
    confirmPassword.addEventListener('keyup', validatePassword);
    
    // Form submission
    form.addEventListener('submit', function(e) {
        validatePassword();
        
        if (!form.checkValidity()) {
            e.preventDefault();
            e.stopPropagation();
        }
        
        form.classList.add('was-validated');
    });
    
    // Auto-focus first input
    document.getElementById('company_name').focus();
});

// Function to open assignment modal
function openAssignmentModal() {
    var modal = new bootstrap.Modal(document.getElementById('assignmentModal'));
    modal.show();
}

// Copy selected values to hidden inputs when modal closes
document.getElementById('assignmentModal').addEventListener('hide.bs.modal', function() {
    const branchSelect = document.getElementById('branchSelect');
    const serverSelect = document.getElementById('serverSelect');
    
    // Remove any existing hidden inputs
    document.querySelectorAll('input[name="branch_ids[]"], input[name="server_ids[]"]').forEach(input => input.remove());
    
    // Add hidden inputs for selected branches
    Array.from(branchSelect.selectedOptions).forEach(option => {
        const hidden = document.createElement('input');
        hidden.type = 'hidden';
        hidden.name = 'branch_ids[]';
        hidden.value = option.value;
        document.querySelector('form').appendChild(hidden);
    });
    
    // Add hidden inputs for selected servers
    Array.from(serverSelect.selectedOptions).forEach(option => {
        const hidden = document.createElement('input');
        hidden.type = 'hidden';
        hidden.name = 'server_ids[]';
        hidden.value = option.value;
        document.querySelector('form').appendChild(hidden);
    });
});

// Function to open menu assignment modal
function openMenuAssignmentModal() {
    var modal = new bootstrap.Modal(document.getElementById('menuAssignmentModal'));
    modal.show();
}

// Copy selected menu values to hidden inputs when modal closes
document.getElementById('menuAssignmentModal').addEventListener('hide.bs.modal', function() {
    const checkboxes = document.querySelectorAll('#menuAssignmentModal input[type="checkbox"]:checked');
    
    // Remove any existing menu hidden inputs
    document.querySelectorAll('input[name="menu_ids[]"]').forEach(input => input.remove());
    
    // Add hidden inputs for checked menus
    checkboxes.forEach(checkbox => {
        let menuId = checkbox.id;
        // Extract menu ID from checkbox ID
        if (menuId.startsWith('menu_')) {
            menuId = menuId.replace('menu_', '');
        } else if (menuId.startsWith('child_menu_')) {
            menuId = menuId.replace('child_menu_', '');
        }
        
        const hidden = document.createElement('input');
        hidden.type = 'hidden';
        hidden.name = 'menu_ids[]';
        hidden.value = menuId;
        document.querySelector('form').appendChild(hidden);
    });
});

// Handle parent-child checkbox relationship
document.addEventListener('DOMContentLoaded', function() {
    const parentCheckboxes = document.querySelectorAll('.parent-menu-checkbox');
    const childCheckboxes = document.querySelectorAll('.child-menu-checkbox');
    
    // When parent is checked, check all children
    parentCheckboxes.forEach(parent => {
        parent.addEventListener('change', function() {
            const parentId = this.getAttribute('data-parent');
            childCheckboxes.forEach(child => {
                if (child.getAttribute('data-parent') === parentId) {
                    child.checked = this.checked;
                }
            });
        });
    });
    
    // When child is unchecked, uncheck parent
    childCheckboxes.forEach(child => {
        child.addEventListener('change', function() {
            if (!this.checked) {
                const parentId = this.getAttribute('data-parent');
                const parent = document.getElementById('menu_' + parentId);
                if (parent) {
                    parent.checked = false;
                }
            }
        });
    });
});
</script>
@endpush