@extends('layouts.app')

@section('title', 'General Settings')

@section('content')
    <div class="mb-4">
        <h4 class="mb-0">System Configuration</h4>
        <p class="text-muted small">Manage platform preferences, email servers, and access control.</p>
    </div>

    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm mb-4">
            {{ session('success') }}
        </div>
    @endif

    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
        <div class="card-header bg-white border-0 p-0">
            <ul class="nav nav-tabs nav-fill border-0" id="settingsTabs" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active py-3 border-0 rounded-0 d-flex align-items-center justify-content-center gap-2" 
                        id="system-tab" data-bs-toggle="tab" data-bs-target="#system" type="button" role="tab">
                        <i class="bi bi-gear-wide-connected"></i> <span>General</span>
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link py-3 border-0 rounded-0 d-flex align-items-center justify-content-center gap-2" 
                        id="email-tab" data-bs-toggle="tab" data-bs-target="#email" type="button" role="tab">
                        <i class="bi bi-envelope-at"></i> <span>SMTP Server</span>
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link py-3 border-0 rounded-0 d-flex align-items-center justify-content-center gap-2" 
                        id="users-tab" data-bs-toggle="tab" data-bs-target="#users" type="button" role="tab">
                        <i class="bi bi-people"></i> <span>User Management</span>
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link py-3 border-0 rounded-0 d-flex align-items-center justify-content-center gap-2" 
                        id="roles-tab" data-bs-toggle="tab" data-bs-target="#roles" type="button" role="tab">
                        <i class="bi bi-shield-lock"></i> <span>Roles & Permissions</span>
                    </button>
                </li>
            </ul>
        </div>
        <div class="card-body p-4 pt-5">
            <div class="tab-content" id="settingsTabsContent">
                <!-- System General Settings -->
                <div class="tab-pane fade show active" id="system" role="tabpanel">
                    <form action="{{ route('settings.update') }}" method="POST">
                        @csrf
                        <div class="row g-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-uppercase opacity-75">Platform Name</label>
                                <input type="text" name="app_name" class="form-control" value="{{ $settings['app_name'] }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-uppercase opacity-75">System Timezone</label>
                                <select name="timezone" class="form-select">
                                    <option>UTC (Coordinated Universal Time)</option>
                                    <option selected>Africa/Cairo (Egypt Standard Time)</option>
                                </select>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label fw-bold small text-uppercase opacity-75">Platform Logo Overlay</label>
                                <div class="p-4 bg-light border border-dashed rounded-3">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="bg-primary text-white p-3 rounded-circle">
                                            <i class="bi bi-upload"></i>
                                        </div>
                                        <div>
                                            <p class="mb-1 fw-bold">Click to upload or drag and drop</p>
                                            <p class="text-muted small mb-0">SVG, PNG, JPG (MAX. 800x400px)</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mt-5 text-end">
                            <button type="submit" class="btn btn-primary px-4">Save System Profile</button>
                        </div>
                    </form>
                </div>

                <!-- Email Server (SMTP) -->
                <div class="tab-pane fade" id="email" role="tabpanel">
                    <div class="alert alert-info border-0 bg-info-subtle text-info mb-4">
                        <i class="bi bi-info-circle-fill me-2"></i> Configure your SMTP server to enable system notifications and reports distribution.
                    </div>
                    <form action="{{ route('settings.update') }}" method="POST">
                        @csrf
                        <div class="row g-4">
                            <div class="col-md-8">
                                <label class="form-label fw-bold small text-uppercase opacity-75">SMTP Host</label>
                                <input type="text" name="smtp_host" class="form-control" value="{{ $settings['smtp_host'] }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold small text-uppercase opacity-75">SMTP Port</label>
                                <input type="number" name="smtp_port" class="form-control" value="{{ $settings['smtp_port'] }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-uppercase opacity-75">Encryption</label>
                                <select name="smtp_encryption" class="form-select">
                                    <option value="tls" selected>TLS (Recommended)</option>
                                    <option value="ssl">SSL</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-uppercase opacity-75">Authentication Mode</label>
                                <select name="smtp_auth" class="form-select">
                                    <option value="login" selected>Login</option>
                                    <option value="plain">Plain</option>
                                </select>
                            </div>
                        </div>
                        <div class="mt-5 d-flex justify-content-between align-items-center">
                            <button type="button" class="btn btn-outline-primary btn-sm px-3">
                                <i class="bi bi-send-check me-1"></i> Send Test Email
                            </button>
                            <button type="submit" class="btn btn-primary px-4">Update SMTP Config</button>
                        </div>
                    </form>
                </div>

                <!-- User Management -->
                <div class="tab-pane fade" id="users" role="tabpanel">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h6 class="mb-0 fw-bold">Active System Users</h6>
                        <button class="btn btn-dark btn-sm px-3" data-bs-toggle="modal" data-bs-target="#addUserModal">
                            <i class="bi bi-person-plus me-1"></i> Invite New User
                        </button>
                    </div>
                    <div class="table-responsive rounded-3 border">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light">
                                <tr>
                                    <th class="border-0 ps-3">User</th>
                                    <th class="border-0">Position</th>
                                    <th class="border-0">Role</th>
                                    <th class="border-0">Last Login</th>
                                    <th class="border-0 pe-3 text-end">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="ps-3">
                                        <div class="d-flex align-items-center gap-3">
                                            <img src="https://ui-avatars.com/api/?name=Akmal+El-Sayed&background=3b82f6&color=fff&size=128" 
                                                 class="rounded-circle shadow-sm border border-2 border-white" 
                                                 width="42" height="42" alt="AE">
                                            <div>
                                                <div class="fw-bold text-dark">Akmal El-Sayed</div>
                                                <div class="text-muted small">akmal@production.com</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>Plant Director</td>
                                    <td><span class="badge bg-danger-subtle text-danger px-3">Administrator</span></td>
                                    <td class="small text-muted">2 mins ago</td>
                                    <td class="pe-3 text-end">
                                        <button class="btn btn-link btn-sm text-primary p-2 hover-bg-light rounded-circle border-0" 
                                                data-bs-toggle="modal" data-bs-target="#editUserModal">
                                            <i class="bi bi-pencil-square fs-5"></i>
                                        </button>
                                        <button class="btn btn-link btn-sm text-danger p-2 hover-bg-light rounded-circle border-0" 
                                                onclick="confirm('Are you sure you want to remove this user?')">
                                            <i class="bi bi-trash fs-5"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Roles & Permissions -->
                <div class="tab-pane fade" id="roles" role="tabpanel">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h6 class="mb-0 fw-bold">Role Architecture</h6>
                        <button class="btn btn-dark btn-sm px-3" data-bs-toggle="modal" data-bs-target="#addRoleModal">Create New Role</button>
                    </div>
                    <div class="row g-4">
                        <div class="col-md-4">
                            <div class="card bg-white border h-100 p-3">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <span class="badge bg-primary px-3">Administrator</span>
                                    <i class="bi bi-shield-check text-primary fs-4"></i>
                                </div>
                                <p class="small text-muted mb-4">Full system access, management of all modules and system settings.</p>
                                <div class="mt-auto d-flex justify-content-between align-items-center">
                                    <span class="text-dark fw-bold small">3 Users</span>
                                    <button class="btn btn-link btn-sm p-0 text-primary small text-decoration-none fw-bold border-0" data-bs-toggle="modal" data-bs-target="#editPermissionsModal">Edit Permissions</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card bg-white border h-100 p-3">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <span class="badge bg-secondary px-3">Production Manager</span>
                                    <i class="bi bi-box-seam text-secondary fs-4"></i>
                                </div>
                                <p class="small text-muted mb-4">Manage work orders, machines, and production schedules without system config access.</p>
                                <div class="mt-auto d-flex justify-content-between align-items-center">
                                    <span class="text-dark fw-bold small">12 Users</span>
                                    <button class="btn btn-link btn-sm p-0 text-primary small text-decoration-none fw-bold border-0" data-bs-toggle="modal" data-bs-target="#editPermissionsModal">Edit Permissions</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card bg-white border h-100 p-3">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <span class="badge bg-info-subtle text-info px-3 border border-info">Observer</span>
                                    <i class="bi bi-eye text-info fs-4"></i>
                                </div>
                                <p class="small text-muted mb-4">Read-only access to reports and analytics for general overview tracking.</p>
                                <div class="mt-auto d-flex justify-content-between align-items-center">
                                    <span class="text-dark fw-bold small">8 Users</span>
                                    <button class="btn btn-link btn-sm p-0 text-primary small text-decoration-none fw-bold border-0" data-bs-toggle="modal" data-bs-target="#editPermissionsModal">Edit Permissions</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Add User Modal -->
    <div class="modal fade" id="addUserModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg rounded-4">
                <div class="modal-header border-0 pt-4 px-4">
                    <h5 class="modal-title fw-bold">Invite New User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="text-center mb-4">
                        <div class="position-relative d-inline-block">
                            <img src="https://ui-avatars.com/api/?name=User&background=f8fafc&color=cbd5e1&size=128" 
                                 id="previewInviteImage"
                                 class="rounded-circle border border-3 border-white shadow-sm" 
                                 width="100" height="100" alt="Avatar">
                            <label for="inviteAvatarUpload" class="position-absolute bottom-0 end-0 bg-primary text-white rounded-circle p-2 shadow-sm cursor-pointer" style="margin-right: -5px; margin-bottom: -5px;">
                                <i class="bi bi-camera-fill small"></i>
                                <input type="file" id="inviteAvatarUpload" class="d-none" accept="image/*">
                            </label>
                        </div>
                        <p class="text-muted small mt-2 mb-0">Upload Profile Picture</p>
                    </div>
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label class="form-label small fw-bold text-uppercase">Full Name</label>
                            <input type="text" class="form-control" placeholder="e.g. John Doe">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label class="form-label small fw-bold text-uppercase">Email Address</label>
                            <input type="email" class="form-control" placeholder="john@enterprise.com">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label small fw-bold text-uppercase">Phone Number</label>
                            <input type="tel" class="form-control" placeholder="+20 123 456 789">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label small fw-bold text-uppercase">Gender</label>
                            <select class="form-select">
                                <option selected disabled>Select Gender</option>
                                <option value="male">Male</option>
                                <option value="female">Female</option>
                            </select>
                        </div>
                        <div class="col-md-12 mb-3">
                            <label class="form-label small fw-bold text-uppercase">Assign Role</label>
                            <select class="form-select">
                                <option>Production Manager</option>
                                <option>Quality Inspector</option>
                                <option>Observer</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 pb-4 px-4">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary px-4" onclick="alert('User invitation sent!')">Send Invitation</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit User Modal -->
    <div class="modal fade" id="editUserModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg rounded-4 overflow-hidden">
                <div class="modal-header border-0 pt-4 px-4">
                    <h5 class="modal-title fw-bold">Edit System User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="text-center mb-4">
                        <div class="position-relative d-inline-block">
                            <img src="https://ui-avatars.com/api/?name=Akmal+El-Sayed&background=3b82f6&color=fff&size=128" 
                                 id="previewEditImage"
                                 class="rounded-circle border border-3 border-white shadow-sm" 
                                 width="100" height="100" alt="Avatar">
                            <label for="editAvatarUpload" class="position-absolute bottom-0 end-0 bg-primary text-white rounded-circle p-2 shadow-sm cursor-pointer" style="margin-right: -5px; margin-bottom: -5px;">
                                <i class="bi bi-camera-fill small"></i>
                                <input type="file" id="editAvatarUpload" class="d-none" accept="image/*">
                            </label>
                        </div>
                        <p class="text-muted small mt-2 mb-0">Change Profile Image</p>
                    </div>

                    <div class="row g-3">
                        <div class="col-md-12">
                            <label class="form-label small fw-bold text-uppercase opacity-75">Full Name</label>
                            <input type="text" class="form-control form-control-lg" value="Akmal El-Sayed">
                        </div>
                        <div class="col-md-12">
                            <label class="form-label small fw-bold text-uppercase opacity-75">Email Address</label>
                            <input type="email" class="form-control form-control-lg" value="akmal@production.com">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-uppercase opacity-75">Phone Number</label>
                            <input type="tel" class="form-control form-control-lg" value="+20 102 345 6789">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-uppercase opacity-75">Gender</label>
                            <select class="form-select form-select-lg">
                                <option value="male" selected>Male</option>
                                <option value="female">Female</option>
                            </select>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label small fw-bold text-uppercase opacity-75">Assign Role</label>
                            <select class="form-select form-select-lg">
                                <option selected>Administrator</option>
                                <option>Production Manager</option>
                                <option>Quality Inspector</option>
                                <option>Observer</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 pb-4 px-4">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Discard Changes</button>
                    <button type="button" class="btn btn-primary px-4 shadow-sm" onclick="alert('User profile updated!')">Update Account</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="addRoleModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg rounded-4">
                <div class="modal-header border-0 pt-4 px-4">
                    <h5 class="modal-title fw-bold">Create New Role</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label small fw-bold text-uppercase">Role Name</label>
                        <input type="text" class="form-control" placeholder="e.g. Warehouse Supervisor">
                    </div>
                    <div class="mb-0">
                        <label class="form-label small fw-bold text-uppercase">Description</label>
                        <textarea class="form-control" rows="3" placeholder="Define the scope of this role..."></textarea>
                    </div>
                </div>
                <div class="modal-footer border-0 pb-4 px-4">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary px-4" onclick="alert('Role created!')">Define Role</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Permissions Modal -->
    <div class="modal fade" id="editPermissionsModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content border-0 shadow-lg rounded-4">
                <div class="modal-header border-0 pt-4 px-4">
                    <h5 class="modal-title fw-bold">Configure Role Permissions</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="bg-light sticky-top">
                                <tr>
                                    <th class="ps-4 py-3 small fw-bold text-uppercase" style="width: 40%;">Module / Page</th>
                                    <th class="py-3 small fw-bold text-uppercase text-center">Read</th>
                                    <th class="py-3 small fw-bold text-uppercase text-center">Write</th>
                                    <th class="py-3 small fw-bold text-uppercase text-center">Delete</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Assets Section -->
                                <tr class="bg-light-subtle">
                                    <td colspan="4" class="ps-4 fw-bold small text-primary text-uppercase">Assets & Equipment</td>
                                </tr>
                                <tr>
                                    <td class="ps-5">Machines Center</td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input"></td>
                                </tr>
                                <!-- Production Section -->
                                <tr class="bg-light-subtle">
                                    <td colspan="4" class="ps-4 fw-bold small text-primary text-uppercase">Production Management</td>
                                </tr>
                                <tr>
                                    <td class="ps-5">Product Catalog</td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                </tr>
                                <tr>
                                    <td class="ps-5">BOM Registry</td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input"></td>
                                </tr>
                                <tr>
                                    <td class="ps-5">Work Orders</td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input"></td>
                                </tr>
                                <!-- Inventory Section -->
                                <tr class="bg-light-subtle">
                                    <td colspan="4" class="ps-4 fw-bold small text-primary text-uppercase">Inventory & Logistics</td>
                                </tr>
                                <tr>
                                    <td class="ps-5">Global Stock</td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input"></td>
                                </tr>
                                <tr>
                                    <td class="ps-5">Warehouses</td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input"></td>
                                </tr>
                                <!-- Quality Section -->
                                <tr class="bg-light-subtle">
                                    <td colspan="4" class="ps-4 fw-bold small text-primary text-uppercase">Quality & Maintenance</td>
                                </tr>
                                <tr>
                                    <td class="ps-5">Quality Control</td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input"></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input"></td>
                                </tr>
                                <tr>
                                    <td class="ps-5">Machine CMMS</td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input"></td>
                                </tr>
                                <!-- System Section -->
                                <tr class="bg-light-subtle">
                                    <td colspan="4" class="ps-4 fw-bold small text-primary text-uppercase">System Settings</td>
                                </tr>
                                <tr>
                                    <td class="ps-5">General Settings</td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input"></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input"></td>
                                </tr>
                                <tr>
                                    <td class="ps-5">Human Resources</td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input"></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input"></td>
                                </tr>
                                <tr>
                                    <td class="ps-5 pe-4">Analytics Engine</td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input" checked></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input"></td>
                                    <td class="text-center"><input type="checkbox" class="form-check-input"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer border-0 pb-4 px-4">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary px-4" onclick="alert('Permissions updated!')">Update Policy</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('styles')
<style>
    .nav-tabs .nav-link {
        color: #64748b;
        font-weight: 500;
        transition: all 0.3s;
        border-bottom: 2px solid transparent !important;
    }
    .nav-tabs .nav-link:hover {
        background-color: #f8fafc;
        color: #3b82f6;
    }
    .nav-tabs .nav-link.active {
        color: #3b82f6 !important;
        background: white !important;
        border-bottom: 2px solid #3b82f6 !important;
    }
    .form-control:focus, .form-select:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    }
    .form-label { margin-bottom: 0.6rem; }
</style>
@endsection