<div class="modal fade" id="mikrotikModal" tabindex="-1" aria-labelledby="mikrotikModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <form id="mikrotikForm" action="<?php echo e(route('admin.mikrotiks.store')); ?>" method="POST">
                <?php echo csrf_field(); ?>
                <input type="hidden" name="mikrotik_id" id="mikrotikId">
                <div class="modal-header"><h5 class="modal-title" id="mikrotikModalLabel">New MikroTik Server</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div>
                <div class="modal-body bg-light-subtle">
                    <div class="bg-white border rounded-4 p-3 p-md-4 mb-3">
                        <div class="d-flex align-items-center gap-2 mb-2"><span class="stat-icon stat-primary"><i class="fas fa-server"></i></span><h6 class="mb-0">Basic information</h6></div>
                        <p class="text-muted small mb-3">Only fill the main router details. Advanced options are optional.</p>
                        <div class="row g-3">
                            <div class="col-md-6"><label class="form-label">Router name</label><input type="text" name="name" class="form-control" placeholder="Main Router" required></div>
                            <div class="col-md-6"><label class="form-label">IP / Host</label><input type="text" name="ip_address" class="form-control" placeholder="103.186.238.34 or core.example.com" autocomplete="off" required><div class="form-text">Do not write http, https or port.</div></div>
                            <div class="col-md-4"><label class="form-label">API port</label><input type="number" name="api_port" id="mikrotikApiPort" class="form-control" value="8728" min="1" max="65535" required></div>
                            <div class="col-md-4"><label class="form-label">Username</label><input type="text" name="username" class="form-control" autocomplete="off" required></div>
                            <div class="col-md-4"><label class="form-label">Password</label><div class="input-group"><input type="password" name="password" id="mikrotikPassword" class="form-control" autocomplete="new-password" required><button class="btn btn-outline-secondary" type="button" id="toggleMikrotikPassword" aria-label="Show password"><i class="fas fa-eye"></i></button></div><div class="form-text" id="mikrotikPasswordHelp">Required for new router.</div></div>
                        </div>
                    </div>

                    <div class="accordion" id="mikrotikAdvancedAccordion">
                        <div class="accordion-item border-0 shadow-sm rounded-4 overflow-hidden">
                            <h2 class="accordion-header" id="mikrotikAdvancedHeading">
                                <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#mikrotikAdvancedBody" aria-expanded="false" aria-controls="mikrotikAdvancedBody">
                                    Advanced options
                                </button>
                            </h2>
                            <div id="mikrotikAdvancedBody" class="accordion-collapse collapse" aria-labelledby="mikrotikAdvancedHeading" data-bs-parent="#mikrotikAdvancedAccordion">
                                <div class="accordion-body bg-white">
                                    <div class="row g-3">
                                        <div class="col-md-4"><label class="form-label">SSL</label><select name="ssl_enabled" class="form-select" required><option value="0">No</option><option value="1">Yes</option></select></div>
                                        <div class="col-md-4"><label class="form-label">Status</label><select name="status" class="form-select" required><option value="1">Active</option><option value="0">Inactive</option></select></div>
                                        <div class="col-md-4 d-flex align-items-end"><div class="form-check form-switch app-toggle"><input type="hidden" name="is_default" value="0"><input class="form-check-input" type="checkbox" name="is_default" id="mikrotikDefault" value="1"><label class="form-check-label" for="mikrotikDefault">Set as default</label></div></div>
                                        <div class="col-12"><label class="form-label">Note</label><textarea name="remarks" class="form-control" rows="2" placeholder="Optional note"></textarea></div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="mikrotikConnectionResult" class="alert d-none mt-3 mb-0" role="alert"></div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" id="connection-tested" value="0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-outline-info" id="checkMikrotikConnectionButton"><span class="button-label">Check Connection</span><span class="button-loader d-none"><span class="spinner-border spinner-border-sm"></span> Checking</span></button>
                    <button type="submit" class="btn btn-primary" id="saveMikrotikButton"><span class="button-label">Save Server</span><span class="button-loader d-none"><span class="spinner-border spinner-border-sm"></span> Saving</span></button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    #mikrotikModal .accordion-button:not(.collapsed){background:#eef4ff;color:#23395d;box-shadow:none}
    #mikrotikModal .accordion-button:focus{box-shadow:none}
</style>
<?php /**PATH D:\herd\billing\laravel-app\resources\views\admin\mikrotiks\partials\modal.blade.php ENDPATH**/ ?>